@frontlit/page-builder 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/server/index.js

@@ -89,12 +89,16 @@ function cn(...inputs) {
 
 // src/blocks/header/widget.tsx
 import clsx2 from "clsx";
+import { Github } from "lucide-react";
 
 // src/components/image.tsx
 import { jsx } from "react/jsx-runtime";
-var imageAttributesResolver = null;
+var registry = globalThis;
 function setImageAttributesResolver(resolver) {
-  imageAttributesResolver = resolver;
+  registry.__frontlitImageResolver = resolver;
+}
+function resolveImageAttributes(input) {
+  return registry.__frontlitImageResolver?.(input) ?? null;
 }
 var roundedMap = {
   0: "rounded-none",
@@ -148,7 +152,7 @@ var Image = (props) => {
       }
     );
   }
-  const optimized = imageAttributesResolver?.({ src: source, alt, sizes, priority });
+  const optimized = resolveImageAttributes({ src: source, alt, sizes, priority });
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -866,6 +870,15 @@ function HeaderLink({
 
 // src/blocks/header/widget.tsx
 import { HeaderMobileMenu } from "./islands/header-mobile-menu.js";
+import { GithubStars } from "./islands/header-github-stars.js";
+
+// src/blocks/header/github.ts
+function parseGithubRepo(value) {
+  const match = value?.trim().match(/^(?:https?:\/\/(?:www\.)?github\.com\/)?([\w.-]+\/[\w.-]+?)(?:\.git)?\/?$/);
+  return match?.[1];
+}
+
+// src/blocks/header/widget.tsx
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 function HeaderWidget({
   settings: {
@@ -876,6 +889,8 @@ function HeaderWidget({
     linkAlignment = "left",
     layout = "fixed",
     backdropBlur = false,
+    githubRepo,
+    showGithubStars,
     cssId,
     maxWidth,
     verticalPadding,
@@ -896,6 +911,8 @@ function HeaderWidget({
   const resolvedLogoText = pageData.siteTitle;
   const resolvedLogoAlt = pageData.siteLogoAlt || resolvedLogoText || "";
   const effectiveLogoCorners = logoCorners ?? 2;
+  const hasCta = Boolean(ctaLabel && ctaHref);
+  const repo = parseGithubRepo(githubRepo);
   const logo = /* @__PURE__ */ jsx16(NavLink2, { href: "/", className: "no-underline", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
     resolvedLogoImage && /* @__PURE__ */ jsx16(
       Image,
@@ -912,9 +929,22 @@ function HeaderWidget({
     resolvedLogoText && /* @__PURE__ */ jsx16(Header4, { theme: overriddenTheme, as: "span", children: resolvedLogoText })
   ] }) });
   const ctaAndMenu = /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+    repo && /* @__PURE__ */ jsx16(
+      "a",
+      {
+        href: `https://github.com/${repo}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: /* @__PURE__ */ jsxs2(Button2, { theme: overriddenTheme, variant: "ghost", size: "sm", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx16(Github, { className: "h-4 w-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx16("span", { className: "sr-only", children: "GitHub repository" }),
+          showGithubStars && /* @__PURE__ */ jsx16(GithubStars, { repo })
+        ] })
+      }
+    ),
     buttonLinks.map((link) => /* @__PURE__ */ jsx16("div", { className: "hidden lg:!block", children: /* @__PURE__ */ jsx16(HeaderLink, { link, theme: overriddenTheme }) }, link.id)),
-    ctaLabel && ctaHref && /* @__PURE__ */ jsx16("div", { className: "hidden lg:!block", children: /* @__PURE__ */ jsx16(NavLink2, { href: ctaHref, children: /* @__PURE__ */ jsx16(Button2, { theme: overriddenTheme, size: "sm", children: ctaLabel }) }) }),
-    /* @__PURE__ */ jsx16("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx16(
+    hasCta && /* @__PURE__ */ jsx16("div", { className: "hidden lg:!block", children: /* @__PURE__ */ jsx16(NavLink2, { href: ctaHref, children: /* @__PURE__ */ jsx16(Button2, { theme: overriddenTheme, size: "sm", children: ctaLabel }) }) }),
+    (links.length > 0 || hasCta) && /* @__PURE__ */ jsx16("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx16(
       HeaderMobileMenu,
       {
         links,
@@ -1567,8 +1597,17 @@ var faqDefaults = {
 
 // src/blocks/pricing/widget.tsx
 import clsx7 from "clsx";
+import { PricingPeriodSwitch } from "./islands/pricing-period-switch.js";
 import { NavLink as NavLink4 } from "./islands/nav-link.js";
-import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var lgColumns = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+};
+var monthlyOnly = "group-data-[period=yearly]/pricing:hidden";
+var yearlyOnly = "hidden group-data-[period=yearly]/pricing:block";
 function PricingWidget({
   settings: {
     title,
@@ -1578,6 +1617,10 @@ function PricingWidget({
     headerAlignment = "center",
     tiers,
     layout = "grid",
+    pricingSwitcher,
+    monthlyPriceCaption,
+    yearlyPriceCaption,
+    defaultPeriod = "yearly",
     cssId,
     maxWidth,
     verticalPadding,
@@ -1588,6 +1631,76 @@ function PricingWidget({
   const overriddenTheme = JSON.parse(JSON.stringify(theme.theme));
   overriddenTheme.structure.page.width = maxWidth || theme.theme.structure.page.width;
   overriddenTheme.structure.section.padding.y = verticalPadding || theme.theme.structure.section.padding.y;
+  const plans = tiers && tiers.length > 0 && /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: clsx7(
+        layout === "stacked" ? "mx-auto flex w-full max-w-xl flex-col gap-6" : [
+          "grid grid-cols-1 gap-6 items-stretch",
+          tiers.length === 1 && "mx-auto w-full max-w-xl",
+          tiers.length >= 2 && "md:grid-cols-2",
+          lgColumns[Math.min(tiers.length, 4)]
+        ]
+      ),
+      children: tiers.map((tier, index) => /* @__PURE__ */ jsx21(
+        PageCard,
+        {
+          theme: overriddenTheme,
+          className: clsx7(
+            tier.highlighted && "ring-2 ring-primary",
+            layout === "highlight" && tier.highlighted && "relative z-10 shadow-xl md:-translate-y-3"
+          ),
+          children: /* @__PURE__ */ jsxs7(
+            PageCardContent,
+            {
+              theme: overriddenTheme,
+              className: "h-full flex flex-col gap-4",
+              children: [
+                /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx21(Preheader, { theme: overriddenTheme, children: tier.name }),
+                  tier.highlighted && /* @__PURE__ */ jsx21(Badge2, { theme: overriddenTheme, children: "Most popular" })
+                ] }),
+                /* @__PURE__ */ jsx21(PageCardHeader, { theme: overriddenTheme, children: pricingSwitcher ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                  /* @__PURE__ */ jsx21("span", { className: monthlyOnly, children: tier.price }),
+                  /* @__PURE__ */ jsx21("span", { className: yearlyOnly, children: tier.priceYearly || tier.price })
+                ] }) : tier.price }),
+                tier.description && /* @__PURE__ */ jsx21(Text1, { theme: overriddenTheme, children: tier.description }),
+                tier.features && tier.features.length > 0 && /* @__PURE__ */ jsx21("div", { className: "grow flex flex-col gap-2", children: tier.features.map((feature, i) => /* @__PURE__ */ jsx21(Text2, { theme: overriddenTheme, children: feature }, i)) }),
+                pricingSwitcher && tier.buttonActionYearly && tier.buttonActionYearly !== tier.buttonAction ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                  /* @__PURE__ */ jsx21(
+                    TierButton,
+                    {
+                      tier,
+                      href: tier.buttonAction,
+                      className: monthlyOnly,
+                      theme: overriddenTheme
+                    }
+                  ),
+                  /* @__PURE__ */ jsx21(
+                    TierButton,
+                    {
+                      tier,
+                      href: tier.buttonActionYearly,
+                      className: yearlyOnly,
+                      theme: overriddenTheme
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx21(
+                  TierButton,
+                  {
+                    tier,
+                    href: tier.buttonAction,
+                    theme: overriddenTheme
+                  }
+                )
+              ]
+            }
+          )
+        },
+        index
+      ))
+    }
+  );
   return /* @__PURE__ */ jsx21(Section, { theme: overriddenTheme, id: cssId, background, children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxs7(
       "div",
@@ -1602,50 +1715,35 @@ function PricingWidget({
         ]
       }
     ),
-    tiers && tiers.length > 0 && /* @__PURE__ */ jsx21(
-      "div",
+    tiers && tiers.length > 0 && (pricingSwitcher ? /* @__PURE__ */ jsx21(
+      PricingPeriodSwitch,
       {
-        className: layout === "stacked" ? "mx-auto flex w-full max-w-xl flex-col gap-6" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch",
-        children: tiers.map((tier, index) => /* @__PURE__ */ jsx21(
-          PageCard,
-          {
-            theme: overriddenTheme,
-            className: clsx7(
-              tier.highlighted && "ring-2 ring-primary",
-              layout === "highlight" && tier.highlighted && "relative z-10 shadow-xl md:-translate-y-3"
-            ),
-            children: /* @__PURE__ */ jsxs7(
-              PageCardContent,
-              {
-                theme: overriddenTheme,
-                className: "h-full flex flex-col gap-4",
-                children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx21(Preheader, { theme: overriddenTheme, children: tier.name }),
-                    tier.highlighted && /* @__PURE__ */ jsx21(Badge2, { theme: overriddenTheme, children: "Most popular" })
-                  ] }),
-                  /* @__PURE__ */ jsx21(PageCardHeader, { theme: overriddenTheme, children: tier.price }),
-                  tier.description && /* @__PURE__ */ jsx21(Text1, { theme: overriddenTheme, children: tier.description }),
-                  tier.features && tier.features.length > 0 && /* @__PURE__ */ jsx21("div", { className: "grow flex flex-col gap-2", children: tier.features.map((feature, i) => /* @__PURE__ */ jsx21(Text2, { theme: overriddenTheme, children: feature }, i)) }),
-                  tier.buttonAction && tier.buttonCaption && /* @__PURE__ */ jsx21(NavLink4, { href: tier.buttonAction, className: "w-full mt-auto", children: /* @__PURE__ */ jsx21(
-                    Button2,
-                    {
-                      theme: overriddenTheme,
-                      variant: tier.highlighted ? "default" : "secondary",
-                      className: "w-full",
-                      children: tier.buttonCaption
-                    }
-                  ) })
-                ]
-              }
-            )
-          },
-          index
-        ))
+        defaultPeriod,
+        monthlyCaption: monthlyPriceCaption || "Monthly",
+        yearlyCaption: yearlyPriceCaption || "Yearly",
+        theme: overriddenTheme,
+        children: plans
       }
-    )
+    ) : plans)
   ] }) });
 }
+function TierButton({
+  tier,
+  href,
+  className,
+  theme
+}) {
+  if (!href || !tier.buttonCaption) return null;
+  return /* @__PURE__ */ jsx21(NavLink4, { href, className: clsx7("w-full mt-auto", className), children: /* @__PURE__ */ jsx21(
+    Button2,
+    {
+      theme,
+      variant: tier.highlighted ? "default" : "secondary",
+      className: "w-full",
+      children: tier.buttonCaption
+    }
+  ) });
+}
 
 // src/blocks/pricing/defaults.ts
 var pricingDefaults = {
@@ -1688,7 +1786,7 @@ var pricingDefaults = {
 // src/blocks/banner/widget.tsx
 import clsx8 from "clsx";
 import { NavLink as NavLink5 } from "./islands/nav-link.js";
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 function BannerWidget({
   settings: {
     title,
@@ -1714,7 +1812,7 @@ function BannerWidget({
   const isCentered = contentAlignment === "center";
   const isSplit = layout === "split";
   const isBoxed = layout === "boxed";
-  const heading = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+  const heading = /* @__PURE__ */ jsxs8(Fragment3, { children: [
     /* @__PURE__ */ jsx22(Header1, { theme: overriddenTheme, ...titleProps({ titleLevel, titleSize }), children: renderTitle(title, overriddenTheme) }),
     description && /* @__PURE__ */ jsx22(Subheader1, { theme: overriddenTheme, component: "span", children: /* @__PURE__ */ jsx22(TextRenderer, { json: description, theme: overriddenTheme }) })
   ] });
@@ -2088,7 +2186,7 @@ var richTextDefaults = {
 import clsx11 from "clsx";
 import * as Icons2 from "lucide-react";
 import { NavLink as NavLink7 } from "./islands/nav-link.js";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 function resolveIcon2(name) {
   if (!name) return null;
   return Icons2[name] ?? null;
@@ -2125,10 +2223,10 @@ function GridItemCard({ item, theme }) {
     item.description && /* @__PURE__ */ jsx27(Text2, { theme, children: item.description }),
     item.buttonAction && item.buttonCaption && /* @__PURE__ */ jsx27(NavLink7, { href: item.buttonAction, className: "mt-2", children: /* @__PURE__ */ jsx27(Button2, { theme, variant: "secondary", size: "sm", children: item.buttonCaption }) })
   ] });
-  return /* @__PURE__ */ jsx27(PageCard, { theme, children: /* @__PURE__ */ jsx27(PageCardContent, { theme, className: "flex h-full flex-col gap-3", children: mediaFirst ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+  return /* @__PURE__ */ jsx27(PageCard, { theme, children: /* @__PURE__ */ jsx27(PageCardContent, { theme, className: "flex h-full flex-col gap-3", children: mediaFirst ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
     media,
     text
-  ] }) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
+  ] }) : /* @__PURE__ */ jsxs12(Fragment4, { children: [
     text,
     media
   ] }) }) });
@@ -2293,7 +2391,7 @@ import React5 from "react";
 import * as Icons3 from "lucide-react";
 import { NavLink as NavLink8 } from "./islands/nav-link.js";
 import { MarqueeTrack } from "./islands/marquee-track.js";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function resolveIcon3(name) {
   if (!name) return null;
   return Icons3[name] ?? null;
@@ -2344,7 +2442,7 @@ function MarqueeWidget({
   };
   return /* @__PURE__ */ jsx29(Section, { theme: overriddenTheme, id: cssId, background, children: /* @__PURE__ */ jsxs13("div", { className: "relative", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx29(MarqueeTrack, { speed, direction, pauseOnHover, children: items.map(renderItem) }),
-    fadeWidth > 0 && /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    fadeWidth > 0 && /* @__PURE__ */ jsxs13(Fragment5, { children: [
       /* @__PURE__ */ jsx29(
         "div",
         {