@frontlit/page-builder 0.1.0-alpha.1

package/dist/chunk-SSQWYMQR.js

@@ -0,0 +1,393 @@
+"use client";
+import { DataSlot, Embed, Marquee, MediaBlock, Grid, RichText, Footer, SupportForm, EmailForm, Banner, Pricing, Faq, Featured, Content, Hero, Header } from './chunk-7KIX4WAO.js';
+import { PageBuilderLinkProvider } from './chunk-7W6Q4WA7.js';
+import { cn } from './chunk-RBJBODQP.js';
+import React, { useRef, useId, useEffect } from 'react';
+import { Settings2, ArrowUp, ArrowDown, Plus, Trash2 } from 'lucide-react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import convert from 'color-convert';
+
+// src/registry.ts
+var blockRegistry = {
+  header: Header,
+  hero: Hero,
+  content: Content,
+  featured: Featured,
+  faq: Faq,
+  pricing: Pricing,
+  banner: Banner,
+  "email-form": EmailForm,
+  "support-form": SupportForm,
+  footer: Footer,
+  "rich-text": RichText,
+  grid: Grid,
+  media: MediaBlock,
+  marquee: Marquee,
+  embed: Embed,
+  "data-slot": DataSlot
+};
+var LAYOUT_BLOCK_NAMES = ["header", "footer"];
+var NON_ADDABLE_BLOCK_NAMES = [...LAYOUT_BLOCK_NAMES, "data-slot"];
+function registerBlock(widget) {
+  const name = widget.metadata.name.trim();
+  if (!name) {
+    throw new Error("A page-builder block must have a non-empty name.");
+  }
+  if (blockRegistry[name]) {
+    throw new Error(
+      `A page-builder block named "${name}" is already registered.`
+    );
+  }
+  if (NON_ADDABLE_BLOCK_NAMES.includes(name)) {
+    throw new Error(
+      `"${name}" is a reserved page-builder block name and cannot be registered by a host application.`
+    );
+  }
+  blockRegistry[name] = widget;
+}
+function getWidget(name) {
+  return blockRegistry[name];
+}
+function getAddableBlocks() {
+  return Object.values(blockRegistry).filter(
+    (widget) => !NON_ADDABLE_BLOCK_NAMES.includes(widget.metadata.name)
+  );
+}
+function ToolbarButton({
+  icon: Icon,
+  label,
+  onClick
+}) {
+  if (!onClick) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      className: "inline-flex h-7 w-7 items-center justify-center rounded bg-background text-foreground shadow-sm hover:bg-muted",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+function DeleteButton({ onDelete }) {
+  const [confirming, setConfirming] = React.useState(false);
+  React.useEffect(() => {
+    if (!confirming) return;
+    const timeout = setTimeout(() => setConfirming(false), 3e3);
+    return () => clearTimeout(timeout);
+  }, [confirming]);
+  if (!onDelete) return null;
+  if (confirming) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: "Confirm delete",
+        "aria-label": "Confirm delete",
+        className: "inline-flex h-7 items-center justify-center rounded bg-destructive px-2 text-xs font-medium text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        onMouseLeave: () => setConfirming(false),
+        onClick: (e) => {
+          e.stopPropagation();
+          setConfirming(false);
+          onDelete();
+        },
+        children: "Sure?"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: "Delete",
+      "aria-label": "Delete",
+      className: "inline-flex h-7 w-7 items-center justify-center rounded bg-background text-foreground shadow-sm hover:bg-muted",
+      onClick: (e) => {
+        e.stopPropagation();
+        setConfirming(true);
+      },
+      children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+function EditableBlock({
+  children,
+  editing,
+  containerRef,
+  selected,
+  highlighted,
+  label,
+  onSelect,
+  onMoveUp,
+  onMoveDown,
+  onDelete,
+  onAddBelow
+}) {
+  if (!editing) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "group/block relative outline outline-1 outline-transparent transition-colors hover:outline-primary/40",
+        selected && "outline-2 outline-primary",
+        highlighted && "outline-2 outline-primary/70"
+      ),
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 z-10 bg-primary/10 opacity-0 transition-opacity duration-500",
+              highlighted && "opacity-100"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center opacity-0 transition-opacity group-hover/block:opacity-100", children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-center gap-1 rounded-b-md border border-t-0 border-border bg-background px-1.5 py-1 shadow-sm", children: [
+          label && /* @__PURE__ */ jsx("span", { className: "px-1.5 text-xs font-medium text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              icon: Settings2,
+              label: "Edit settings",
+              onClick: onSelect
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              icon: ArrowUp,
+              label: "Move up",
+              onClick: onMoveUp
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              icon: ArrowDown,
+              label: "Move down",
+              onClick: onMoveDown
+            }
+          ),
+          /* @__PURE__ */ jsx(DeleteButton, { onDelete })
+        ] }) }),
+        children,
+        onAddBelow && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 -bottom-3 z-20 flex justify-center opacity-0 transition-opacity group-hover/block:opacity-100", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: "Add block below",
+            "aria-label": "Add block below",
+            className: "pointer-events-auto inline-flex h-6 w-6 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm hover:bg-primary hover:text-primary-foreground",
+            onClick: (e) => {
+              e.stopPropagation();
+              onAddBelow();
+            },
+            children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function formatHSL(hsl) {
+  return `${hsl[0]} ${hsl[1]}% ${hsl[2]}%`;
+}
+function cssColorFromHex(hex) {
+  if (!hex) return "";
+  try {
+    return `hsl(${formatHSL(convert.hex.hsl(hex.replace("#", "")))})`;
+  } catch {
+    return "";
+  }
+}
+function generateThemeStyles(theme, selector = ".pb-theme") {
+  const colors = theme?.theme?.colors;
+  if (!colors) {
+    return "";
+  }
+  const { light, dark } = colors;
+  if (!light || !dark) {
+    return "";
+  }
+  const block = (c) => `
+        --background: ${cssColorFromHex(c.background)};
+        --foreground: ${cssColorFromHex(c.foreground)};
+        --card: ${cssColorFromHex(c.card)};
+        --card-foreground: ${cssColorFromHex(c.cardForeground)};
+        --popover: ${cssColorFromHex(c.popover)};
+        --popover-foreground: ${cssColorFromHex(c.popoverForeground)};
+        --primary: ${cssColorFromHex(c.primary)};
+        --primary-foreground: ${cssColorFromHex(c.primaryForeground)};
+        --secondary: ${cssColorFromHex(c.secondary)};
+        --secondary-foreground: ${cssColorFromHex(c.secondaryForeground)};
+        --muted: ${cssColorFromHex(c.muted)};
+        --muted-foreground: ${cssColorFromHex(c.mutedForeground)};
+        --accent: ${cssColorFromHex(c.accent)};
+        --accent-foreground: ${cssColorFromHex(c.accentForeground)};
+        --destructive: ${cssColorFromHex(c.destructive)};
+        --border: ${cssColorFromHex(c.border)};
+        --input: ${cssColorFromHex(c.input)};
+        --ring: ${cssColorFromHex(c.ring)};
+        --chart-1: ${cssColorFromHex(c.chart1)};
+        --chart-2: ${cssColorFromHex(c.chart2)};
+        --chart-3: ${cssColorFromHex(c.chart3)};
+        --chart-4: ${cssColorFromHex(c.chart4)};
+        --chart-5: ${cssColorFromHex(c.chart5)};
+        --sidebar-background: ${cssColorFromHex(c.sidebar)};
+        --sidebar-foreground: ${cssColorFromHex(c.sidebarForeground)};
+        --sidebar-primary: ${cssColorFromHex(c.sidebarPrimary)};
+        --sidebar-primary-foreground: ${cssColorFromHex(c.sidebarPrimaryForeground)};
+        --sidebar-accent: ${cssColorFromHex(c.sidebarAccent)};
+        --sidebar-accent-foreground: ${cssColorFromHex(c.sidebarAccentForeground)};
+        --sidebar-border: ${cssColorFromHex(c.sidebarBorder)};
+        --sidebar-ring: ${cssColorFromHex(c.sidebarRing)};
+        --shadow-2xs: ${c.shadow2xs ?? ""};
+        --shadow-xs: ${c.shadowXs ?? ""};
+        --shadow-sm: ${c.shadowSm ?? ""};
+        --shadow-md: ${c.shadowMd ?? ""};
+        --shadow-lg: ${c.shadowLg ?? ""};
+        --shadow-xl: ${c.shadowXl ?? ""};
+        --shadow-2xl: ${c.shadow2xl ?? ""};
+    `;
+  return `
+        ${selector} {
+            ${block(light)}
+        }
+        ${selector}:is(.dark, .dark *) {
+            ${block(dark)}
+        }
+    `;
+}
+function PageRenderer({
+  layout,
+  theme,
+  pageData,
+  children,
+  dataSlots,
+  nextTheme = "light",
+  themeMode = "light",
+  onThemeModeChange,
+  editing = false,
+  selectedWidgetId,
+  highlightedWidgetId,
+  onSelectWidget,
+  onMoveWidgetUp,
+  onMoveWidgetDown,
+  onDeleteWidget,
+  onAddWidgetBelow,
+  injectThemeStyles = true,
+  linkComponent,
+  className
+}) {
+  const blockRefs = useRef(/* @__PURE__ */ new Map());
+  const themeScope = `pb-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const themeSelector = `[data-pb-theme="${themeScope}"]`;
+  useEffect(() => {
+    if (!highlightedWidgetId) return;
+    blockRefs.current.get(highlightedWidgetId)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [highlightedWidgetId, layout]);
+  const header = layout.find((widget) => widget.name === "header");
+  const footer = layout.find((widget) => widget.name === "footer");
+  const body = layout.filter(
+    (widget) => !LAYOUT_BLOCK_NAMES.includes(widget.name)
+  );
+  const resolvedPageData = {
+    pageType: "site",
+    ...pageData
+  };
+  function renderInstance(instance, options) {
+    const definition = getWidget(instance.name);
+    if (!definition) return null;
+    const Widget = definition.widget;
+    const settings = {
+      ...definition.getDefaultSettings?.(),
+      ...instance.settings
+    };
+    return /* @__PURE__ */ jsx(
+      EditableBlock,
+      {
+        editing,
+        containerRef: (node) => {
+          if (node) {
+            blockRefs.current.set(instance.widgetId, node);
+          } else {
+            blockRefs.current.delete(instance.widgetId);
+          }
+        },
+        selected: selectedWidgetId === instance.widgetId,
+        highlighted: highlightedWidgetId === instance.widgetId,
+        label: definition.metadata.displayName,
+        onSelect: () => onSelectWidget?.(instance.widgetId),
+        onMoveUp: options.allowUp ? () => onMoveWidgetUp?.(instance.widgetId) : void 0,
+        onMoveDown: options.allowDown ? () => onMoveWidgetDown?.(instance.widgetId) : void 0,
+        onDelete: !options.locked ? () => onDeleteWidget?.(instance.widgetId) : void 0,
+        onAddBelow: options.allowAddBelow && onAddWidgetBelow ? () => onAddWidgetBelow(instance.widgetId) : void 0,
+        children: /* @__PURE__ */ jsx(
+          Widget,
+          {
+            settings,
+            state: { theme },
+            pageData: resolvedPageData,
+            data: instance.name === "data-slot" ? dataSlots?.[String(settings.slot ?? "")] : void 0,
+            editing,
+            nextTheme,
+            themeMode,
+            setThemeMode: onThemeModeChange,
+            toggleTheme: onThemeModeChange ? () => onThemeModeChange(
+              nextTheme === "dark" ? "light" : "dark"
+            ) : void 0
+          }
+        )
+      },
+      instance.widgetId
+    );
+  }
+  return /* @__PURE__ */ jsx(PageBuilderLinkProvider, { component: linkComponent, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-pb-theme": themeScope,
+      className: cn(
+        "pb-theme flex min-h-full flex-col bg-background text-foreground",
+        nextTheme === "dark" && "dark",
+        className
+      ),
+      children: [
+        header && renderInstance(header, {
+          allowUp: false,
+          allowDown: false,
+          locked: true,
+          allowAddBelow: true
+        }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col", children: children !== void 0 && !body.some((instance) => instance.name === "data-slot") ? children : body.map(
+          (instance, index) => renderInstance(instance, {
+            allowUp: instance.moveable && index !== 0,
+            allowDown: instance.moveable && index !== body.length - 1,
+            locked: !instance.deletable,
+            allowAddBelow: true
+          })
+        ) }),
+        footer && renderInstance(footer, {
+          allowUp: false,
+          allowDown: false,
+          locked: true,
+          allowAddBelow: false
+        }),
+        injectThemeStyles && /* @__PURE__ */ jsx("style", { children: generateThemeStyles(theme, themeSelector) })
+      ]
+    }
+  ) });
+}
+
+export { EditableBlock, LAYOUT_BLOCK_NAMES, NON_ADDABLE_BLOCK_NAMES, PageRenderer, blockRegistry, generateThemeStyles, getAddableBlocks, getWidget, registerBlock };
+//# sourceMappingURL=chunk-SSQWYMQR.js.map
+//# sourceMappingURL=chunk-SSQWYMQR.js.map

package/dist/chunk-SSQWYMQR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/registry.ts","../src/renderer/editable-block.tsx","../src/renderer/generate-theme-styles.ts","../src/renderer/page-renderer.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-SSQWYMQR.js","sourcesContent":["import type { Widget } from \"./models\";\nimport {\n    Header,\n    Hero,\n    Content,\n    Featured,\n    Faq,\n    Pricing,\n    Banner,\n    EmailForm,\n    SupportForm,\n    Footer,\n    RichText,\n    Grid,\n    MediaBlock,\n    Marquee,\n    Embed,\n    DataSlot,\n} from \"./blocks\";\n\n/**\n * Every block available to the page builder, keyed by its\n * `metadata.name`. `header` and `footer` are singleton, layout-level\n * blocks placed outside the normal flow by the renderer.\n */\nexport const blockRegistry: Record<string, Widget<any>> = {\n    header: Header,\n    hero: Hero,\n    content: Content,\n    featured: Featured,\n    faq: Faq,\n    pricing: Pricing,\n    banner: Banner,\n    \"email-form\": EmailForm,\n    \"support-form\": SupportForm,\n    footer: Footer,\n    \"rich-text\": RichText,\n    grid: Grid,\n    media: MediaBlock,\n    marquee: Marquee,\n    embed: Embed,\n    \"data-slot\": DataSlot,\n};\n\nexport const LAYOUT_BLOCK_NAMES = [\"header\", \"footer\"];\nexport const NON_ADDABLE_BLOCK_NAMES = [...LAYOUT_BLOCK_NAMES, \"data-slot\"];\n\n/**\n * Adds a host application's block to the shared renderer and builder\n * registry. Register blocks while the application module initializes, before\n * rendering either `PageBuilder` or `PageRenderer`.\n *\n * Built-in names are intentionally protected: a persisted page must always\n * have one stable implementation for a block name. Give host blocks a\n * namespaced name such as `acme-event-list`.\n */\nexport function registerBlock(widget: Widget<any>): void {\n    const name = widget.metadata.name.trim();\n    if (!name) {\n        throw new Error(\"A page-builder block must have a non-empty name.\");\n    }\n    if (blockRegistry[name]) {\n        throw new Error(\n            `A page-builder block named \\\"${name}\\\" is already registered.`,\n        );\n    }\n    if (NON_ADDABLE_BLOCK_NAMES.includes(name)) {\n        throw new Error(\n            `\\\"${name}\\\" is a reserved page-builder block name and cannot be registered by a host application.`,\n        );\n    }\n    blockRegistry[name] = widget;\n}\n\nexport function getWidget(name: string): Widget<any> | undefined {\n    return blockRegistry[name];\n}\n\n/** Blocks a user can add to the body of a page. */\nexport function getAddableBlocks(): Widget<any>[] {\n    return Object.values(blockRegistry).filter(\n        (widget) => !NON_ADDABLE_BLOCK_NAMES.includes(widget.metadata.name),\n    );\n}\n","\"use client\";\n\nimport React from \"react\";\nimport { ArrowDown, ArrowUp, Plus, Settings2, Trash2 } from \"lucide-react\";\nimport { cn } from \"../primitives/lib/utils\";\n\nexport interface EditableBlockProps {\n    children: React.ReactNode;\n    editing: boolean;\n    /** Ref to the wrapper element so the canvas can scroll the block into view. */\n    containerRef?: React.Ref<HTMLDivElement>;\n    selected?: boolean;\n    /** Draws a temporary attention flash, e.g. right after the block was moved. */\n    highlighted?: boolean;\n    label?: string;\n    onSelect?: () => void;\n    onMoveUp?: () => void;\n    onMoveDown?: () => void;\n    onDelete?: () => void;\n    onAddBelow?: () => void;\n}\n\nfunction ToolbarButton({\n    icon: Icon,\n    label,\n    onClick,\n}: {\n    icon: React.ComponentType<{ className?: string }>;\n    label: string;\n    onClick?: () => void;\n}) {\n    if (!onClick) return null;\n    return (\n        <button\n            type=\"button\"\n            title={label}\n            aria-label={label}\n            className=\"inline-flex h-7 w-7 items-center justify-center rounded bg-background text-foreground shadow-sm hover:bg-muted\"\n            onClick={(e) => {\n                e.stopPropagation();\n                onClick();\n            }}\n        >\n            <Icon className=\"h-3.5 w-3.5\" />\n        </button>\n    );\n}\n\n/**\n * Two-click delete: first click arms the button (\"Sure?\"), second click\n * actually deletes. Disarms after a short delay or when the pointer leaves.\n */\nfunction DeleteButton({ onDelete }: { onDelete?: () => void }) {\n    const [confirming, setConfirming] = React.useState(false);\n\n    React.useEffect(() => {\n        if (!confirming) return;\n        const timeout = setTimeout(() => setConfirming(false), 3000);\n        return () => clearTimeout(timeout);\n    }, [confirming]);\n\n    if (!onDelete) return null;\n\n    if (confirming) {\n        return (\n            <button\n                type=\"button\"\n                title=\"Confirm delete\"\n                aria-label=\"Confirm delete\"\n                className=\"inline-flex h-7 items-center justify-center rounded bg-destructive px-2 text-xs font-medium text-destructive-foreground shadow-sm hover:bg-destructive/90\"\n                onMouseLeave={() => setConfirming(false)}\n                onClick={(e) => {\n                    e.stopPropagation();\n                    setConfirming(false);\n                    onDelete();\n                }}\n            >\n                Sure?\n            </button>\n        );\n    }\n\n    return (\n        <button\n            type=\"button\"\n            title=\"Delete\"\n            aria-label=\"Delete\"\n            className=\"inline-flex h-7 w-7 items-center justify-center rounded bg-background text-foreground shadow-sm hover:bg-muted\"\n            onClick={(e) => {\n                e.stopPropagation();\n                setConfirming(true);\n            }}\n        >\n            <Trash2 className=\"h-3.5 w-3.5\" />\n        </button>\n    );\n}\n\n/**\n * Wraps a rendered block with hover/selection affordances when the page\n * builder is in editing mode. In non-editing (plain display) mode it's a\n * transparent passthrough.\n */\nexport function EditableBlock({\n    children,\n    editing,\n    containerRef,\n    selected,\n    highlighted,\n    label,\n    onSelect,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onAddBelow,\n}: EditableBlockProps) {\n    if (!editing) {\n        return <>{children}</>;\n    }\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(\n                \"group/block relative outline outline-1 outline-transparent transition-colors hover:outline-primary/40\",\n                selected && \"outline-2 outline-primary\",\n                highlighted && \"outline-2 outline-primary/70\",\n            )}\n            onClick={onSelect}\n        >\n            <div\n                aria-hidden\n                className={cn(\n                    \"pointer-events-none absolute inset-0 z-10 bg-primary/10 opacity-0 transition-opacity duration-500\",\n                    highlighted && \"opacity-100\",\n                )}\n            />\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center opacity-0 transition-opacity group-hover/block:opacity-100\">\n                <div className=\"pointer-events-auto flex items-center gap-1 rounded-b-md border border-t-0 border-border bg-background px-1.5 py-1 shadow-sm\">\n                    {label && (\n                        <span className=\"px-1.5 text-xs font-medium text-muted-foreground\">\n                            {label}\n                        </span>\n                    )}\n                    <ToolbarButton\n                        icon={Settings2}\n                        label=\"Edit settings\"\n                        onClick={onSelect}\n                    />\n                    <ToolbarButton\n                        icon={ArrowUp}\n                        label=\"Move up\"\n                        onClick={onMoveUp}\n                    />\n                    <ToolbarButton\n                        icon={ArrowDown}\n                        label=\"Move down\"\n                        onClick={onMoveDown}\n                    />\n                    <DeleteButton onDelete={onDelete} />\n                </div>\n            </div>\n            {children}\n            {onAddBelow && (\n                <div className=\"pointer-events-none absolute inset-x-0 -bottom-3 z-20 flex justify-center opacity-0 transition-opacity group-hover/block:opacity-100\">\n                    <button\n                        type=\"button\"\n                        title=\"Add block below\"\n                        aria-label=\"Add block below\"\n                        className=\"pointer-events-auto inline-flex h-6 w-6 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm hover:bg-primary hover:text-primary-foreground\"\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            onAddBelow();\n                        }}\n                    >\n                        <Plus className=\"h-3.5 w-3.5\" />\n                    </button>\n                </div>\n            )}\n        </div>\n    );\n}\n","import convert, { HSL } from \"color-convert\";\nimport type { Theme } from \"../models\";\n\nfunction formatHSL(hsl: HSL): string {\n    return `${hsl[0]} ${hsl[1]}% ${hsl[2]}%`;\n}\n\nfunction cssColorFromHex(hex?: string): string {\n    if (!hex) return \"\";\n    try {\n        return `hsl(${formatHSL(convert.hex.hsl(hex.replace(\"#\", \"\")))})`;\n    } catch {\n        return \"\";\n    }\n}\n\n/**\n * Generates full CSS color values for the custom properties every primitive\n * reads. Full colors (rather than bare HSL channels) let the renderer coexist\n * with Tailwind v4 hosts whose semantic utilities use `var(--primary)` while\n * still accepting CourseLit-derived hex theme data.\n *\n * Callers rendering more than one theme in a document should pass a unique\n * selector so one renderer cannot overwrite another renderer's variables.\n */\nexport function generateThemeStyles(\n    theme: Theme,\n    selector = \".pb-theme\",\n): string {\n    const colors = theme?.theme?.colors;\n    if (!colors) {\n        return \"\";\n    }\n\n    const { light, dark } = colors;\n    if (!light || !dark) {\n        return \"\";\n    }\n\n    const block = (c: typeof light) => `\n        --background: ${cssColorFromHex(c.background)};\n        --foreground: ${cssColorFromHex(c.foreground)};\n        --card: ${cssColorFromHex(c.card)};\n        --card-foreground: ${cssColorFromHex(c.cardForeground)};\n        --popover: ${cssColorFromHex(c.popover)};\n        --popover-foreground: ${cssColorFromHex(c.popoverForeground)};\n        --primary: ${cssColorFromHex(c.primary)};\n        --primary-foreground: ${cssColorFromHex(c.primaryForeground)};\n        --secondary: ${cssColorFromHex(c.secondary)};\n        --secondary-foreground: ${cssColorFromHex(c.secondaryForeground)};\n        --muted: ${cssColorFromHex(c.muted)};\n        --muted-foreground: ${cssColorFromHex(c.mutedForeground)};\n        --accent: ${cssColorFromHex(c.accent)};\n        --accent-foreground: ${cssColorFromHex(c.accentForeground)};\n        --destructive: ${cssColorFromHex(c.destructive)};\n        --border: ${cssColorFromHex(c.border)};\n        --input: ${cssColorFromHex(c.input)};\n        --ring: ${cssColorFromHex(c.ring)};\n        --chart-1: ${cssColorFromHex(c.chart1)};\n        --chart-2: ${cssColorFromHex(c.chart2)};\n        --chart-3: ${cssColorFromHex(c.chart3)};\n        --chart-4: ${cssColorFromHex(c.chart4)};\n        --chart-5: ${cssColorFromHex(c.chart5)};\n        --sidebar-background: ${cssColorFromHex(c.sidebar)};\n        --sidebar-foreground: ${cssColorFromHex(c.sidebarForeground)};\n        --sidebar-primary: ${cssColorFromHex(c.sidebarPrimary)};\n        --sidebar-primary-foreground: ${cssColorFromHex(c.sidebarPrimaryForeground)};\n        --sidebar-accent: ${cssColorFromHex(c.sidebarAccent)};\n        --sidebar-accent-foreground: ${cssColorFromHex(c.sidebarAccentForeground)};\n        --sidebar-border: ${cssColorFromHex(c.sidebarBorder)};\n        --sidebar-ring: ${cssColorFromHex(c.sidebarRing)};\n        --shadow-2xs: ${c.shadow2xs ?? \"\"};\n        --shadow-xs: ${c.shadowXs ?? \"\"};\n        --shadow-sm: ${c.shadowSm ?? \"\"};\n        --shadow-md: ${c.shadowMd ?? \"\"};\n        --shadow-lg: ${c.shadowLg ?? \"\"};\n        --shadow-xl: ${c.shadowXl ?? \"\"};\n        --shadow-2xl: ${c.shadow2xl ?? \"\"};\n    `;\n\n    return `\n        ${selector} {\n            ${block(light)}\n        }\n        ${selector}:is(.dark, .dark *) {\n            ${block(dark)}\n        }\n    `;\n}\n","\"use client\";\n\nimport React, { useEffect, useId, useRef } from \"react\";\nimport type { PageData, Theme, WidgetInstance } from \"../models\";\nimport { getWidget, LAYOUT_BLOCK_NAMES } from \"../registry\";\nimport { EditableBlock } from \"./editable-block\";\nimport { generateThemeStyles } from \"./generate-theme-styles\";\nimport { cn } from \"../primitives/lib/utils\";\nimport {\n    PageBuilderLinkProvider,\n    type PageBuilderLinkComponent,\n} from \"../components/nav-link\";\n\nexport interface PageRendererProps {\n    layout: WidgetInstance[];\n    theme: Theme;\n    pageData?: PageData;\n    /** Optional content rendered between the shared header and footer. */\n    children?: React.ReactNode;\n    /** Host-resolved data keyed by a generic data-slot's configured name. */\n    dataSlots?: Record<string, React.ReactNode>;\n    /** Resolved palette currently painted (`system` is already applied). */\n    nextTheme?: \"light\" | \"dark\";\n    /** Visitor or preview preference, including follow-the-OS. */\n    themeMode?: \"light\" | \"dark\" | \"system\";\n    onThemeModeChange?: (mode: \"light\" | \"dark\" | \"system\") => void;\n    /** When true, renders hover controls (edit/move/delete/add) for use inside the builder canvas. */\n    editing?: boolean;\n    selectedWidgetId?: string;\n    /** Widget to briefly highlight, e.g. right after it was moved. */\n    highlightedWidgetId?: string;\n    onSelectWidget?: (widgetId: string) => void;\n    onMoveWidgetUp?: (widgetId: string) => void;\n    onMoveWidgetDown?: (widgetId: string) => void;\n    onDeleteWidget?: (widgetId: string) => void;\n    onAddWidgetBelow?: (widgetId: string) => void;\n    /** Injects the theme's generated CSS custom properties as a `<style>` tag. Disable if the host app renders it elsewhere. */\n    injectThemeStyles?: boolean;\n    /**\n     * Optional host link (e.g. Next.js `Link`) used for internal `/...` paths\n     * inside block widgets. Omit it to render native `<a>` tags — no\n     * framework dependency.\n     */\n    linkComponent?: PageBuilderLinkComponent;\n    className?: string;\n}\n\n/**\n * Renders a page's widget layout using the block registry. Used both for\n * plain (non-editable) display and, with `editing`, as the live canvas\n * inside the page builder.\n */\nexport function PageRenderer({\n    layout,\n    theme,\n    pageData,\n    children,\n    dataSlots,\n    nextTheme = \"light\",\n    themeMode = \"light\",\n    onThemeModeChange,\n    editing = false,\n    selectedWidgetId,\n    highlightedWidgetId,\n    onSelectWidget,\n    onMoveWidgetUp,\n    onMoveWidgetDown,\n    onDeleteWidget,\n    onAddWidgetBelow,\n    injectThemeStyles = true,\n    linkComponent,\n    className,\n}: PageRendererProps) {\n    // Refs to each block's wrapper, keyed by widget id. Refs (unlike DOM\n    // attribute lookups) stay correct even when SSR and client render\n    // different generated widget ids.\n    const blockRefs = useRef(new Map<string, HTMLDivElement>());\n    const themeScope = `pb-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n    const themeSelector = `[data-pb-theme=\"${themeScope}\"]`;\n\n    // Keep the highlighted (just-moved) block in view. Keyed on `layout` too\n    // so repeated move clicks on the same widget re-scroll as it travels.\n    useEffect(() => {\n        if (!highlightedWidgetId) return;\n        blockRefs.current\n            .get(highlightedWidgetId)\n            ?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n    }, [highlightedWidgetId, layout]);\n\n    const header = layout.find((widget) => widget.name === \"header\");\n    const footer = layout.find((widget) => widget.name === \"footer\");\n    const body = layout.filter(\n        (widget) => !LAYOUT_BLOCK_NAMES.includes(widget.name),\n    );\n\n    const resolvedPageData: PageData = {\n        pageType: \"site\",\n        ...pageData,\n    };\n\n    function renderInstance(\n        instance: WidgetInstance,\n        options: {\n            allowUp: boolean;\n            allowDown: boolean;\n            locked: boolean;\n            allowAddBelow: boolean;\n        },\n    ) {\n        const definition = getWidget(instance.name);\n        if (!definition) return null;\n\n        const Widget = definition.widget;\n        const settings = {\n            ...definition.getDefaultSettings?.(),\n            ...instance.settings,\n        };\n\n        return (\n            <EditableBlock\n                key={instance.widgetId}\n                editing={editing}\n                containerRef={(node) => {\n                    if (node) {\n                        blockRefs.current.set(instance.widgetId, node);\n                    } else {\n                        blockRefs.current.delete(instance.widgetId);\n                    }\n                }}\n                selected={selectedWidgetId === instance.widgetId}\n                highlighted={highlightedWidgetId === instance.widgetId}\n                label={definition.metadata.displayName}\n                onSelect={() => onSelectWidget?.(instance.widgetId)}\n                onMoveUp={\n                    options.allowUp\n                        ? () => onMoveWidgetUp?.(instance.widgetId)\n                        : undefined\n                }\n                onMoveDown={\n                    options.allowDown\n                        ? () => onMoveWidgetDown?.(instance.widgetId)\n                        : undefined\n                }\n                onDelete={\n                    !options.locked\n                        ? () => onDeleteWidget?.(instance.widgetId)\n                        : undefined\n                }\n                onAddBelow={\n                    options.allowAddBelow && onAddWidgetBelow\n                        ? () => onAddWidgetBelow(instance.widgetId)\n                        : undefined\n                }\n            >\n                <Widget\n                    settings={settings as any}\n                    state={{ theme }}\n                    pageData={resolvedPageData}\n                    data={\n                        instance.name === \"data-slot\"\n                            ? dataSlots?.[String(settings.slot ?? \"\")]\n                            : undefined\n                    }\n                    editing={editing}\n                    nextTheme={nextTheme}\n                    themeMode={themeMode}\n                    setThemeMode={onThemeModeChange}\n                    toggleTheme={\n                        onThemeModeChange\n                            ? () =>\n                                  onThemeModeChange(\n                                      nextTheme === \"dark\" ? \"light\" : \"dark\",\n                                  )\n                            : undefined\n                    }\n                />\n            </EditableBlock>\n        );\n    }\n\n    return (\n        <PageBuilderLinkProvider component={linkComponent}>\n            <div\n                data-pb-theme={themeScope}\n                className={cn(\n                    \"pb-theme flex min-h-full flex-col bg-background text-foreground\",\n                    nextTheme === \"dark\" && \"dark\",\n                    className,\n                )}\n            >\n                {header &&\n                    renderInstance(header, {\n                        allowUp: false,\n                        allowDown: false,\n                        locked: true,\n                        allowAddBelow: true,\n                    })}\n                <div className=\"flex flex-1 flex-col\">\n                    {children !== undefined &&\n                    !body.some((instance) => instance.name === \"data-slot\")\n                        ? children\n                        : body.map((instance, index) =>\n                              renderInstance(instance, {\n                                  allowUp: instance.moveable && index !== 0,\n                                  allowDown:\n                                      instance.moveable &&\n                                      index !== body.length - 1,\n                                  locked: !instance.deletable,\n                                  allowAddBelow: true,\n                              }),\n                          )}\n                </div>\n                {footer &&\n                    renderInstance(footer, {\n                        allowUp: false,\n                        allowDown: false,\n                        locked: true,\n                        allowAddBelow: false,\n                    })}\n                {injectThemeStyles && (\n                    <style>{generateThemeStyles(theme, themeSelector)}</style>\n                )}\n            </div>\n        </PageBuilderLinkProvider>\n    );\n}\n"]}

