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

package/dist/server/theme-CF3fIKvw.d.ts

@@ -0,0 +1,9 @@
+import { T as ThemeStyle } from './theme-style-BPaMwk88.js';
+
+interface Theme {
+    id: string;
+    name: string;
+    theme: ThemeStyle;
+}
+
+export type { Theme as T };

package/dist/{theme-style-39nxXQy0.d.ts → server/theme-style-5_AGy-4V.d.ts}

@@ -17,6 +17,14 @@ interface Typography {
     textTransform?: TextTransform;
     textDecoration?: TextDecoration;
     textOverflow?: TextOverflow;
+    /**
+     * Fluid size in px: scales from `min` on a phone to `max` on a desktop
+     * and overrides `fontSize`. Honoured by the heading levels.
+     */
+    fluid?: {
+        min: number;
+        max: number;
+    };
 }
 interface Border {
     width?: "border" | "border-0" | "border-2" | "border-4" | "border-8";
@@ -35,6 +43,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;
@@ -82,6 +108,8 @@ interface ThemeStyle {
     };
     typography: {
         preheader: Typography;
+        /** Hero-sized headline. Optional for older themes; falls back to `header1`. */
+        display?: Typography;
         header1: Typography;
         header2: Typography;
         header3: Typography;
@@ -94,7 +122,15 @@ interface ThemeStyle {
         button: Typography;
         input: Typography;
         caption: Typography;
+        /** Code snippets. Optional; defaults to JetBrains Mono. */
+        code?: Typography;
     };
+    /**
+     * How words wrapped in *asterisks* in a block title stand out: in the
+     * primary colour ("color", the default) or on a primary-coloured marker
+     * ("marker") for themes whose primary is close to the text colour.
+     */
+    highlight?: "color" | "marker";
     interactives: {
         button: {
             padding?: Padding;
@@ -103,6 +139,10 @@ interface ThemeStyle {
             custom?: CustomStyle;
             disabled?: DisabledStyle;
         };
+        menu?: MenuStyle;
+        dialog?: SurfaceStyle;
+        popover?: SurfaceStyle;
+        tooltip?: SurfaceStyle;
         link: {
             padding?: Padding;
             border?: Border;
@@ -130,6 +170,8 @@ interface ThemeStyle {
             width: "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl";
         };
         section: {
+            /** Draw a 1px hairline between sections. */
+            dividers?: boolean;
             padding: {
                 x: "px-0" | "px-4" | "px-6" | "px-8" | "px-10" | "px-12" | "px-16" | "px-20" | "px-24" | "px-32" | "px-40" | "px-48" | "px-56" | "px-64";
                 y: "py-0" | "py-4" | "py-6" | "py-8" | "py-10" | "py-12" | "py-16" | "py-20" | "py-24" | "py-32" | "py-40" | "py-48" | "py-56" | "py-64";
@@ -138,4 +180,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 { ThemeStyle as T };

package/dist/server/theme-style-BPaMwk88.d.ts

@@ -0,0 +1,183 @@
+type FontWeight = "font-thin" | "font-extralight" | "font-light" | "font-normal" | "font-medium" | "font-semibold" | "font-bold" | "font-extrabold" | "font-black";
+type FontSize = "text-xs" | "text-sm" | "text-base" | "text-lg" | "text-xl" | "text-2xl" | "text-3xl" | "text-4xl" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl";
+type LineHeight = "leading-none" | "leading-tight" | "leading-snug" | "leading-normal" | "leading-relaxed" | "leading-loose";
+type LetterSpacing = "tracking-tighter" | "tracking-tight" | "tracking-normal" | "tracking-wide" | "tracking-wider" | "tracking-widest";
+type TextTransform = "uppercase" | "lowercase" | "capitalize" | "normal-case";
+type TextDecoration = "underline" | "line-through" | "no-underline";
+type TextOverflow = "truncate" | "text-ellipsis" | "text-clip";
+type BorderRadius = "rounded-none" | "rounded-sm" | "rounded" | "rounded-md" | "rounded-lg" | "rounded-xl" | "rounded-2xl" | "rounded-3xl" | "rounded-full";
+type Shadow = "shadow-2xs" | "shadow-xs" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl" | "shadow-2xl" | "shadow-none";
+type Cursor = "cursor-not-allowed" | "cursor-default" | "cursor-pointer";
+interface Typography {
+    fontFamily: string;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    lineHeight?: LineHeight;
+    letterSpacing?: LetterSpacing;
+    textTransform?: TextTransform;
+    textDecoration?: TextDecoration;
+    textOverflow?: TextOverflow;
+    /**
+     * Fluid size in px: scales from `min` on a phone to `max` on a desktop
+     * and overrides `fontSize`. Honoured by the heading levels.
+     */
+    fluid?: {
+        min: number;
+        max: number;
+    };
+}
+interface Border {
+    width?: "border" | "border-0" | "border-2" | "border-4" | "border-8";
+    radius?: BorderRadius;
+    style?: "border-solid" | "border-dashed" | "border-dotted" | "border-double" | "border-hidden" | "border-none";
+}
+interface Padding {
+    x?: "px-0" | "px-1" | "px-2" | "px-3" | "px-4" | "px-5" | "px-6" | "px-8" | "px-10" | "px-12" | "px-16" | "px-20" | "px-24" | "px-32" | "px-40" | "px-48" | "px-56" | "px-64";
+    y?: "py-0" | "py-1" | "py-2" | "py-3" | "py-4" | "py-5" | "py-6" | "py-8" | "py-10" | "py-12" | "py-16" | "py-20" | "py-24" | "py-32" | "py-40" | "py-48" | "py-56" | "py-64";
+}
+type CustomStyle = string;
+interface DisabledStyle {
+    color?: string;
+    background?: string;
+    border?: string;
+    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;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    border: string;
+    input: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+    sidebar: string;
+    sidebarForeground: string;
+    sidebarPrimary: string;
+    sidebarPrimaryForeground: string;
+    sidebarAccent: string;
+    sidebarAccentForeground: string;
+    sidebarBorder: string;
+    sidebarRing: string;
+    shadow2xs: string;
+    shadowXs: string;
+    shadowSm: string;
+    shadowMd: string;
+    shadowLg: string;
+    shadowXl: string;
+    shadow2xl: string;
+}
+interface ThemeStyle {
+    colors: {
+        light: Colors;
+        dark: Colors;
+    };
+    typography: {
+        preheader: Typography;
+        /** Hero-sized headline. Optional for older themes; falls back to `header1`. */
+        display?: Typography;
+        header1: Typography;
+        header2: Typography;
+        header3: Typography;
+        header4: Typography;
+        subheader1: Typography;
+        subheader2: Typography;
+        text1: Typography;
+        text2: Typography;
+        link: Typography;
+        button: Typography;
+        input: Typography;
+        caption: Typography;
+        /** Code snippets. Optional; defaults to JetBrains Mono. */
+        code?: Typography;
+    };
+    /**
+     * How words wrapped in *asterisks* in a block title stand out: in the
+     * primary colour ("color", the default) or on a primary-coloured marker
+     * ("marker") for themes whose primary is close to the text colour.
+     */
+    highlight?: "color" | "marker";
+    interactives: {
+        button: {
+            padding?: Padding;
+            border?: Border;
+            shadow?: Shadow;
+            custom?: CustomStyle;
+            disabled?: DisabledStyle;
+        };
+        menu?: MenuStyle;
+        dialog?: SurfaceStyle;
+        popover?: SurfaceStyle;
+        tooltip?: SurfaceStyle;
+        link: {
+            padding?: Padding;
+            border?: Border;
+            textShadow?: string;
+            custom?: CustomStyle;
+            disabled?: DisabledStyle;
+        };
+        card: {
+            padding?: Padding;
+            border?: Border;
+            shadow?: Shadow;
+            custom?: CustomStyle;
+        };
+        input: {
+            borderRadius?: BorderRadius;
+            padding?: Padding;
+            border?: Border;
+            shadow?: Shadow;
+            custom?: CustomStyle;
+            disabled?: DisabledStyle;
+        };
+    };
+    structure: {
+        page: {
+            width: "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl";
+        };
+        section: {
+            /** Draw a 1px hairline between sections. */
+            dividers?: boolean;
+            padding: {
+                x: "px-0" | "px-4" | "px-6" | "px-8" | "px-10" | "px-12" | "px-16" | "px-20" | "px-24" | "px-32" | "px-40" | "px-48" | "px-56" | "px-64";
+                y: "py-0" | "py-4" | "py-6" | "py-8" | "py-10" | "py-12" | "py-16" | "py-20" | "py-24" | "py-32" | "py-40" | "py-48" | "py-56" | "py-64";
+            };
+        };
+    };
+}
+
+export type { ThemeStyle as T, Typography as a };

package/dist/server/theme.d.ts

@@ -0,0 +1,28 @@
+import { T as Theme } from './theme-CF3fIKvw.js';
+import './theme-style-BPaMwk88.js';
+
+declare const themes: Theme[];
+
+/**
+ * Generates full CSS color values for the custom properties every primitive
+ * reads. Full colors (rather than bare HSL channels) let the renderer coexist
+ * with Tailwind v4 hosts whose semantic utilities use `var(--primary)` while
+ * still accepting CourseLit-derived hex theme data.
+ *
+ * Callers rendering more than one theme in a document should pass a unique
+ * selector so one renderer cannot overwrite another renderer's variables.
+ */
+declare function generateThemeStyles(theme: Theme, selector?: string): string;
+
+/**
+ * Theme helpers that are safe to call from React Server Components and light
+ * enough to import from client components (the site's chat widget does).
+ */
+
+/**
+ * Picks the theme a site paints with: a custom `themeStyle` wins, then the
+ * stock theme named by `themeId`, then the default theme.
+ */
+declare function resolveTheme(themeId: string | null, themeStyle: Record<string, unknown> | null): Theme;
+
+export { generateThemeStyles, resolveTheme, themes };