@siteable/core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Federico De Ponte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,4 @@
+OpenPage MIT attribution provenance
+
+This package is the engine subset of OpenPage, distributed under the MIT License
+— see LICENSE for the full text and copyright.

package/README.md

@@ -0,0 +1,82 @@
+# @siteable/core
+
+A visual website builder engine: 19 typed block components, a drag-edit canvas, theme
+presets, AI generation, and a one-click HTML export. JSON is the source of truth — every
+edit produces clean, diffable JSON that humans and AI agents can both read and write.
+
+## Install
+
+```bash
+npm install @siteable/core
+```
+
+## Peer Dependencies
+
+The host app supplies these — `@siteable/core` declares them as peerDependencies but does
+not bundle them. Install with caret ranges matching the package's own peer spec:
+
+```bash
+npm install 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
+```
+
+`react-router-dom` is **not** a peer — the engine is router-agnostic.
+
+## Tailwind v4 Setup
+
+Add `@source` and `@import` to your app's global CSS so Tailwind v4's scanner picks up the
+package's block component classes:
+
+```css
+/* app.css */
+@import "tailwindcss";
+
+@source "./node_modules/@siteable/core/src/**/*.{ts,tsx}";
+@import "@siteable/core/src/styles.css";
+```
+
+The package ships raw, unbuilt Tailwind v4 source (no precompiled CSS in `dist/`).
+
+## Usage
+
+```tsx
+import { EditorLayout } from '@siteable/core'
+
+function App() {
+  return <EditorLayout />
+}
+```
+
+`validateSiteConfig`, `generateSiteConfig`, `exportSiteToHTML`, `themePresets`, and the
+two zustand stores (`useConfigStore`, `useEditorStore`) are all available from the package
+entry.
+
+## Single-store invariant
+
+`useConfigStore` and `useEditorStore` are zustand module singletons. Always import through
+the package entry (`@siteable/core`) — never deep-import `@siteable/core/src/...` in an app
+that also imports the package's main entry. Two copies of the same store in one app silently
+produce divergent state.
+
+## Browser Support
+
+Modern evergreen browsers (last 2 Chrome / Firefox / Safari / Edge versions). No IE.
+
+## Contributing
+
+Issues and PRs welcome via [GitHub](https://github.com/Siteable/siteable-core/issues).
+
+## License
+
+MIT — see [LICENSE](./LICENSE) and [NOTICE](./NOTICE).
+
+---
+
+### Provenance
+
+This is the engine subset extracted from
+[OpenPage](https://github.com/buildingopen/openpage). The MIT body, attribution, and
+adopted-conventions headers carry over from that codebase; the package is maintained
+independently under the `@siteable` npm scope with `Siteable Contributors` as the copyright
+holder (see NOTICE for the full lineage statement).

package/dist/index.d.ts

@@ -0,0 +1,401 @@
+import { JSX } from 'react';
+import { PersistOptions } from 'zustand/middleware';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+import { StoreApi } from 'zustand';
+import { UseBoundStore } from 'zustand';
+
+export declare function AgentPanel(): JSX.Element;
+
+export declare function BannerBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare interface BlockConfig {
+    id: string;
+    type: BlockType;
+    variant: BlockVariant;
+    props: Record<string, unknown>;
+}
+
+export declare interface BlockMeta {
+    type: BlockType;
+    label: string;
+    description: string;
+    category: string;
+    variants: string[];
+    defaultProps: Record<string, unknown>;
+}
+
+export declare const blockMetadata: BlockMeta[];
+
+export declare type BlockType = 'navbar' | 'hero' | 'features' | 'pricing' | 'cta' | 'footer' | 'testimonials' | 'stats' | 'faq' | 'team' | 'contact' | 'newsletter' | 'logocloud' | 'divider' | 'banner' | 'content' | 'image' | 'video' | 'gallery';
+
+export declare type BlockVariant = string;
+
+export declare function BlockWrapper({ block, isSelected, onSelect, children }: Props): JSX.Element;
+
+export declare function buildTemplate(id: string, name: string): SiteConfig;
+
+export declare function Canvas(): JSX.Element;
+
+export declare function CanvasEmpty(): JSX.Element;
+
+export declare function CanvasToolbar({ activeProject, onExit }?: CanvasToolbarProps): JSX.Element;
+
+export declare interface CanvasToolbarProps {
+    activeProject?: {
+        name: string;
+        settings?: ExportSiteSettings;
+    };
+    onExit?: () => void;
+}
+
+export declare const categories: string[];
+
+declare 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;
+}
+
+export declare function ContactBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function ContentBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function CtaBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare const defaultConfig: SiteConfig;
+
+export declare const defaultTheme: ThemeConfig;
+
+export declare function DesignPanel(): JSX.Element;
+
+export declare function DividerBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function downloadHTML(html: string, filename: string): void;
+
+export declare function EditorLayout({ onConfigChange, onRename, onCreate, activeProject, onExit, onServerFallback }?: EditorLayoutProps): JSX.Element;
+
+export declare interface EditorLayoutProps {
+    onConfigChange?: (id: string, config: SiteConfig) => void;
+    onRename?: (id: string, name: string) => void;
+    onCreate?: (name: string) => string;
+    activeProject?: {
+        name: string;
+        settings?: ExportSiteSettings;
+    };
+    onExit?: () => void;
+    onServerFallback?: (prompt: string, signal?: AbortSignal) => Promise<SiteConfig>;
+}
+
+declare interface EditorState {
+    selectedBlockId: string | null;
+    viewport: Viewport;
+    jsonDrawerOpen: boolean;
+    historyOpen: boolean;
+    shortcutsModalOpen: boolean;
+    previewMode: boolean;
+    activeProjectId: string | null;
+    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 declare interface ExportSiteOptions {
+    settings?: ExportSiteSettings;
+}
+
+export declare interface ExportSiteSettings {
+    siteName?: string;
+    siteDescription?: string;
+    faviconUrl?: string;
+    language?: string;
+    seoTitle?: string;
+    seoDescription?: string;
+    ogImageUrl?: string;
+    gaId?: string;
+    posthogKey?: string;
+}
+
+export declare function exportSiteToHTML(config: SiteConfig, options?: ExportSiteOptions): string;
+
+export declare function exportToHTML(config: SiteConfig, options?: ExportSiteOptions): Promise<string>;
+
+export declare function FaqBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function FeaturesBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function FooterBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function GalleryBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+/**
+ * Gemini API Key FieldGroup — BYOK (bring-your-own-key) input with show/hide and a
+ * live validation button that pings the Google Gemini REST API.
+ *
+ * Extracted from src/routes/Settings.tsx ApiPanel (Gemini FieldGroup only).
+ * - Local state for show/hide + testing in-flight flag.
+ * - Persists the key in localStorage under `openpage-gemini-key`; cleared when empty.
+ * - Validates by GET https://generativelanguage.googleapis.com/v1beta/models?key=...
+ * - `toast` (sonner) is the only external dependency preserved from the inline source.
+ */
+export declare function GeminiKeyInputField(): JSX.Element;
+
+export declare function generateSiteConfig(prompt: string, signal?: AbortSignal, onServerFallback?: (prompt: string, signal?: AbortSignal) => Promise<SiteConfig>): Promise<GenerationResult>;
+
+export declare const GENERATION_PROMPT = "You are a website configuration generator for OpenPage, a visual website builder.\n\nGiven a user's description, generate a complete JSON site configuration.\n\n## Output Schema\n\nReturn a JSON object matching this exact schema:\n\n{\n  \"name\": \"Site Name\",\n  \"theme\": {\n    \"bg0\": \"#hex\", \"bg1\": \"#hex\", \"bg2\": \"#hex\", \"bg3\": \"#hex\", \"bg4\": \"#hex\", \"bg5\": \"#hex\",\n    \"text0\": \"#hex\", \"text1\": \"#hex\", \"text2\": \"#hex\", \"text3\": \"#hex\",\n    \"accent\": \"#hex\", \"accentDim\": \"#hex\",\n    \"borderDefault\": \"#hex\", \"borderSubtle\": \"#hex\", \"borderHover\": \"#hex\",\n    \"fontSans\": \"Font Name\", \"fontDisplay\": \"Font Name\", \"fontMono\": \"Font Name\",\n    \"radius\": 8, \"radiusLg\": 12\n  },\n  \"pages\": [\n    { \"id\": \"page-home\", \"name\": \"Home\", \"path\": \"/\", \"blocks\": [...] },\n    { \"id\": \"page-about\", \"name\": \"About\", \"path\": \"/about\", \"blocks\": [...] }\n  ],\n  \"blocks\": []\n}\n\nEach page has its own blocks array. Generate at least 2 pages: Home and one additional page (About, Pricing, or Features depending on the site type). The top-level \"blocks\" array should be empty (blocks live inside pages).\n\n## Available Block Types\n\n1. navbar (variants: default, centered) - Props: { logo, links[], ctaText }\n2. hero (variants: centered, split, gradient, minimal) - Props: { badge?, headline, subheadline, primaryCta, secondaryCta? }\n3. features (variants: grid, list, alternating) - Props: { label?, title, subtitle?, items: [{ icon?, title, description }] }\n4. pricing (variants: simple, comparison) - Props: { title, subtitle?, tiers?: [{ name, price, period?, description?, features[], cta, featured? }] }\n5. cta (variants: simple, split) - Props: { headline, subheadline?, buttonText }\n6. footer (variants: simple, multi-column, minimal) - Props: { logo, copyright, links[] }\n7. testimonials (variants: cards, carousel, spotlight) - Props: { title?, items?: [{ name, role?, quote, rating? }] }\n8. stats (variants: grid, bar, counter) - Props: { title?, items?: [{ value, label }] }\n9. faq (variants: accordion) - Props: { title?, items?: [{ question, answer }] }\n10. team (variants: grid) - Props: { title?, subtitle?, members?: [{ name, role }] }\n11. contact (variants: form) - Props: { title?, subtitle? }\n12. newsletter (variants: simple) - Props: { title?, subtitle?, buttonText? }\n13. logocloud (variants: default) - Props: { title? }\n14. content (variants: prose, columns, highlight) - Props: { body } (markdown: **bold**, *italic*, ## headers, - lists)\n15. image (variants: hero-image, side-by-side, grid) - Props: { src?, alt?, title?, subtitle?, images?: [{ src, alt }], imageSide? }\n16. video (variants: youtube, vimeo) - Props: { url, title? }\n17. gallery (variants: grid, masonry) - Props: { title?, images?: [{ src?, alt?, caption? }] }\n18. divider (variants: line, space, dots) - Props: { height?, width? }\n19. banner (variants: ribbon, bar) - Props: { text, linkText?, linkUrl? }\n\nIcons: Blocks, Code, Bot, Zap, Shield, Globe, Layers, Palette, Rocket, Star, Lock, Settings\nFonts: DM Sans, Inter, Space Grotesk, Poppins, Manrope, Outfit, Plus Jakarta Sans, Sora, Nunito Sans, Work Sans, Rubik, Raleway\n\n## Rules\n\n1. ALWAYS generate at least 2 pages. The Home page MUST include: navbar, hero, at least 2 content sections, a CTA, and a footer\n2. Generate 6-10 blocks per page\n3. Write specific, realistic copy matching the user's description\n4. Pick a theme that fits the vibe (dark for tech, warm for food, clean for agencies)\n5. Use unique block IDs (format: block-type-1, block-hero-1, etc.)\n6. Do NOT use placeholder text like \"Lorem ipsum\"\n7. Make copy compelling and specific to the described business\n8. Each page needs a unique id (page-home, page-about, etc.), a name, and a path (/, /about, etc.)\n\nReturn ONLY valid JSON. No markdown, no code fences, no explanation.";
+
+export declare function GenerationOverlay(): JSX.Element | null;
+
+export declare interface GenerationResult {
+    config: SiteConfig;
+    source: 'ai' | 'template';
+}
+
+export declare function getTemplateForPrompt(prompt: string): SiteConfig;
+
+export declare const googleFontOptions: string[];
+
+export declare function HeroBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function hexToRgb(hex: string): string;
+
+export declare function ImageBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function JsonDrawer(): JSX.Element;
+
+export declare function LayersPanel(): JSX.Element;
+
+export declare function LeftSidebar(): JSX.Element;
+
+export declare function LogoCloudBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function NavbarBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function NewsletterBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare interface PageConfig {
+    id: string;
+    name: string;
+    path: string;
+    blocks: BlockConfig[];
+}
+
+export declare function previewHTML(html: string): void;
+
+export declare function PricingBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function PropertiesPanel({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+declare interface Props {
+    block: BlockConfig;
+    isSelected: boolean;
+    onSelect: () => void;
+    children: ReactNode;
+}
+
+export declare function RenderBlock({ block }: {
+    block: BlockConfig;
+}): ReactNode;
+
+/**
+ * Simple markdown-to-React renderer. No dangerouslySetInnerHTML, no XSS surface.
+ * Supports: ## headers, **bold**, *italic*, - lists, line breaks.
+ */
+export declare function renderMarkdown(text: string): ReactNode[];
+
+export declare function resolveTheme(partial?: Partial<ThemeConfig>): ThemeConfig;
+
+export declare function RightSidebar(): JSX.Element;
+
+export declare function ShortcutsModal(): JSX.Element | null;
+
+export declare interface SiteConfig {
+    name: string;
+    pages?: PageConfig[];
+    blocks: BlockConfig[];
+    theme?: Partial<ThemeConfig>;
+}
+
+export declare function StatsBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare function TeamBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare const templateMeta: readonly [{
+    readonly id: "portfolio";
+    readonly name: "Portfolio";
+    readonly description: "Showcase your work and skills";
+    readonly accent: "#06b6d4";
+    readonly blockCount: 7;
+    readonly templateIndex: 0;
+    readonly icon: "Briefcase";
+}, {
+    readonly id: "restaurant";
+    readonly name: "Restaurant";
+    readonly description: "Menu, reservations, and ambiance";
+    readonly accent: "#e8a838";
+    readonly blockCount: 7;
+    readonly templateIndex: 1;
+    readonly icon: "UtensilsCrossed";
+}, {
+    readonly id: "agency";
+    readonly name: "Agency";
+    readonly description: "Services, case studies, and team";
+    readonly accent: "#228be6";
+    readonly blockCount: 8;
+    readonly templateIndex: 2;
+    readonly icon: "Building2";
+}, {
+    readonly id: "blog";
+    readonly name: "Blog";
+    readonly description: "Articles, topics, and subscribers";
+    readonly accent: "#4f46e5";
+    readonly blockCount: 7;
+    readonly templateIndex: 3;
+    readonly icon: "BookOpen";
+}];
+
+export declare function TestimonialsBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare interface ThemeConfig {
+    bg0: string;
+    bg1: string;
+    bg2: string;
+    bg3: string;
+    bg4: string;
+    bg5: string;
+    text0: string;
+    text1: string;
+    text2: string;
+    text3: string;
+    accent: string;
+    accentDim: string;
+    borderDefault: string;
+    borderSubtle: string;
+    borderHover: string;
+    fontSans: string;
+    fontDisplay: string;
+    fontMono: string;
+    radius: number;
+    radiusLg: number;
+}
+
+export declare interface ThemePreset {
+    id: string;
+    name: string;
+    theme: ThemeConfig;
+}
+
+export declare const themePresets: ThemePreset[];
+
+export declare function themeToCSS(theme: ThemeConfig): Record<string, string>;
+
+declare interface UndoEntry {
+    pages?: PageConfig[];
+    blocks: BlockConfig[];
+    theme?: Partial<ThemeConfig>;
+    label: string;
+    timestamp: number;
+}
+
+export declare const useConfigStore: UseBoundStore<Omit<StoreApi<ConfigState>, "setState" | "persist"> & {
+setState(partial: ConfigState | Partial<ConfigState> | ((state: ConfigState) => ConfigState | Partial<ConfigState>), replace?: false | undefined): unknown;
+setState(state: ConfigState | ((state: ConfigState) => ConfigState), replace: true): unknown;
+persist: {
+setOptions: (options: Partial<PersistOptions<ConfigState, Record<string, unknown>, unknown>>) => void;
+clearStorage: () => void;
+rehydrate: () => Promise<void> | void;
+hasHydrated: () => boolean;
+onHydrate: (fn: (state: ConfigState) => void) => () => void;
+onFinishHydration: (fn: (state: ConfigState) => void) => () => void;
+getOptions: () => Partial<PersistOptions<ConfigState, Record<string, unknown>, unknown>>;
+};
+}>;
+
+export declare const useEditorStore: UseBoundStore<StoreApi<EditorState>>;
+
+export declare function useGoogleFonts(fonts: string[]): void;
+
+export declare function useScrollReveal(disabled?: boolean): {
+    ref: RefObject<HTMLDivElement | null>;
+    isRevealed: boolean;
+};
+
+export declare function validateSiteConfig(raw: unknown, prompt?: string): SiteConfig;
+
+export declare function VersionHistory(): JSX.Element;
+
+export declare function VideoBlock({ block }: {
+    block: BlockConfig;
+}): JSX.Element;
+
+export declare type Viewport = 'desktop' | 'tablet' | 'mobile';
+
+export { }