package/dist/color-mode-DIEEt9WP.d.ts

@@ -0,0 +1,3 @@
+type ResolvedColorMode = "light" | "dark";
+
+export type { ResolvedColorMode as R };

package/dist/components/index.d.ts

@@ -0,0 +1,36 @@
+import React__default from 'react';
+export { A as AspectRatio, I as Image, a as ImageObjectFit, V as VideoThumbnailProps, b as VideoWithPreview } from '../image-D7GlnOio.js';
+export { N as NavLink, P as PageBuilderLinkComponent, a as PageBuilderLinkProps, b as PageBuilderLinkProvider, u as usePageBuilderLinkComponent } from '../nav-link-BfxvQ1s6.js';
+import { T as ThemeStyle } from '../theme-style-39nxXQy0.js';
+import { B as ButtonProps } from '../button-C3VrMJkr.js';
+import { R as ResolvedColorMode } from '../color-mode-DIEEt9WP.js';
+export { TextRenderer, truncateTextEditorContent } from '@frontlit/text-editor';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface SandboxedEmbedProps {
+    content: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    id?: string;
+}
+declare const SandboxedEmbed: ({ content, className, style, id, }: SandboxedEmbedProps) => React__default.JSX.Element;
+
+/**
+ * Light / dark toggle. Public sites pass `theme` so the button uses
+ * page-builder primitives; the builder chrome omits it and matches the
+ * other icon buttons in the top bar.
+ *
+ * Preference starts as system (OS). The first click pins an explicit
+ * light or dark side; later clicks flip between those two.
+ */
+declare function ThemeModeSwitcher({ resolved, onToggle, theme, className, size, variant, }: {
+    resolved: ResolvedColorMode;
+    onToggle: () => void;
+    theme?: ThemeStyle;
+    className?: string;
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+}): React__default.JSX.Element;
+
+export { SandboxedEmbed, ThemeModeSwitcher };

