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

package/dist/blocks/index.d.ts

@@ -2,7 +2,7 @@ import { a as WidgetDefaultSettings, W as Widget } from '../widget-CpE2HdgU.js';
 import { M as Media } from '../media-CnLImjVC.js';
 import { T as TitleSettings, A as Alignment, a as HorizontalAlignment } from '../heading-DQCxQt38.js';
 import { TextEditorContent } from '@frontlit/text-editor';
-import { A as AspectRatio, c as ImageObjectFit } from '../image-Bk8kPXwP.js';
+import { A as AspectRatio, c as ImageObjectFit } from '../image-Cv0aSUHD.js';
 import 'react';
 import '../section-background-6V_LCi5e.js';
 import '../theme-style-BVd5tOsc.js';
@@ -21,6 +21,9 @@ interface HeaderSettings extends WidgetDefaultSettings {
     linkAlignment?: "left" | "center" | "right";
     layout?: "fixed" | "floating" | "centered";
     backdropBlur?: boolean;
+    /** `owner/repo` (or a github.com URL). Shows a GitHub icon link. */
+    githubRepo?: string;
+    showGithubStars?: boolean;
 }
 
 declare const Header: Widget<HeaderSettings>;
@@ -90,14 +93,20 @@ interface FaqSettings extends WidgetDefaultSettings, TitleSettings {
 
 declare const Faq: Widget<FaqSettings>;
 
+type PricingPeriod = "monthly" | "yearly";
 interface PricingTier {
     name: string;
-    /** Plain display string, e.g. "$29/mo". No currency/period logic. */
+    /** Plain display string, e.g. "$29". No currency/period logic. With the
+     * period switch on, this is the monthly price. */
     price: string;
+    /** Shown when the switch is on Yearly. Falls back to `price`. */
+    priceYearly?: string;
     description?: string;
     features: string[];
     buttonCaption?: string;
     buttonAction?: string;
+    /** Button link when the switch is on Yearly. Falls back to `buttonAction`. */
+    buttonActionYearly?: string;
     highlighted?: boolean;
 }
 interface PricingSettings extends WidgetDefaultSettings, TitleSettings {
@@ -106,6 +115,12 @@ interface PricingSettings extends WidgetDefaultSettings, TitleSettings {
     headerAlignment?: Alignment;
     tiers?: PricingTier[];
     layout?: "grid" | "stacked" | "highlight";
+    /** Show a Monthly/Yearly switch above the plans. */
+    pricingSwitcher?: boolean;
+    monthlyPriceCaption?: string;
+    yearlyPriceCaption?: string;
+    /** Period selected when the page loads. Defaults to yearly. */
+    defaultPeriod?: PricingPeriod;
 }
 
 declare const Pricing: Widget<PricingSettings>;
@@ -266,4 +281,4 @@ interface DataSlotSettings extends WidgetDefaultSettings {
 
 declare const DataSlot: Widget<DataSlotSettings>;
 
-export { Banner, type BannerSettings, CodeSnippetBlock, type CodeSnippetSettings, 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 };
+export { Banner, type BannerSettings, CodeSnippetBlock, type CodeSnippetSettings, 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 PricingPeriod, type PricingSettings, type PricingTier, RichText, type RichTextSettings, SupportForm, type SupportFormSettings };

package/dist/blocks/index.js

@@ -1,7 +1,7 @@
 "use client";
-export { Banner, CodeSnippetBlock, Content, DataSlot, EmailForm, Embed, Faq, Featured, Footer, Grid, Header, Hero, Marquee, MediaBlock, Pricing, RichText, SupportForm } from '../chunk-K4WCLHMS.js';
-import '../chunk-36QHCIPM.js';
-import '../chunk-J7Z4UW45.js';
+export { Banner, CodeSnippetBlock, Content, DataSlot, EmailForm, Embed, Faq, Featured, Footer, Grid, Header, Hero, Marquee, MediaBlock, Pricing, RichText, SupportForm } from '../chunk-FZBLE44D.js';
+import '../chunk-QMUIISN3.js';
+import '../chunk-OEQJQ4OA.js';
 import '../chunk-XU7ALPGQ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/builder/index.d.ts

@@ -3,6 +3,7 @@ import { T as Theme, S as SectionBackground } from '../section-background-6V_LCi
 import { c as WidgetInstance, P as PageData, W as Widget } from '../widget-CpE2HdgU.js';
 import { a as PageSeo } from '../page-B5Gmm-Ys.js';
 import { P as PageBuilderLinkComponent } from '../nav-link-BfxvQ1s6.js';
+import * as Icons from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
 import { R as ResolvedColorMode } from '../color-mode-DIEEt9WP.js';
 import { T as ThemeStyle } from '../theme-style-BVd5tOsc.js';
@@ -58,6 +59,8 @@ declare function SettingsPanel({ title, onClose, children, eyebrow, description,
     icon?: LucideIcon;
 }): React__default.JSX.Element;
 
+/** The block's `metadata.icon` (a lucide-react name), or a generic layout icon. */
+declare function resolveIcon(name?: string): Icons.LucideIcon;
 declare function BlockPicker({ blocks, onPick, onClose, }: {
     blocks: Widget<any>[];
     onPick: (name: string) => void;
@@ -234,4 +237,4 @@ declare function SeoEditor({ seo, onChange, }: {
     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 };
+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, resolveIcon };

package/dist/builder/index.js

@@ -1,10 +1,10 @@
 "use client";
-export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, PageBuilderSlider, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, VerticalPaddingSelector, getMaxWidthTWClass, getVerticalPaddingTWClass } from '../chunk-GIKTOAQS.js';
-import '../chunk-IU4KATI2.js';
-import '../chunk-BBI7UHOA.js';
-import '../chunk-K4WCLHMS.js';
-import '../chunk-36QHCIPM.js';
-import '../chunk-J7Z4UW45.js';
+export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, PageBuilderSlider, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, VerticalPaddingSelector, getMaxWidthTWClass, getVerticalPaddingTWClass, resolveIcon } from '../chunk-PQTDUFKU.js';
+import '../chunk-YXLOVEQZ.js';
+import '../chunk-BWOGREWJ.js';
+import '../chunk-FZBLE44D.js';
+import '../chunk-QMUIISN3.js';
+import '../chunk-OEQJQ4OA.js';
 import '../chunk-XU7ALPGQ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/{chunk-BBI7UHOA.js → chunk-BWOGREWJ.js}

@@ -1,5 +1,5 @@
 "use client";
-import { Button2, Button } from './chunk-J7Z4UW45.js';
+import { Button2, Button } from './chunk-OEQJQ4OA.js';
 import { useState, useEffect } from 'react';
 import { Sun, Moon } from 'lucide-react';
 import { jsx } from 'react/jsx-runtime';
@@ -52,5 +52,5 @@ function ThemeModeSwitcher({
 }
 
 export { ThemeModeSwitcher };
-//# sourceMappingURL=chunk-BBI7UHOA.js.map
-//# sourceMappingURL=chunk-BBI7UHOA.js.map
+//# sourceMappingURL=chunk-BWOGREWJ.js.map
+//# sourceMappingURL=chunk-BWOGREWJ.js.map

package/dist/{chunk-BBI7UHOA.js.map → chunk-BWOGREWJ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/theme-mode-switcher.tsx"],"names":["Button"],"mappings":";;;;;AAiBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAOG;AACD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,MAAM,OAAA,GAAU,UAAU,QAAA,GAAW,OAAA;AACrC,EAAA,MAAM,IAAA,GAAO,OAAA,KAAY,MAAA,GAAS,OAAA,GAAU,MAAA;AAC5C,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAS,qBAAA,GAAwB,sBAAA;AACxD,EAAA,MAAM,IAAA,GAAO,OAAA,KAAY,MAAA,GAAS,GAAA,GAAM,IAAA;AAExC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,GAAA;AAAA,MAACA,OAAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAS,OAAA,IAAW,SAAA;AAAA,QACpB,MAAM,IAAA,IAAQ,IAAA;AAAA,QACd,KAAA;AAAA,QACA,KAAA,EAAO,KAAA;AAAA,QACP,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA;AAAA,QACA,OAAA,EAAS,QAAA;AAAA,QAET,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,KAC5B;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAO,KAAA;AAAA,MACP,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA;AAAA,MACA,OAAA,EAAS,QAAA;AAAA,MAET,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,GAC5B;AAEJ","file":"chunk-BBI7UHOA.js","sourcesContent":["\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { Button, type ButtonProps } from \"../primitives\";\nimport { Button as ChromeButton } from \"../primitives/components/ui/button\";\nimport type { ThemeStyle } from \"../models\";\nimport type { ResolvedColorMode } from \"../utils\";\n\n/**\n * Light / dark toggle. Public sites pass `theme` so the button uses\n * page-builder primitives; the builder chrome omits it and matches the\n * other icon buttons in the top bar.\n *\n * Preference starts as system (OS). The first click pins an explicit\n * light or dark side; later clicks flip between those two.\n */\nexport function ThemeModeSwitcher({\n  resolved,\n  onToggle,\n  theme,\n  className,\n  size,\n  variant,\n}: {\n  resolved: ResolvedColorMode;\n  onToggle: () => void;\n  theme?: ThemeStyle;\n  className?: string;\n  size?: ButtonProps[\"size\"];\n  variant?: ButtonProps[\"variant\"];\n}) {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const painted = mounted ? resolved : \"light\";\n  const next = painted === \"dark\" ? \"light\" : \"dark\";\n  const label = next === \"dark\" ? \"Switch to dark mode\" : \"Switch to light mode\";\n  const Icon = painted === \"dark\" ? Sun : Moon;\n\n  if (theme) {\n    return (\n      <Button\n        type=\"button\"\n        variant={variant ?? \"outline\"}\n        size={size ?? \"sm\"}\n        theme={theme}\n        title={label}\n        aria-label={label}\n        className={className}\n        onClick={onToggle}\n      >\n        <Icon className=\"h-4 w-4\" />\n      </Button>\n    );\n  }\n\n  return (\n    <ChromeButton\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      title={label}\n      aria-label={label}\n      className={className}\n      onClick={onToggle}\n    >\n      <Icon className=\"h-4 w-4\" />\n    </ChromeButton>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/theme-mode-switcher.tsx"],"names":["Button"],"mappings":";;;;;AAiBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAOG;AACD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,MAAM,OAAA,GAAU,UAAU,QAAA,GAAW,OAAA;AACrC,EAAA,MAAM,IAAA,GAAO,OAAA,KAAY,MAAA,GAAS,OAAA,GAAU,MAAA;AAC5C,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAS,qBAAA,GAAwB,sBAAA;AACxD,EAAA,MAAM,IAAA,GAAO,OAAA,KAAY,MAAA,GAAS,GAAA,GAAM,IAAA;AAExC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,GAAA;AAAA,MAACA,OAAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAS,OAAA,IAAW,SAAA;AAAA,QACpB,MAAM,IAAA,IAAQ,IAAA;AAAA,QACd,KAAA;AAAA,QACA,KAAA,EAAO,KAAA;AAAA,QACP,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA;AAAA,QACA,OAAA,EAAS,QAAA;AAAA,QAET,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,KAC5B;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAO,KAAA;AAAA,MACP,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA;AAAA,MACA,OAAA,EAAS,QAAA;AAAA,MAET,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,GAC5B;AAEJ","file":"chunk-BWOGREWJ.js","sourcesContent":["\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { Button, type ButtonProps } from \"../primitives\";\nimport { Button as ChromeButton } from \"../primitives/components/ui/button\";\nimport type { ThemeStyle } from \"../models\";\nimport type { ResolvedColorMode } from \"../utils\";\n\n/**\n * Light / dark toggle. Public sites pass `theme` so the button uses\n * page-builder primitives; the builder chrome omits it and matches the\n * other icon buttons in the top bar.\n *\n * Preference starts as system (OS). The first click pins an explicit\n * light or dark side; later clicks flip between those two.\n */\nexport function ThemeModeSwitcher({\n  resolved,\n  onToggle,\n  theme,\n  className,\n  size,\n  variant,\n}: {\n  resolved: ResolvedColorMode;\n  onToggle: () => void;\n  theme?: ThemeStyle;\n  className?: string;\n  size?: ButtonProps[\"size\"];\n  variant?: ButtonProps[\"variant\"];\n}) {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const painted = mounted ? resolved : \"light\";\n  const next = painted === \"dark\" ? \"light\" : \"dark\";\n  const label = next === \"dark\" ? \"Switch to dark mode\" : \"Switch to light mode\";\n  const Icon = painted === \"dark\" ? Sun : Moon;\n\n  if (theme) {\n    return (\n      <Button\n        type=\"button\"\n        variant={variant ?? \"outline\"}\n        size={size ?? \"sm\"}\n        theme={theme}\n        title={label}\n        aria-label={label}\n        className={className}\n        onClick={onToggle}\n      >\n        <Icon className=\"h-4 w-4\" />\n      </Button>\n    );\n  }\n\n  return (\n    <ChromeButton\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      title={label}\n      aria-label={label}\n      className={className}\n      onClick={onToggle}\n    >\n      <Icon className=\"h-4 w-4\" />\n    </ChromeButton>\n  );\n}\n"]}