@siteable/core 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@siteable/core",
+  "version": "0.1.0",
+  "description": "Siteable core engine — blocks, visual editor, config store, theme presets, HTML export. JSON-first website builder engine.",
+  "license": "MIT",
+  "type": "module",
+  "author": "Ha Nguyen",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Siteable/siteable-core.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "NOTICE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zustand": "^5.0.11",
+    "immer": "^11.1.4",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "sonner": "^2.0.7",
+    "lucide-react": "^0.575.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "jsdom": "^30.1.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "website-builder",
+    "page-builder",
+    "visual-editor",
+    "drag-and-drop",
+    "ai-website-builder",
+    "json",
+    "react",
+    "typescript",
+    "tailwindcss",
+    "landing-page",
+    "no-code",
+    "open-source",
+    "self-hosted",
+    "engine",
+    "blocks"
+  ]
+}

package/src/blocks/BlockWrapper.tsx

@@ -0,0 +1,149 @@
+import { type ReactNode, useRef, useEffect } from 'react'
+import { Copy, Trash2, ChevronUp, ChevronDown } from 'lucide-react'
+import { toast } from 'sonner'
+import { useConfigStore } from '@/store/configStore'
+import { useEditorStore } from '@/store/editorStore'
+import { useScrollReveal } from '@/lib/useScrollReveal'
+import type { BlockConfig } from './types'
+
+interface Props {
+  block: BlockConfig
+  isSelected: boolean
+  onSelect: () => void
+  children: ReactNode
+}
+
+export function BlockWrapper({ block, isSelected, onSelect, children }: Props) {
+  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 { duplicateBlock, removeBlock, moveBlock } = useConfigStore()
+  const { selectedBlockId, selectBlock } = useEditorStore()
+  const previewMode = useEditorStore((s) => s.previewMode)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { ref: revealRef, isRevealed } = useScrollReveal(!previewMode)
+
+  const index = blocks.findIndex((b) => b.id === block.id)
+  const isFirst = index === 0
+  const isLast = index === blocks.length - 1
+
+  useEffect(() => {
+    if (isSelected && scrollRef.current) {
+      scrollRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    }
+  }, [isSelected])
+
+  if (previewMode) {
+    return (
+      <div
+        ref={revealRef}
+        className={isRevealed ? 'scroll-revealed' : ''}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={(el) => {
+        (scrollRef as React.MutableRefObject<HTMLDivElement | null>).current = el
+        ;(revealRef as React.MutableRefObject<HTMLDivElement | null>).current = el
+      }}
+      onClick={(e) => {
+        e.stopPropagation()
+        onSelect()
+      }}
+      className={`scroll-revealed relative cursor-pointer border-b border-border-subtle group transition-[opacity,transform] duration-500 ${
+        isRevealed ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+      } ${
+        isSelected
+          ? 'bg-green-glow2 outline outline-2 outline-green -outline-offset-2 rounded animate-select-pulse'
+          : 'hover:bg-green-glow2'
+      }`}
+      role="button"
+      aria-label={`${block.type} block${isSelected ? ', selected' : ''}`}
+      aria-selected={isSelected}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onSelect()
+        }
+      }}
+      style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
+    >
+      {/* Block type tag */}
+      <span
+        className={`absolute top-1.5 left-1.5 text-[9px] font-semibold uppercase tracking-wider text-green bg-green-glow px-1.5 py-0.5 rounded transition-opacity z-10 ${
+          isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+        }`}
+      >
+        {block.type}
+      </span>
+
+      {/* Action buttons */}
+      <div
+        className={`absolute top-1.5 right-1.5 flex gap-0.5 z-10 transition-opacity ${
+          isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+        }`}
+      >
+        {!isFirst && (
+          <button
+            onClick={(e) => { e.stopPropagation(); moveBlock(index, index - 1) }}
+            className="w-6 h-6 rounded bg-bg-2/80 border border-border-default backdrop-blur-sm flex items-center justify-center text-text-3 hover:text-text-0 hover:bg-bg-3 transition-colors"
+            title="Move up"
+            aria-label={`Move ${block.type} block up`}
+          >
+            <ChevronUp size={12} />
+          </button>
+        )}
+        {!isLast && (
+          <button
+            onClick={(e) => { e.stopPropagation(); moveBlock(index, index + 1) }}
+            className="w-6 h-6 rounded bg-bg-2/80 border border-border-default backdrop-blur-sm flex items-center justify-center text-text-3 hover:text-text-0 hover:bg-bg-3 transition-colors"
+            title="Move down"
+            aria-label={`Move ${block.type} block down`}
+          >
+            <ChevronDown size={12} />
+          </button>
+        )}
+        <button
+          onClick={(e) => { e.stopPropagation(); duplicateBlock(block.id) }}
+          className="w-6 h-6 rounded bg-bg-2/80 border border-border-default backdrop-blur-sm flex items-center justify-center text-text-3 hover:text-text-0 hover:bg-bg-3 transition-colors"
+          title="Duplicate"
+          aria-label={`Duplicate ${block.type} block`}
+        >
+          <Copy size={12} />
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            if (selectedBlockId === block.id) selectBlock(null)
+            removeBlock(block.id)
+            toast('Block removed', {
+              action: {
+                label: 'Undo',
+                onClick: () => {
+                  useConfigStore.getState().undo()
+                  toast('Block restored')
+                },
+              },
+              duration: 3000,
+            })
+          }}
+          className="w-6 h-6 rounded bg-bg-2/80 border border-border-default backdrop-blur-sm flex items-center justify-center text-text-3 hover:text-status-red hover:bg-status-red/10 transition-colors"
+          title="Delete"
+          aria-label={`Delete ${block.type} block`}
+        >
+          <Trash2 size={12} />
+        </button>
+      </div>
+
+      {children}
+    </div>
+  )
+}