package/dist/components/index.js

@@ -0,0 +1,5 @@
+"use client";
+export { Image, NavLink, PageBuilderLinkProvider, SandboxedEmbed, TextRenderer, ThemeModeSwitcher, VideoWithPreview, truncateTextEditorContent, usePageBuilderLinkComponent } from '../chunk-7W6Q4WA7.js';
+import '../chunk-RBJBODQP.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/data-slots.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { d as WidgetInstance, P as PageData } from './widget--uEOpdq3.js';
+import './section-background-BgOCp5l3.js';
+import './theme-style-39nxXQy0.js';
+
+/** Context supplied to a host application's data-slot loader. */
+interface DataSlotLoadRequest {
+    /** The slot identifier declared in `instance.settings.slot`. */
+    slot: string;
+    /** The full persisted block configuration. */
+    instance: WidgetInstance;
+    /** Page context supplied by the host renderer. */
+    pageData: PageData;
+}
+/** A host-owned resolver for one named data slot. */
+type DataSlotLoader = (request: DataSlotLoadRequest) => ReactNode | Promise<ReactNode>;
+type DataSlotLoaders = Readonly<Record<string, DataSlotLoader>>;
+/**
+ * Resolves generic data-slot blocks before passing their output to
+ * `PageRenderer`. The page-builder package deliberately does not fetch data
+ * or understand a host application's domain model.
+ */
+declare function loadDataSlots(layout: readonly WidgetInstance[], loaders: DataSlotLoaders, pageData: PageData): Promise<Record<string, ReactNode>>;
+
+export { type DataSlotLoadRequest, type DataSlotLoader, type DataSlotLoaders, loadDataSlots };

package/dist/data-slots.js

@@ -0,0 +1,3 @@
+export { loadDataSlots } from './chunk-GTY75HW2.js';
+//# sourceMappingURL=data-slots.js.map
+//# sourceMappingURL=data-slots.js.map

package/dist/data-slots.js.map

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