@frontlit/page-builder 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/{theme-style-39nxXQy0.d.ts → theme-style-Cbl7NM-T.d.ts}

@@ -35,6 +35,24 @@ interface DisabledStyle {
     opacity?: "opacity-50" | "opacity-75" | "opacity-100";
     cursor?: Cursor;
 }
+interface MenuItemStyle {
+    padding?: Padding;
+    border?: Border;
+    custom?: CustomStyle;
+}
+interface MenuStyle {
+    padding?: Padding;
+    border?: Border;
+    shadow?: Shadow;
+    custom?: CustomStyle;
+    item?: MenuItemStyle;
+}
+interface SurfaceStyle {
+    padding?: Padding;
+    border?: Border;
+    shadow?: Shadow;
+    custom?: CustomStyle;
+}
 interface Colors {
     background: string;
     foreground: string;
@@ -103,6 +121,10 @@ interface ThemeStyle {
             custom?: CustomStyle;
             disabled?: DisabledStyle;
         };
+        menu?: MenuStyle;
+        dialog?: SurfaceStyle;
+        popover?: SurfaceStyle;
+        tooltip?: SurfaceStyle;
         link: {
             padding?: Padding;
             border?: Border;
@@ -138,4 +160,4 @@ interface ThemeStyle {
     };
 }
 
-export type { Border as B, Colors as C, DisabledStyle as D, Padding as P, Shadow as S, ThemeStyle as T, CustomStyle as a, Typography as b };
+export type { Border as B, Colors as C, DisabledStyle as D, MenuItemStyle as M, Padding as P, Shadow as S, ThemeStyle as T, CustomStyle as a, MenuStyle as b, SurfaceStyle as c, Typography as d };

package/dist/theme.css

@@ -14,208 +14,191 @@
  * generate-theme-styles.ts). Scoped so it doesn't leak into a consuming
  * app's own chrome outside the page-builder-rendered subtree. */
 .pb-theme {
-    --background: hsl(0 0% 100%);
-    --foreground: hsl(222.2 84% 4.9%);
-    --card: hsl(0 0% 100%);
-    --card-foreground: hsl(222.2 84% 4.9%);
-    --popover: hsl(0 0% 100%);
-    --popover-foreground: hsl(222.2 84% 4.9%);
-    --primary: hsl(222.2 47.4% 11.2%);
-    --primary-foreground: hsl(210 40% 98%);
-    --secondary: hsl(210 40% 96.1%);
-    --secondary-foreground: hsl(222.2 47.4% 11.2%);
-    --muted: hsl(210 40% 96.1%);
-    --muted-foreground: hsl(215.4 16.3% 46.9%);
-    --accent: hsl(210 40% 96.1%);
-    --accent-foreground: hsl(222.2 47.4% 11.2%);
-    --destructive: hsl(0 84.2% 60.2%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --border: hsl(214.3 31.8% 91.4%);
-    --input: hsl(214.3 31.8% 91.4%);
-    --ring: hsl(222.2 84% 4.9%);
-    --chart-1: hsl(12 76% 61%);
-    --chart-2: hsl(173 58% 39%);
-    --chart-3: hsl(197 37% 24%);
-    --chart-4: hsl(43 74% 66%);
-    --chart-5: hsl(27 87% 67%);
-    --radius: 0.5rem;
-    --sidebar-background: hsl(0 0% 98%);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
-    --sidebar-primary: hsl(240 5.9% 10%);
-    --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: hsl(240 4.8% 95.9%);
-    --sidebar-accent-foreground: hsl(240 5.9% 10%);
-    --sidebar-border: hsl(220 13% 91%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222.2 84% 4.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+  --primary: hsl(222.2 47.4% 11.2%);
+  --primary-foreground: hsl(210 40% 98%);
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+  --accent: hsl(210 40% 96.1%);
+  --accent-foreground: hsl(222.2 47.4% 11.2%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --border: hsl(214.3 31.8% 91.4%);
+  --input: hsl(214.3 31.8% 91.4%);
+  --ring: hsl(222.2 84% 4.9%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --radius: 0.5rem;
+  --sidebar-background: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 .pb-theme:is(.dark, .dark *) {
-    --background: hsl(222.2 84% 4.9%);
-    --foreground: hsl(210 40% 98%);
-    --card: hsl(222.2 84% 4.9%);
-    --card-foreground: hsl(210 40% 98%);
-    --popover: hsl(222.2 84% 4.9%);
-    --popover-foreground: hsl(210 40% 98%);
-    --primary: hsl(210 40% 98%);
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
-    --secondary: hsl(217.2 32.6% 17.5%);
-    --secondary-foreground: hsl(210 40% 98%);
-    --muted: hsl(217.2 32.6% 17.5%);
-    --muted-foreground: hsl(215 20.2% 65.1%);
-    --accent: hsl(217.2 32.6% 17.5%);
-    --accent-foreground: hsl(210 40% 98%);
-    --destructive: hsl(0 62.8% 30.6%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --border: hsl(217.2 32.6% 17.5%);
-    --input: hsl(217.2 32.6% 17.5%);
-    --ring: hsl(212.7 26.8% 83.9%);
-    --chart-1: hsl(220 70% 50%);
-    --chart-2: hsl(160 60% 45%);
-    --chart-3: hsl(30 80% 55%);
-    --chart-4: hsl(280 65% 60%);
-    --chart-5: hsl(340 75% 55%);
-    --sidebar-background: hsl(240 5.9% 10%);
-    --sidebar-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-primary: hsl(224.3 76.3% 48%);
-    --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(240 3.7% 15.9%);
-    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: hsl(240 3.7% 15.9%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --background: hsl(222.2 84% 4.9%);
+  --foreground: hsl(210 40% 98%);
+  --card: hsl(222.2 84% 4.9%);
+  --card-foreground: hsl(210 40% 98%);
+  --popover: hsl(222.2 84% 4.9%);
+  --popover-foreground: hsl(210 40% 98%);
+  --primary: hsl(210 40% 98%);
+  --primary-foreground: hsl(222.2 47.4% 11.2%);
+  --secondary: hsl(217.2 32.6% 17.5%);
+  --secondary-foreground: hsl(210 40% 98%);
+  --muted: hsl(217.2 32.6% 17.5%);
+  --muted-foreground: hsl(215 20.2% 65.1%);
+  --accent: hsl(217.2 32.6% 17.5%);
+  --accent-foreground: hsl(210 40% 98%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --border: hsl(217.2 32.6% 17.5%);
+  --input: hsl(217.2 32.6% 17.5%);
+  --ring: hsl(212.7 26.8% 83.9%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 /* Semantic token mapping. Runtime theme variables contain complete CSS
  * colors, which works consistently in both the public app and the dashboard. */
 @theme inline {
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar-background);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 
-    --radius-lg: var(--radius);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-sm: calc(var(--radius) - 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 
-    --shadow: var(--shadow);
-    --shadow-2xs: var(--shadow-2xs);
-    --shadow-xs: var(--shadow-xs);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
+  --shadow: var(--shadow);
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 
-    --font-open-sans:
-        var(--font-open-sans, "Open Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-montserrat:
-        var(--font-montserrat, Montserrat), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-lato:
-        var(--font-lato, Lato), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-poppins:
-        var(--font-poppins, Poppins), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-source-sans-3:
-        var(--font-source-sans-3, "Source Sans 3"), ui-sans-serif, system-ui,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-raleway:
-        var(--font-raleway, Raleway), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-noto-sans:
-        var(--font-noto-sans, "Noto Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-merriweather:
-        var(--font-merriweather, Merriweather), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-inter:
-        var(--font-inter, Inter), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-alegreya:
-        var(--font-alegreya, Alegreya), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-roboto:
-        var(--font-roboto, Roboto), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-mulish:
-        var(--font-mulish, Mulish), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-nunito:
-        var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-rubik:
-        var(--font-rubik, Rubik), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-playfair-display:
-        var(--font-playfair-display, "Playfair Display"), ui-serif, Georgia,
-        Cambria, "Times New Roman", Times, serif;
-    --font-oswald:
-        var(--font-oswald, Oswald), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-pt-sans:
-        var(--font-pt-sans, "PT Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-work-sans:
-        var(--font-work-sans, "Work Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-roboto-slab:
-        var(--font-roboto-slab, "Roboto Slab"), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-source-serif-4:
-        var(--font-source-serif-4, "Source Serif 4"), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-bebas-neue:
-        var(--font-bebas-neue, "Bebas Neue"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-quicksand:
-        var(--font-quicksand, Quicksand), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
+  --font-open-sans:
+    var(--font-open-sans, "Open Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-montserrat:
+    var(--font-montserrat, Montserrat), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-lato:
+    var(--font-lato, Lato), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-poppins:
+    var(--font-poppins, Poppins), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-source-sans-3:
+    var(--font-source-sans-3, "Source Sans 3"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-raleway:
+    var(--font-raleway, Raleway), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-noto-sans:
+    var(--font-noto-sans, "Noto Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-merriweather:
+    var(--font-merriweather, Merriweather), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-inter:
+    var(--font-inter, Inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-alegreya:
+    var(--font-alegreya, Alegreya), ui-serif, Georgia, Cambria, "Times New Roman",
+    Times, serif;
+  --font-roboto:
+    var(--font-roboto, Roboto), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mulish:
+    var(--font-mulish, Mulish), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-nunito:
+    var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-rubik:
+    var(--font-rubik, Rubik), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-playfair-display:
+    var(--font-playfair-display, "Playfair Display"), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-oswald:
+    var(--font-oswald, Oswald), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-pt-sans:
+    var(--font-pt-sans, "PT Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-work-sans:
+    var(--font-work-sans, "Work Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-roboto-slab:
+    var(--font-roboto-slab, "Roboto Slab"), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-source-serif-4:
+    var(--font-source-serif-4, "Source Serif 4"), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-bebas-neue:
+    var(--font-bebas-neue, "Bebas Neue"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-quicksand:
+    var(--font-quicksand, Quicksand), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 /* Safelist for classes the theme system composes at runtime.

package/dist/{widget--uEOpdq3.d.ts → widget-B_RoG6se.d.ts}

@@ -1,18 +1,17 @@
 import { ComponentType, ReactNode } from 'react';
-import { S as SectionBackground, T as Theme } from './section-background-BgOCp5l3.js';
-import { T as ThemeStyle } from './theme-style-39nxXQy0.js';
+import { S as SectionBackground, T as Theme } from './section-background-MsdE40Rk.js';
+import { T as ThemeStyle } from './theme-style-Cbl7NM-T.js';
 
 /**
  * The kind of page a widget/block can be placed on. Kept intentionally
  * generic (unlike CourseLit's LMS-specific page types) since FrontLit pages
  * can be a marketing site, a blog post, a changelog entry, etc.
  */
-type PageType = "site" | "blog" | "landing" | "post" | "custom";
 interface WidgetMetadata {
     name: string;
     displayName: string;
     description?: string;
-    compatibleWith: PageType[];
+    compatibleWith?: string[];
     icon?: string;
 }
 /**
@@ -51,7 +50,7 @@ interface WidgetDefaultSettings {
     layout?: string;
 }
 interface PageData extends Record<string, unknown> {
-    pageType: PageType;
+    pageType?: string;
     /** Tenant branding supplied by the host application. Layout blocks use
      * this on published sites, while the builder can continue to use its
      * own local block settings. */
@@ -93,6 +92,11 @@ interface Widget<T extends WidgetDefaultSettings = WidgetDefaultSettings> {
     metadata: WidgetMetadata;
     widget: ComponentType<WidgetProps<T>>;
     editor?: ComponentType<WidgetEditorProps<T>>;
+    /**
+     * Block-specific design controls rendered on the panel's Design tab
+     * alongside layouts and common section styling.
+     */
+    designEditor?: ComponentType<WidgetEditorProps<T>>;
     getDefaultSettings?: () => Partial<T>;
     /**
      * Alternate layouts this block can render its data in, selectable from
@@ -102,4 +106,4 @@ interface Widget<T extends WidgetDefaultSettings = WidgetDefaultSettings> {
     layouts?: BlockLayout[];
 }
 
-export type { BlockLayout as B, PageData as P, Widget as W, PageType as a, WidgetDefaultSettings as b, WidgetEditorProps as c, WidgetInstance as d, WidgetMetadata as e, WidgetProps as f };
+export type { BlockLayout as B, PageData as P, Widget as W, WidgetDefaultSettings as a, WidgetEditorProps as b, WidgetInstance as c, WidgetMetadata as d, WidgetProps as e };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontlit/page-builder",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Block-based WYSIWYG page builder and renderer for React",
   "author": "FrontLit",
   "license": "MIT",
@@ -105,22 +105,39 @@
     "landing-page",
     "frontlit"
   ],
+  "scripts": {
+    "build": "tsup && node scripts/add-use-client.mjs && tailwindcss -i src/styles.css -o dist/styles.css && cp src/theme.css dist/theme.css && rm -rf dist/fonts && cp -a fonts dist/fonts && node scripts/rewrite-font-urls.mjs",
+    "prepublishOnly": "pnpm run build",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "check-types": "tsc --noEmit"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@frontlit/media-uploader": "0.1.0-alpha.0",
+    "@frontlit/text-editor": "0.1.0-alpha.1",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-radio-group": "^1.4.7",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "color-convert": "^3.1.0",
     "lucide-react": "^0.553.0",
     "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0",
-    "@frontlit/text-editor": "0.1.0-alpha.1"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@types/color-convert": "^2.0.4",
@@ -132,11 +149,5 @@
     "tailwindcss": "^4.1.0",
     "tsup": "^8.3.0",
     "typescript": "^5.6.2"
-  },
-  "scripts": {
-    "build": "tsup && node scripts/add-use-client.mjs && tailwindcss -i src/styles.css -o dist/styles.css && cp src/theme.css dist/theme.css && rm -rf dist/fonts && cp -a fonts dist/fonts && node scripts/rewrite-font-urls.mjs",
-    "dev": "tsup --watch",
-    "clean": "rimraf dist",
-    "check-types": "tsc --noEmit"
   }
-}
+}