package/src/blocks/banner/BannerBlock.tsx

@@ -0,0 +1,38 @@
+import { ArrowRight } from 'lucide-react'
+import type { BlockConfig } from '../types'
+
+export function BannerBlock({ block }: { block: BlockConfig }) {
+  const { variant, props } = block
+  const text = (props.text as string) || 'Announcement'
+  const linkText = props.linkText as string | undefined
+  const linkUrl = (props.linkUrl as string) || '#'
+
+  if (variant === 'bar') {
+    return (
+      <div className="px-6 py-3 @lg:px-9">
+        <div className="reveal-fade-up reveal-d1 flex items-center justify-between gap-4 px-5 py-3.5 rounded-lg border border-border-default bg-bg-2">
+          <span className="text-[13px] text-text-1">{text}</span>
+          {linkText && (
+            <a href={linkUrl} className="text-[13px] font-medium text-green hover:text-green-dim transition-colors flex items-center gap-1 shrink-0">
+              {linkText}
+              <ArrowRight size={13} />
+            </a>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // ribbon (default)
+  return (
+    <div className="reveal-fade-up reveal-d1 flex items-center justify-center gap-3 px-4 py-2.5 bg-green/10 border-b border-green/20">
+      <span className="text-[12.5px] text-text-0 font-medium">{text}</span>
+      {linkText && (
+        <a href={linkUrl} className="text-[12.5px] font-semibold text-green hover:text-green-dim transition-colors flex items-center gap-1">
+          {linkText}
+          <ArrowRight size={12} />
+        </a>
+      )}
+    </div>
+  )
+}

package/src/blocks/contact/ContactBlock.tsx

@@ -0,0 +1,63 @@
+import { toast } from 'sonner'
+import type { BlockConfig } from '../types'
+import { Send } from 'lucide-react'
+
+interface ContactProps {
+  title?: string
+  subtitle?: string
+}
+
+export function ContactBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as ContactProps
+
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="max-w-lg mx-auto">
+        <div className="reveal-fade-up reveal-d1 text-center mb-8">
+          <h2 className="text-2xl @md:text-3xl font-bold tracking-tight mb-2">
+            {props.title || 'Get in Touch'}
+          </h2>
+          {props.subtitle && (
+            <p className="text-text-2 text-sm">{props.subtitle}</p>
+          )}
+        </div>
+
+        <div className="reveal-fade-up reveal-d2 space-y-4">
+          <div className="grid grid-cols-1 @sm:grid-cols-2 gap-3">
+            <div>
+              <label className="block text-[11.5px] text-text-2 mb-1.5 font-medium">Name</label>
+              <input
+                type="text"
+                placeholder="Your name"
+                className="w-full px-3 py-2.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[13px] outline-none focus:border-green placeholder:text-text-3 transition-colors"
+              />
+            </div>
+            <div>
+              <label className="block text-[11.5px] text-text-2 mb-1.5 font-medium">Email</label>
+              <input
+                type="email"
+                placeholder="you@example.com"
+                className="w-full px-3 py-2.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[13px] outline-none focus:border-green placeholder:text-text-3 transition-colors"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-[11.5px] text-text-2 mb-1.5 font-medium">Message</label>
+            <textarea
+              rows={4}
+              placeholder="How can we help?"
+              className="w-full px-3 py-2.5 rounded-lg border border-border-default bg-bg-2 text-text-0 text-[13px] outline-none focus:border-green placeholder:text-text-3 resize-y transition-colors"
+            />
+          </div>
+          <button
+            onClick={() => toast("Message sent! We'll be in touch soon.")}
+            className="w-full py-3 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all hover:accent-glow-lg flex items-center justify-center gap-2"
+          >
+            <Send size={14} />
+            Send Message
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/blocks/content/ContentBlock.tsx

@@ -0,0 +1,38 @@
+import { renderMarkdown } from '@/lib/markdown'
+import type { BlockConfig } from '../types'
+
+export function ContentBlock({ block }: { block: BlockConfig }) {
+  const { variant, props } = block
+  const body = (props.body as string) || ''
+  const rendered = renderMarkdown(body)
+
+  if (variant === 'columns') {
+    // Split rendered nodes roughly in half
+    const mid = Math.ceil(rendered.length / 2)
+    return (
+      <div className="px-6 py-12 @lg:px-16 @lg:py-16">
+        <div className="reveal-fade-up reveal-d1 grid grid-cols-1 @lg:grid-cols-2 gap-8 @lg:gap-12">
+          <div>{rendered.slice(0, mid)}</div>
+          <div>{rendered.slice(mid)}</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'highlight') {
+    return (
+      <div className="px-6 py-12 @lg:px-16 @lg:py-16">
+        <div className="reveal-slide-right reveal-d1 border-l-2 border-green pl-6 @lg:pl-8 bg-green-glow2 rounded-r-lg py-6 px-4">
+          {rendered}
+        </div>
+      </div>
+    )
+  }
+
+  // prose (default)
+  return (
+    <div className="reveal-fade-up reveal-d1 px-6 py-12 @lg:px-16 @lg:py-16 max-w-3xl mx-auto">
+      {rendered}
+    </div>
+  )
+}

package/src/blocks/cta/CtaBlock.tsx

@@ -0,0 +1,67 @@
+import type { BlockConfig } from '../types'
+import { ArrowRight } from 'lucide-react'
+
+interface CtaProps {
+  headline: string
+  subheadline?: string
+  buttonText: string
+}
+
+function CtaSimple({ props }: { props: CtaProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20 text-center relative overflow-hidden">
+      {/* Background */}
+      <div className="absolute inset-0 bg-gradient-to-b from-green/6 via-green/3 to-transparent pointer-events-none" />
+
+      <div className="relative z-10">
+        <h2 className="reveal-fade-up reveal-d1 text-2xl @md:text-3xl font-bold tracking-tight mb-3">
+          {props.headline}
+        </h2>
+        {props.subheadline && (
+          <p className="reveal-fade-up reveal-d2 text-text-2 text-sm mb-6 max-w-md mx-auto">
+            {props.subheadline}
+          </p>
+        )}
+        <div className="reveal-fade-up reveal-d3">
+          <button className="px-8 py-3 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all hover:accent-glow-xl inline-flex items-center gap-2">
+            {props.buttonText}
+            <ArrowRight size={16} />
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function CtaSplit({ props }: { props: CtaProps }) {
+  return (
+    <section className="px-6 @md:px-10 py-12 @md:py-16">
+      <div className="reveal-scale reveal-d1 flex flex-col @lg:flex-row items-center justify-between gap-6 p-8 rounded-xl bg-bg-2 border border-border-default relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-green/5 to-transparent pointer-events-none" />
+        <div className="relative z-10">
+          <h2 className="text-xl @md:text-2xl font-bold tracking-tight mb-1">
+            {props.headline}
+          </h2>
+          {props.subheadline && (
+            <p className="text-text-2 text-sm">{props.subheadline}</p>
+          )}
+        </div>
+        <button className="relative z-10 px-6 py-3 rounded-lg bg-green text-black text-sm font-semibold hover:bg-green-dim transition-all shrink-0 flex items-center gap-2">
+          {props.buttonText}
+          <ArrowRight size={16} />
+        </button>
+      </div>
+    </section>
+  )
+}
+
+export function CtaBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as CtaProps
+
+  switch (block.variant) {
+    case 'split':
+      return <CtaSplit props={props} />
+    default:
+      return <CtaSimple props={props} />
+  }
+}

package/src/blocks/divider/DividerBlock.tsx

@@ -0,0 +1,30 @@
+import type { BlockConfig } from '../types'
+
+export function DividerBlock({ block }: { block: BlockConfig }) {
+  const { variant } = block
+  const height = Number(block.props.height) || 60
+  const width = (block.props.width as string) || 'full'
+
+  const widthClass = width === 'narrow' ? 'max-w-32' : width === 'centered' ? 'max-w-xs' : 'w-full'
+
+  if (variant === 'space') {
+    return <div style={{ height: `${height}px` }} />
+  }
+
+  if (variant === 'dots') {
+    return (
+      <div className="flex items-center justify-center gap-2 py-8" style={{ minHeight: `${height}px` }}>
+        {[0, 1, 2].map((i) => (
+          <span key={i} className="w-1.5 h-1.5 rounded-full bg-text-3" />
+        ))}
+      </div>
+    )
+  }
+
+  // line (default)
+  return (
+    <div className="flex items-center justify-center" style={{ minHeight: `${height}px` }}>
+      <div className={`${widthClass} mx-auto border-t border-border-default`} />
+    </div>
+  )
+}

package/src/blocks/faq/FaqBlock.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import type { BlockConfig } from '../types'
+
+interface FaqItem {
+  question: string
+  answer: string
+}
+
+interface FaqProps {
+  title?: string
+  subtitle?: string
+  items?: FaqItem[]
+}
+
+const defaultFaqs: FaqItem[] = [
+  { question: 'What is OpenPage?', answer: 'OpenPage is a visual website builder that uses structured JSON config as the source of truth. Both humans and AI agents can edit the same config to build beautiful websites.' },
+  { question: 'How does the JSON config work?', answer: 'Every website is represented as a JSON document with blocks, styles, and content. The visual editor reads and writes this JSON, and agents can make surgical edits via the API.' },
+  { question: 'Can I use my own components?', answer: 'Yes! OpenPage supports custom components. You can build your own blocks following our component schema and register them in the block registry.' },
+  { question: 'Is it free to use?', answer: 'OpenPage offers a free tier for personal projects with up to 5 blocks. Pro and Team plans unlock unlimited blocks, custom domains, and priority support.' },
+]
+
+function AccordionItem({ item, isOpen, onToggle }: { item: FaqItem; isOpen: boolean; onToggle: () => void }) {
+  return (
+    <div className="border-b border-border-subtle">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between py-4 text-left group"
+      >
+        <span className="text-[13.5px] font-medium text-text-0 group-hover:text-green transition-colors">
+          {item.question}
+        </span>
+        <ChevronDown
+          size={16}
+          className={`text-text-3 shrink-0 ml-4 transition-transform duration-200 ${
+            isOpen ? 'rotate-180 text-green' : ''
+          }`}
+        />
+      </button>
+      <div
+        className={`overflow-hidden transition-all duration-200 ${
+          isOpen ? 'max-h-[500px] pb-4' : 'max-h-0'
+        }`}
+      >
+        <p className="text-[12.5px] text-text-2 leading-relaxed pr-8">
+          {item.answer}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function FaqBlock({ block }: { block: BlockConfig }) {
+  const props = block.props as unknown as FaqProps
+  const items = props.items || defaultFaqs
+  const [openIndex, setOpenIndex] = useState<number | null>(0)
+
+  return (
+    <section className="px-6 @md:px-10 py-16 @md:py-20">
+      <div className="reveal-fade-up reveal-d1 text-center mb-10">
+        <h2 className="text-2xl @md:text-3xl font-bold tracking-tight mb-2">
+          {props.title || 'Frequently Asked Questions'}
+        </h2>
+        {props.subtitle && (
+          <p className="text-text-2 text-sm max-w-lg mx-auto">{props.subtitle}</p>
+        )}
+      </div>
+
+      <div className="max-w-2xl mx-auto">
+        {items.map((item, i) => (
+          <div key={i} className={`reveal-fade-up reveal-d${Math.min(i + 2, 8)}`}>
+            <AccordionItem
+              item={item}
+              isOpen={openIndex === i}
+              onToggle={() => setOpenIndex(openIndex === i ? null : i)}
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}