@frontlit/page-builder 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FrontLit
+
+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/README.md

@@ -0,0 +1,97 @@
+# @frontlit/page-builder
+
+Block-based page builder and renderer for React. Self-contained — no backend and no framework lock-in. Themes, blocks, and the WYSIWYG builder all run client-side.
+
+Rich text editing and rendering live in [`@frontlit/text-editor`](https://www.npmjs.com/package/@frontlit/text-editor), which this package depends on and installs automatically.
+
+## Installation
+
+```sh
+npm i @frontlit/page-builder
+# or
+pnpm add @frontlit/page-builder
+```
+
+Peer dependencies: `react` and `react-dom` (^18 or ^19). Next.js is **not** required. Tailwind is **not** required — import the compiled stylesheet:
+
+```ts
+import "@frontlit/page-builder/styles.css";
+```
+
+That file includes the utilities, default tokens, the theme-picker fonts (Inter, Playfair, and the rest), and the TipTap prose styles from `@frontlit/text-editor`. Hosts that already inject those faces via `next/font` keep working: `--font-inter` on the document still wins.
+
+If the host already runs Tailwind CSS v4, you can skip `styles.css` and scan the packages instead. Import the prose sheet so rich-text lists and code blocks survive Tailwind preflight:
+
+```css
+@import "@frontlit/page-builder/theme.css";
+@import "@frontlit/text-editor/prose.css";
+@source "./node_modules/@frontlit/page-builder";
+@source "./node_modules/@frontlit/text-editor";
+```
+
+## Usage
+
+```tsx
+import {
+    PageRenderer,
+    PageBuilder,
+    createDefaultLayout,
+    getDefaultTheme,
+} from "@frontlit/page-builder";
+import "@frontlit/page-builder/styles.css";
+
+
+// Read-only rendering (a published page, a marketing site, a preview):
+<PageRenderer
+    layout={createDefaultLayout()}
+    theme={getDefaultTheme()}
+    pageData={{ pageType: "landing" }}
+/>;
+
+// The interactive editor — persist however you like:
+<PageBuilder
+    onChange={({ layout, theme }) => {
+        /* save */
+    }}
+/>;
+```
+
+Both `PageRenderer` and `PageBuilder` are client components (this package ships with a `"use client"` directive on UI entries).
+
+### Optional: client-side routing
+
+Internal `/...` links render as native `<a>` tags by default, so the package works in Vite, Remix, Astro, or any other React host. Next.js (or any other router) can inject its own link:
+
+```tsx
+import Link from "next/link";
+import { PageRenderer, type PageBuilderLinkProps } from "@frontlit/page-builder";
+
+function AppLink(props: PageBuilderLinkProps) {
+    return <Link {...props} />;
+}
+
+<PageRenderer layout={layout} theme={theme} linkComponent={AppLink} />;
+```
+
+`PageBuilder` accepts the same `linkComponent` prop and forwards it to the live preview.
+
+## What's inside
+
+| Subpath                             | What it exports                                                                                                             |
+| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `@frontlit/page-builder`            | Everything below, re-exported from one place                                                                                |
+| `@frontlit/page-builder/models`     | `Theme`, `WidgetInstance`, `Widget<T>`, `Page`, `Media`, etc. (re-exports `TextEditorContent` from `@frontlit/text-editor`) |
+| `@frontlit/page-builder/primitives` | Themed UI atoms (`Button`, `Header1-4`, `Section`, `PageCard`, ...) + built-in themes                                       |
+| `@frontlit/page-builder/components` | Shared presentational bits: `Image`, `NavLink`, `VideoWithPreview` (re-exports `TextRenderer` from `@frontlit/text-editor`) |
+| `@frontlit/page-builder/blocks`     | The block library: Header, Hero, Content, Featured, Faq, Pricing, Banner, EmailForm, Footer, …                              |
+| `@frontlit/page-builder/renderer`   | `PageRenderer` — renders a page's `WidgetInstance[]` layout, with an `editing` mode for use inside the builder              |
+| `@frontlit/page-builder/builder`    | `PageBuilder` — the full WYSIWYG editor (add/remove/reorder blocks, edit settings, switch themes)                           |
+| `@frontlit/page-builder/data-slots` | Server-safe helper for hosts to resolve named data slots before rendering                                                   |
+
+`createDefaultLayout()` / `getDefaultTheme()` (exported from the root) build a ready-to-render starter landing page.
+
+`header` and `footer` are required layout-level blocks. The builder repairs legacy or empty initial layouts by adding them, keeps them at the outer edges, and never permits moving or deleting them.
+
+## License
+
+MIT

package/dist/alignment-dZDzN96G.d.ts

@@ -0,0 +1,5 @@
+type HorizontalAlignment = "center" | "left" | "right";
+type VerticalAlignment = "top" | "bottom";
+type Alignment = HorizontalAlignment | VerticalAlignment;
+
+export type { Alignment as A, HorizontalAlignment as H, VerticalAlignment as V };

package/dist/blocks/index.d.ts

@@ -0,0 +1,255 @@
+import { b as WidgetDefaultSettings, W as Widget } from '../widget--uEOpdq3.js';
+import { M as Media } from '../media-Njv378j7.js';
+import { A as Alignment, H as HorizontalAlignment } from '../alignment-dZDzN96G.js';
+import { TextEditorContent } from '@frontlit/text-editor';
+import { A as AspectRatio, a as ImageObjectFit } from '../image-D7GlnOio.js';
+import 'react';
+import '../section-background-BgOCp5l3.js';
+import '../theme-style-39nxXQy0.js';
+
+interface HeaderNavLink {
+    id: string;
+    label: string;
+    href: string;
+    isButton?: boolean;
+}
+interface HeaderSettings extends WidgetDefaultSettings {
+    logoText?: string;
+    logoImage?: string;
+    links?: HeaderNavLink[];
+    ctaLabel?: string;
+    ctaHref?: string;
+    linkAlignment?: "left" | "center" | "right";
+    layout?: "fixed" | "floating" | "centered";
+    backdropBlur?: boolean;
+    showThemeSwitcher?: boolean;
+}
+
+declare const Header: Widget<HeaderSettings>;
+
+interface HeroSettings extends WidgetDefaultSettings {
+    /** Small label rendered above the title, e.g. a section eyebrow like "Careers". */
+    preTitle?: string;
+    title?: string;
+    description?: TextEditorContent;
+    buttonCaption?: string;
+    buttonAction?: string;
+    secondaryButtonCaption?: string;
+    secondaryButtonAction?: string;
+    media?: Media;
+    youtubeLink?: string;
+    alignment?: Alignment | "right";
+    contentAlignment?: Alignment;
+    mediaRadius?: number;
+    layout?: "normal" | "card" | "centered" | "media-below";
+}
+
+declare const Hero: Widget<HeroSettings>;
+
+interface ContentSettings extends WidgetDefaultSettings {
+    title?: string;
+    body?: TextEditorContent;
+    media?: Media;
+    alignment?: "left" | "right";
+    headerAlignment?: Alignment;
+    mediaRadius?: number;
+    layout?: "side" | "stacked" | "overlay";
+}
+
+declare const Content: Widget<ContentSettings>;
+
+interface FeatureItem {
+    title: string;
+    description?: string;
+    /** Name of a lucide-react icon, e.g. "Globe" or "Mail". */
+    icon?: string;
+}
+interface FeaturedSettings extends WidgetDefaultSettings {
+    title?: string;
+    description?: TextEditorContent;
+    headerAlignment?: Alignment;
+    items?: FeatureItem[];
+    layout?: "grid" | "list" | "compact" | "numbered";
+}
+
+declare const Featured: Widget<FeaturedSettings>;
+
+interface FaqItem {
+    id: string;
+    question: string;
+    answer: string;
+}
+interface FaqSettings extends WidgetDefaultSettings {
+    title?: string;
+    headerAlignment?: Alignment;
+    items?: FaqItem[];
+    layout?: "list" | "cards" | "columns";
+}
+
+declare const Faq: Widget<FaqSettings>;
+
+interface PricingTier {
+    name: string;
+    /** Plain display string, e.g. "$29/mo". No currency/period logic. */
+    price: string;
+    description?: string;
+    features: string[];
+    buttonCaption?: string;
+    buttonAction?: string;
+    highlighted?: boolean;
+}
+interface PricingSettings extends WidgetDefaultSettings {
+    title?: string;
+    description?: TextEditorContent;
+    headerAlignment?: Alignment;
+    tiers?: PricingTier[];
+    layout?: "grid" | "stacked" | "highlight";
+}
+
+declare const Pricing: Widget<PricingSettings>;
+
+interface BannerSettings extends WidgetDefaultSettings {
+    title?: string;
+    description?: TextEditorContent;
+    buttonCaption?: string;
+    buttonAction?: string;
+    secondaryButtonCaption?: string;
+    secondaryButtonAction?: string;
+    contentAlignment?: Alignment;
+    layout?: "stacked" | "split" | "boxed";
+}
+
+declare const Banner: Widget<BannerSettings>;
+
+interface EmailFormSettings extends WidgetDefaultSettings {
+    title?: string;
+    description?: TextEditorContent;
+    buttonCaption?: string;
+    successMessage?: string;
+    alignment?: Alignment;
+    layout?: "stacked" | "split" | "inline";
+}
+
+declare const EmailForm: Widget<EmailFormSettings>;
+
+interface SupportFormSettings extends WidgetDefaultSettings {
+    title?: string;
+    description?: TextEditorContent;
+    buttonCaption?: string;
+    successMessage?: string;
+    alignment?: Alignment;
+}
+
+declare const SupportForm: Widget<SupportFormSettings>;
+
+interface FooterLink {
+    id: string;
+    label: string;
+    href: string;
+}
+interface FooterColumn {
+    id: string;
+    title: string;
+    links: FooterLink[];
+}
+interface FooterSettings extends WidgetDefaultSettings {
+    logoText?: string;
+    tagline?: string;
+    columns?: FooterColumn[];
+    copyrightText?: string;
+    layout?: "columns" | "centered" | "minimal";
+}
+
+declare const Footer: Widget<FooterSettings>;
+
+interface RichTextSettings extends WidgetDefaultSettings {
+    text?: TextEditorContent;
+    alignment?: HorizontalAlignment;
+}
+
+declare const RichText: Widget<RichTextSettings>;
+
+interface GridItem {
+    title: string;
+    description?: string;
+    /** Name of a lucide-react icon; ignored when `media` is set. */
+    icon?: string;
+    media?: Media;
+    /**
+     * Whether the image renders above or below the title/description, or
+     * as a full-bleed background with the title overlaid on top of it
+     * (a "photo card" pattern — team/role/portfolio grids).
+     */
+    mediaAlignment?: "top" | "bottom" | "overlay";
+    buttonCaption?: string;
+    /** Card destination. In the "overlay" layout the whole card becomes a link when this is set, even without a caption. */
+    buttonAction?: string;
+}
+interface GridSettings extends WidgetDefaultSettings {
+    title?: string;
+    description?: TextEditorContent;
+    headerAlignment?: Alignment;
+    buttonCaption?: string;
+    buttonAction?: string;
+    items?: GridItem[];
+    columns?: 2 | 3;
+}
+
+declare const Grid: Widget<GridSettings>;
+
+interface MediaSettings extends WidgetDefaultSettings {
+    media?: Media;
+    youtubeLink?: string;
+    mediaRadius?: number;
+    aspectRatio?: AspectRatio;
+    objectFit?: ImageObjectFit;
+    hasBorder?: boolean;
+    playVideoInModal?: boolean;
+}
+
+declare const MediaBlock: Widget<MediaSettings>;
+
+interface MarqueeItem {
+    id: string;
+    text?: string;
+    href?: string;
+    /** Name of a lucide-react icon, e.g. "Globe" — overrides `text` when set. */
+    icon?: string;
+}
+interface MarqueeSettings extends WidgetDefaultSettings {
+    items?: MarqueeItem[];
+    direction?: "left" | "right";
+    /** Scroll speed in pixels per second. */
+    speed?: number;
+    pauseOnHover?: boolean;
+    /** Width in px of the edge fade-out effect; 0 disables it. */
+    fadeWidth?: number;
+    itemBackgroundColor?: string;
+    itemForegroundColor?: string;
+    itemBorderColor?: string;
+    itemBorderRadius?: number;
+    itemBorderWidth?: number;
+    itemBorderStyle?: "solid" | "dashed" | "dotted" | "double" | "none";
+}
+
+declare const Marquee: Widget<MarqueeSettings>;
+
+interface EmbedSettings extends WidgetDefaultSettings {
+    contentType?: "url" | "script";
+    content?: string;
+    /** Colon-separated, matching common video-embed aspect ratio labels. */
+    aspectRatio?: "16:9" | "4:3" | "1:1" | "default";
+    /** Fixed height in px, used only when `aspectRatio` is "default". */
+    height?: number;
+}
+
+declare const Embed: Widget<EmbedSettings>;
+
+interface DataSlotSettings extends WidgetDefaultSettings {
+    /** Name matched against the host application's data-slot loaders. */
+    slot: string;
+}
+
+declare const DataSlot: Widget<DataSlotSettings>;
+
+export { Banner, type BannerSettings, Content, type ContentSettings, DataSlot, type DataSlotSettings, EmailForm, type EmailFormSettings, Embed, type EmbedSettings, Faq, type FaqItem, type FaqSettings, type FeatureItem, Featured, type FeaturedSettings, Footer, type FooterColumn, type FooterLink, type FooterSettings, Grid, type GridItem, type GridSettings, Header, type HeaderNavLink, type HeaderSettings, Hero, type HeroSettings, Marquee, type MarqueeItem, type MarqueeSettings, MediaBlock, type MediaSettings, Pricing, type PricingSettings, type PricingTier, RichText, type RichTextSettings, SupportForm, type SupportFormSettings };

package/dist/blocks/index.js

@@ -0,0 +1,6 @@
+"use client";
+export { Banner, Content, DataSlot, EmailForm, Embed, Faq, Featured, Footer, Grid, Header, Hero, Marquee, MediaBlock, Pricing, RichText, SupportForm } from '../chunk-7KIX4WAO.js';
+import '../chunk-7W6Q4WA7.js';
+import '../chunk-RBJBODQP.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/blocks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/builder/index.d.ts

@@ -0,0 +1,240 @@
+import React__default from 'react';
+import { T as Theme, S as SectionBackground } from '../section-background-BgOCp5l3.js';
+import { d as WidgetInstance, P as PageData, W as Widget } from '../widget--uEOpdq3.js';
+import { a as PageSeo } from '../page-DfVl_aHX.js';
+import { P as PageBuilderLinkComponent } from '../nav-link-BfxvQ1s6.js';
+import { LucideIcon } from 'lucide-react';
+import { R as ResolvedColorMode } from '../color-mode-DIEEt9WP.js';
+import { T as ThemeStyle } from '../theme-style-39nxXQy0.js';
+import '../media-Njv378j7.js';
+
+interface PageBuilderState {
+    layout: WidgetInstance[];
+    theme: Theme;
+    seo: PageSeo;
+    /** The user's own themes, created/edited from the theme panel. */
+    customThemes: Theme[];
+}
+interface PageBuilderProps {
+    initialLayout?: WidgetInstance[];
+    initialTheme?: Theme;
+    initialSeo?: PageSeo;
+    /**
+     * Themes offered in the theme panel, categorized like CourseLit's
+     * backend sends them: read-only `system` themes and the user's own
+     * `custom` themes. Defaults to the built-in presets and no custom
+     * themes. Editing a system theme copies it into the custom collection,
+     * which flows back to the host via `onChange`.
+     */
+    themes?: {
+        system?: Theme[];
+        custom?: Theme[];
+    };
+    pageData?: PageData;
+    onChange?: (state: PageBuilderState) => void;
+    /** Whether the editor may alter team-wide theme data. */
+    allowThemeEditing?: boolean;
+    /**
+     * Optional host link (e.g. Next.js `Link`) forwarded to the live
+     * preview's `PageRenderer`. Omit it to render native `<a>` tags.
+     */
+    linkComponent?: PageBuilderLinkComponent;
+    className?: string;
+}
+/**
+ * A self-contained, client-side WYSIWYG page builder: pick a theme, add/
+ * remove/reorder blocks, and edit each block's settings from the side
+ * panel. Holds all state in memory (via `onChange`, the host app decides
+ * whether/how to persist it) — there is no backend dependency.
+ */
+declare function PageBuilder({ initialLayout, initialTheme, initialSeo, themes: providedThemes, pageData, onChange, allowThemeEditing, linkComponent, className, }: PageBuilderProps): React__default.JSX.Element;
+
+declare function SettingsPanel({ title, onClose, children, eyebrow, description, icon, }: {
+    title: string;
+    onClose: () => void;
+    children: React__default.ReactNode;
+    eyebrow?: string;
+    description?: string;
+    icon?: LucideIcon;
+}): React__default.JSX.Element;
+
+declare function BlockPicker({ blocks, onPick, onClose, }: {
+    blocks: Widget<any>[];
+    onPick: (name: string) => void;
+    onClose: () => void;
+}): React__default.JSX.Element;
+
+type PreviewDevice = "mobile" | "tablet" | "desktop";
+declare function BuilderTopBar({ resolvedMode, onModeChange, device, onDeviceChange, onOpenTheme, onOpenSeo, onAddBlock, allowThemeEditing, }: {
+    resolvedMode: ResolvedColorMode;
+    onModeChange: (mode: ResolvedColorMode) => void;
+    device: PreviewDevice;
+    onDeviceChange: (device: PreviewDevice) => void;
+    onOpenTheme: () => void;
+    onOpenSeo: () => void;
+    onAddBlock: () => void;
+    allowThemeEditing?: boolean;
+}): React__default.JSX.Element;
+
+/**
+ * Label row for a page-builder design control. Ported from CourseLit's
+ * PageBuilderPropertyHeader; the tooltip is rendered via the native `title`
+ * attribute so no tooltip dependency is needed.
+ */
+declare function PageBuilderPropertyHeader({ label, tooltip, }: {
+    label: string;
+    tooltip?: string;
+}): React__default.JSX.Element;
+
+/**
+ * Slider with a paired numeric input, ported from CourseLit's
+ * PageBuilderSlider. Uses a native range input instead of Radix Slider so it
+ * adds no dependencies.
+ */
+declare function PageBuilderSlider({ title, min, max, value, onChange, tooltip, className, allowsReset, unit, }: {
+    title: string;
+    min: number;
+    max: number;
+    value: number;
+    onChange: (value?: number) => void;
+    tooltip?: string;
+    className?: string;
+    allowsReset?: boolean;
+    unit?: string;
+}): React__default.JSX.Element;
+
+/**
+ * Color picker ported from CourseLit's ColorSelector. Uses a native
+ * `<input type="color">` swatch paired with a hex text input — no
+ * dependencies on a color-picker library.
+ */
+declare function ColorSelector({ title, value, onChange, tooltip, className, allowReset, description, }: {
+    title: string;
+    value: string;
+    onChange: (value?: string) => void;
+    tooltip?: string;
+    className?: string;
+    allowReset?: boolean;
+    description?: string;
+}): React__default.JSX.Element;
+
+type PageWidth = ThemeStyle["structure"]["page"]["width"];
+declare function getMaxWidthTWClass(value: number): PageWidth;
+interface MaxWidthSelectorProps {
+    value?: PageWidth;
+    onChange: (width?: PageWidth) => void;
+    className?: string;
+    /**
+     * The value actually applied when `value` is unset — the active
+     * theme's own page width. Without this the slider could display a
+     * width that doesn't match what's really rendered.
+     */
+    themeDefault?: PageWidth;
+}
+declare function MaxWidthSelector({ value, onChange, className, themeDefault, }: MaxWidthSelectorProps): React__default.JSX.Element;
+
+type VerticalPadding = ThemeStyle["structure"]["section"]["padding"]["y"];
+declare function getVerticalPaddingTWClass(value: number): VerticalPadding;
+interface VerticalPaddingSelectorProps {
+    value?: VerticalPadding;
+    onChange: (padding?: VerticalPadding) => void;
+    className?: string;
+    /**
+     * The value actually applied when `value` is unset — the active
+     * theme's own section padding. Without this the slider would default
+     * to displaying 0 regardless of the real (usually much larger) padding
+     * in effect, misleading the user into thinking nothing is applied.
+     */
+    themeDefault?: VerticalPadding;
+}
+declare function VerticalPaddingSelector({ value, onChange, className, themeDefault, }: VerticalPaddingSelectorProps): React__default.JSX.Element;
+
+interface ContentPaddingProps {
+    value: number;
+    onChange: (padding?: number) => void;
+    className?: string;
+    min?: number;
+    max?: number;
+    variant?: "vertical" | "horizontal";
+}
+declare function ContentPaddingSelector({ value, onChange, className, variant, min, max, }: ContentPaddingProps): React__default.JSX.Element;
+
+interface SectionBackgroundPanelProps {
+    value?: SectionBackground;
+    onChange: (value: SectionBackground) => void;
+    className?: string;
+}
+/**
+ * Section background editor for the Design tab. Segmented type switcher,
+ * live preview, and card-grouped controls that write into the same
+ * `SectionBackground` model as before.
+ */
+declare function SectionBackgroundPanel({ value, onChange, className, }: SectionBackgroundPanelProps): React__default.JSX.Element;
+
+type PatternPresetCategory = "tile" | "glow";
+interface PatternPreset {
+    id: string;
+    label: string;
+    /** Grouping for the preset filter chips in the background panel. */
+    category: PatternPresetCategory;
+    /** Short blurb for tooltips / a11y. */
+    description?: string;
+    /**
+     * Fields merged into the background's "gradient" (pattern) settings.
+     * Light-mode pattern first; dark variants use lower-opacity white
+     * strokes so the same tile reads on dark section colors.
+     */
+    apply: Pick<SectionBackground, "backgroundImage" | "backgroundImageDark" | "gradientBackgroundSize" | "gradientBackgroundPosition" | "gradientBackgroundRepeat" | "gradientMaskImage">;
+}
+/**
+ * Ready-made background patterns for the "Pattern" tab of the section
+ * background panel — a preset picker over the same free-CSS
+ * `backgroundImage` / size / repeat fields, so choosing one is a single
+ * click instead of hand-writing an SVG data URI. Tiled patterns include
+ * dark-mode twins; mesh/glow presets use full-bleed CSS gradients.
+ *
+ * Tune any field afterwards under Advanced, or bring your own CSS.
+ */
+declare const PATTERN_PRESETS: PatternPreset[];
+
+interface ThemeEditorProps {
+    /** Theme currently painted on the canvas (applied, or a local preview). */
+    theme: Theme;
+    /** Id of the theme actually applied to the site. */
+    appliedThemeId: string;
+    /** Built-in themes; read-only, editing one creates a custom copy. */
+    systemThemes: Theme[];
+    /** The user's own themes; edited in place. */
+    customThemes: Theme[];
+    colorMode: "light" | "dark";
+    onColorModeChange: (mode: "light" | "dark") => void;
+    /** Paint a theme on the canvas without applying it. */
+    onPreview: (theme: Theme) => void;
+    /** Apply a theme to the page. */
+    onApply: (theme: Theme) => void;
+    /** Persist a change to the custom themes collection. */
+    onCustomThemesChange: (themes: Theme[]) => void;
+}
+/**
+ * Visual theme editor ported from CourseLit's page-editor theme editor.
+ * Themes are listed in two groups — system and custom. Clicking a card
+ * previews it on the canvas without applying it. Each card also offers
+ * "use" (check) and "edit" (pencil). Editing a system theme first copies
+ * it into the custom collection ("X - Copy"), so system themes stay
+ * pristine; custom themes are edited in place. The host app persists both
+ * the applied theme and the custom collection via the builder's `onChange`.
+ */
+declare function ThemeEditor({ theme, appliedThemeId, systemThemes, customThemes, colorMode, onColorModeChange, onPreview, onApply, onCustomThemesChange, }: ThemeEditorProps): React__default.JSX.Element;
+
+/**
+ * Page-level SEO settings panel. Like the block and theme editors, changes
+ * apply live — the host app persists them via the builder's `onChange`.
+ * Adapted from CourseLit's SeoEditor, minus the media library (images are
+ * referenced by URL, matching the rest of this package).
+ */
+declare function SeoEditor({ seo, onChange, }: {
+    seo: PageSeo;
+    onChange: (seo: PageSeo) => void;
+}): React__default.JSX.Element;
+
+export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, type PageBuilderProps, PageBuilderSlider, type PageBuilderState, type PatternPreset, type PatternPresetCategory, type PreviewDevice, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, type ThemeEditorProps, VerticalPaddingSelector, getMaxWidthTWClass, getVerticalPaddingTWClass };

package/dist/builder/index.js

@@ -0,0 +1,8 @@
+"use client";
+export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, PageBuilderSlider, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, VerticalPaddingSelector, getMaxWidthTWClass, getVerticalPaddingTWClass } from '../chunk-MO76KZY2.js';
+import '../chunk-SSQWYMQR.js';
+import '../chunk-7KIX4WAO.js';
+import '../chunk-7W6Q4WA7.js';
+import '../chunk-RBJBODQP.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/builder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/button-C3VrMJkr.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import React__default from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { T as ThemeStyle } from './theme-style-39nxXQy0.js';
+
+declare const buttonVariants: (props?: {
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    size?: "default" | "icon" | "sm" | "lg";
+} & class_variance_authority_types.ClassProp) => string;
+interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+interface ButtonProps extends ButtonProps$1 {
+    theme?: ThemeStyle;
+}
+declare const Button: React__default.FC<ButtonProps>;
+
+export { type ButtonProps as B, Button as a };