simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/components/widgets/_shared/index.ts

@@ -0,0 +1,39 @@
+export type {
+  BackgroundMediaFallback,
+  BackgroundMediaOverlay,
+  BackgroundMediaProps,
+} from './background-media';
+export { BackgroundMedia } from './background-media';
+export type {
+  ContentMediaAspect,
+  ContentMediaProps,
+} from './content-media';
+export { ContentMedia } from './content-media';
+export type {
+  CTAButtonProps,
+  CTAButtonSize,
+  CTAButtonVariant,
+} from './cta-button';
+export { CTAButton } from './cta-button';
+export type { EmptyPlaceholderProps } from './empty-placeholder';
+export { EmptyPlaceholder } from './empty-placeholder';
+export type { EyebrowTextProps, EyebrowTone } from './eyebrow-text';
+export { EyebrowText } from './eyebrow-text';
+export type {
+  HeadingLevel,
+  HeadingProps,
+  HeadingSize,
+  HeadingTone,
+} from './heading';
+export { Heading } from './heading';
+export {
+  EYEBROW_CASE_STYLE,
+  eyebrowTextStyle,
+  maskStyle,
+  SURFACE_CONTRAST,
+} from './mask';
+export type { SectionProps, SectionSpacing, SectionVariant } from './section';
+export { Section } from './section';
+export type { SocialIconName } from './social-icon';
+export { SOCIAL_ICON_NAMES, SOCIAL_ICON_OPTIONS, SocialIcon } from './social-icon';
+export { TextLink } from './text-link';

pagebuilder/components/widgets/_shared/mask.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * An organic mask clips an image to a content-supplied SVG shape (e.g. the
+ * BioGarden blob/egg shapes). The -webkit- prefixed keys keep Safari/iOS in
+ * sync with the standard properties. Call once per widget render (not per
+ * item) and share the returned object across mapped items.
+ */
+export function maskStyle(url: string): CSSProperties {
+  return {
+    maskImage: `url(${url})`,
+    maskSize: '100% 100%',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: `url(${url})`,
+    WebkitMaskSize: '100% 100%',
+    WebkitMaskRepeat: 'no-repeat',
+  };
+}
+
+/**
+ * Text color for content sitting on a colored band/card surface
+ * (`surfaceColor`/`cardBg`). Tenants override `--pb-surface-contrast` when
+ * their brand colors need dark-on-light contrast instead of white.
+ */
+export const SURFACE_CONTRAST = 'var(--pb-surface-contrast, #ffffff)';
+
+/**
+ * Theme-driven eyebrow case/tracking (`--pb-eyebrow-transform` /
+ * `--pb-eyebrow-tracking`). Defaults keep eyebrows sentence-case; a tenant
+ * sets `uppercase` + a tracking value for the small-caps eyebrow look.
+ */
+export const EYEBROW_CASE_STYLE: CSSProperties = {
+  textTransform: 'var(--pb-eyebrow-transform, none)' as CSSProperties['textTransform'],
+  letterSpacing: 'var(--pb-eyebrow-tracking, normal)',
+};
+
+/**
+ * The ONE eyebrow ("subtitle") type spec, shared by every widget that renders
+ * one — MediaObject (inline and banner), EyebrowSplitSection, Timeline (both
+ * variants) and FeatureCards. Each of those used to hardcode its own size and
+ * weight, so a single tenant showed four different eyebrows across one page.
+ *
+ * `size`/`weight` are the caller's PREVIOUS literal values and are used only
+ * as the `var()` fallback, so a tenant that sets neither token renders exactly
+ * as before; a tenant that sets `--pb-eyebrow-size`/`--pb-eyebrow-weight`
+ * (BioGarden: 16px Medium) gets one consistent eyebrow everywhere.
+ */
+export function eyebrowTextStyle(size = '0.875rem', weight = '500'): CSSProperties {
+  return {
+    ...EYEBROW_CASE_STYLE,
+    fontSize: `var(--pb-eyebrow-size, ${size})`,
+    fontWeight: `var(--pb-eyebrow-weight, ${weight})` as CSSProperties['fontWeight'],
+  };
+}

pagebuilder/components/widgets/_shared/section.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../../utils/widgetUtils';
+
+export type SectionVariant = 'default' | 'muted' | 'accent' | 'image-overlay';
+export type SectionSpacing = 'compact' | 'default' | 'loose';
+
+export type SectionProps = {
+  variant: SectionVariant;
+  spacing: SectionSpacing;
+  align?: 'left' | 'center';
+  as?: 'section' | 'header';
+  className?: string;
+  children: ReactNode;
+} & Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'children'>;
+
+const VARIANT_CLASSES: Record<SectionVariant, string> = {
+  default: '',
+  muted: 'bg-gray-50 dark:bg-gray-900/40',
+  accent: 'bg-primary-800 text-white rounded-xl',
+  'image-overlay': 'relative isolate overflow-hidden rounded-xl bg-slate-900 text-white',
+};
+
+// Vertical section rhythm is a component-level, tenant-tunable token. A tenant
+// (e.g. Mowing) sets `--pb-section-py` to one value so every section shares a
+// consistent rhythm; tenants that don't set it keep these per-variant fallbacks
+// (the original py-8/12 · py-12/16 · py-16/24 scale), so GCA/Recodo are unchanged.
+const SPACING_CLASSES: Record<SectionSpacing, string> = {
+  compact: 'py-[var(--pb-section-py,2rem)] lg:py-[var(--pb-section-py,3rem)]',
+  default: 'py-[var(--pb-section-py,3rem)] lg:py-[var(--pb-section-py,4rem)]',
+  loose: 'py-[var(--pb-section-py,4rem)] lg:py-[var(--pb-section-py,6rem)]',
+};
+
+export function Section({
+  variant,
+  spacing,
+  align,
+  as = 'section',
+  className,
+  children,
+  ...rest
+}: SectionProps) {
+  const Tag = as;
+  return (
+    <Tag
+      {...rest}
+      className={cn(
+        // Same responsive gutters as every other widget container so all
+        // sections share one grid edge (px-4 alone left Section content
+        // 16px wider than its siblings at lg).
+        'container mx-auto px-4 sm:px-6 lg:px-8',
+        VARIANT_CLASSES[variant],
+        SPACING_CLASSES[spacing],
+        align === 'center' && 'text-center',
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  );
+}

pagebuilder/components/widgets/_shared/social-icon.tsx

@@ -0,0 +1,71 @@
+import { Mail } from 'lucide-react';
+
+/**
+ * Icons the site header's utility bar can show in place of a link label.
+ *
+ * Deliberately small: lucide 1.x removed its brand glyphs, so anything here
+ * has to be vendored below with its licence. Adding one means finding a
+ * correctly-licensed path, not approximating it.
+ */
+export const SOCIAL_ICON_NAMES = ['bluesky', 'linkedin', 'email'] as const;
+
+export type SocialIconName = (typeof SOCIAL_ICON_NAMES)[number];
+
+export const SOCIAL_ICON_OPTIONS = [
+  { label: 'BlueSky', value: 'bluesky' },
+  { label: 'LinkedIn', value: 'linkedin' },
+  { label: 'Email', value: 'email' },
+];
+
+/**
+ * BlueSky butterfly. Glyph: Font Awesome Free 6.7.2 `brands/bluesky`
+ * (https://fontawesome.com — CC BY 4.0), path data unmodified.
+ */
+function BlueskyIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      {/* No <title>: the svg is aria-hidden (the link carries the label), and a
+          title would pop a stray native tooltip on hover. */}
+      <path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z" />
+    </svg>
+  );
+}
+
+/**
+ * LinkedIn mark. Geometry: lucide `linkedin` (ISC), which lucide 1.x dropped
+ * along with the rest of its brand set — vendored rather than pinned back, so
+ * the module keeps up with lucide. Filled rather than stroked, matching the
+ * design system's solid social strip.
+ */
+function LinkedinIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+      <rect width="4" height="12" x="2" y="9" />
+      <circle cx="4" cy="4" r="2" />
+    </svg>
+  );
+}
+
+export function SocialIcon({ name, className }: { name: SocialIconName; className?: string }) {
+  switch (name) {
+    case 'bluesky':
+      return <BlueskyIcon className={className} />;
+    case 'linkedin':
+      return <LinkedinIcon className={className} />;
+    default:
+      return <Mail className={className} aria-hidden="true" />;
+  }
+}

pagebuilder/components/widgets/_shared/text-link.tsx

@@ -0,0 +1,47 @@
+import type { CSSProperties } from 'react';
+import { cn } from '../../../utils/widgetUtils';
+import { LinkArrow } from '../_internal/link-arrow';
+import { renderRichText } from '../_internal/rich-text';
+
+/**
+ * Inline text link with a trailing arrow ("View all", "Learn more", …), themed
+ * via the tenant link tokens: `--pb-link-color` / `--pb-link-hover-color` /
+ * `--pb-link-hover-decoration` / `--pb-link-size` / `--pb-link-weight`
+ * (GCA: ink 18px SemiBold, teal hover, no underline). The fallbacks reproduce
+ * the prior widget styling (accent-coloured 14px medium, underline on hover)
+ * so tenants that don't set the tokens render unchanged.
+ */
+
+// Hoisted: a fresh style object per render would defeat React's prop-equality
+// fast-path (see the same pattern on MESH_STYLE in _shared/background-media).
+const LINK_TEXT_STYLE: CSSProperties = {
+  fontSize: 'var(--pb-link-size, 0.875rem)',
+  fontWeight: 'var(--pb-link-weight, 500)' as CSSProperties['fontWeight'],
+};
+
+export function TextLink({
+  label,
+  href,
+  className,
+}: {
+  label: string;
+  href: string;
+  className?: string;
+}) {
+  if (!label || !href) return null;
+  return (
+    <a
+      href={href}
+      className={cn(
+        'inline-flex shrink-0 items-center gap-2 whitespace-nowrap text-[color:var(--pb-link-color,var(--pb-accent))] underline-offset-4 hover:text-[color:var(--pb-link-hover-color,var(--pb-link-color,var(--pb-accent)))] hover:[text-decoration-line:var(--pb-link-hover-decoration,underline)]',
+        className,
+      )}
+      style={LINK_TEXT_STYLE}
+    >
+      {/* Emphasis only: the label already sits inside this <a>, and a nested
+			    anchor is invalid HTML that browsers split into two links. */}
+      {renderRichText(label, { allowLinks: false })}
+      <LinkArrow className="size-5" />
+    </a>
+  );
+}

pagebuilder/components/widgets/accordion-widget.tsx

@@ -0,0 +1,64 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { DisclosureChevron } from './_internal/disclosure-chevron';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type AccordionItem = {
+  title: string;
+  content: string;
+};
+
+export type AccordionWidgetProps = {
+  items: AccordionItem[];
+};
+
+export const AccordionWidget: ComponentConfig<AccordionWidgetProps> = {
+  label: 'Accordion',
+  fields: {
+    items: {
+      type: 'array',
+      label: 'Items',
+      arrayFields: {
+        title: { type: 'text', label: 'Title' },
+        content: { type: 'textarea', label: 'Content' },
+      },
+      defaultItemProps: {
+        title: 'Section title',
+        content: 'Section content...',
+      },
+      min: 1,
+      max: 20,
+    },
+  },
+  defaultProps: {
+    items: [
+      { title: 'Section 1', content: 'Content for section 1...' },
+      { title: 'Section 2', content: 'Content for section 2...' },
+    ],
+  },
+  render: ({ items }) => {
+    if (!items || items.length === 0) {
+      return (
+        <div className="text-gray-500 text-center py-4">Add accordion items in the editor.</div>
+      );
+    }
+    return (
+      <div className="container mx-auto max-w-3xl py-8 space-y-2">
+        {items.map((item, idx) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+          <details key={idx} className="group rounded-lg border bg-white dark:bg-gray-900 p-4">
+            <summary className="cursor-pointer flex items-center justify-between font-semibold list-none">
+              {renderRichText(item.title || `Item ${idx + 1}`, {
+                allowLinks: false,
+              })}
+              <DisclosureChevron />
+            </summary>
+            <RichTextBlock
+              text={item.content}
+              className="mt-3 text-gray-700 dark:text-gray-300 leading-relaxed"
+            />
+          </details>
+        ))}
+      </div>
+    );
+  },
+};

pagebuilder/components/widgets/alert-widget.tsx

@@ -0,0 +1,47 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type AlertWidgetProps = {
+  title: string;
+  message: string;
+  variant: 'info' | 'success' | 'warning' | 'error';
+};
+
+const VARIANT_CLASS: Record<AlertWidgetProps['variant'], string> = {
+  info: 'bg-primary-50 border-primary-200 text-primary-900',
+  success: 'bg-green-50 border-green-200 text-green-900',
+  warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
+  error: 'bg-red-50 border-red-200 text-red-900',
+};
+
+export const AlertWidget: ComponentConfig<AlertWidgetProps> = {
+  label: 'Alert',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    message: { type: 'textarea', label: 'Message' },
+    variant: {
+      type: 'select',
+      label: 'Variant',
+      options: [
+        { label: 'Info', value: 'info' },
+        { label: 'Success', value: 'success' },
+        { label: 'Warning', value: 'warning' },
+        { label: 'Error', value: 'error' },
+      ],
+    },
+  },
+  defaultProps: {
+    title: 'Heads up!',
+    message: 'Something important to share.',
+    variant: 'info',
+  },
+  render: ({ title, message, variant }) => (
+    <div
+      className={`max-w-3xl mx-auto rounded-lg border px-4 py-3 ${VARIANT_CLASS[variant]}`}
+      role="alert"
+    >
+      <div className="font-semibold">{renderRichText(title || '')}</div>
+      {message && <RichTextBlock text={message} className="mt-1 text-sm" />}
+    </div>
+  ),
+};

pagebuilder/components/widgets/app-store-badges-widget.tsx

@@ -0,0 +1,91 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+
+export type AppStoreBadgesWidgetProps = {
+  googlePlayHref: string;
+  appStoreHref: string;
+  googlePlaySrc: string;
+  appStoreSrc: string;
+  align: 'left' | 'center';
+  /**
+   * Start the badges at a page-grid column so they line up with an indented
+   * page header above (Mowing landing hero: 2nd column). "none" keeps the
+   * legacy container-edge alignment.
+   */
+  indent?: 'none' | '2' | '4';
+};
+
+// 12-col grid placement (gap 24px) matching the Figma page grid.
+const INDENT_CLASSES: Record<'2' | '4', string> = {
+  '2': 'lg:col-start-2 lg:col-span-10',
+  '4': 'lg:col-start-4 lg:col-span-9',
+};
+
+export const AppStoreBadgesWidget: ComponentConfig<AppStoreBadgesWidgetProps> = {
+  label: 'App store badges',
+  fields: {
+    googlePlayHref: { type: 'text', label: 'Google Play link' },
+    appStoreHref: { type: 'text', label: 'App Store link' },
+    googlePlaySrc: { type: 'text', label: 'Google Play badge image' },
+    appStoreSrc: { type: 'text', label: 'App Store badge image' },
+    align: {
+      type: 'select',
+      label: 'Align',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+      ],
+    },
+    indent: {
+      type: 'select',
+      label: 'Grid indent',
+      options: [
+        { label: 'None', value: 'none' },
+        { label: '2nd column', value: '2' },
+        { label: '4th column', value: '4' },
+      ],
+    },
+  },
+  defaultProps: {
+    googlePlayHref: '#',
+    appStoreHref: '#',
+    googlePlaySrc: '',
+    appStoreSrc: '',
+    align: 'left',
+    indent: 'none',
+  },
+  render: ({
+    googlePlayHref,
+    appStoreHref,
+    googlePlaySrc,
+    appStoreSrc,
+    align,
+    indent = 'none',
+  }) => (
+    <div
+      className={cn(
+        'container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8',
+        indent !== 'none' && 'lg:grid lg:grid-cols-12 lg:gap-6',
+      )}
+    >
+      <div
+        className={cn(
+          'flex flex-wrap items-center gap-4',
+          align === 'center' ? 'justify-center' : 'justify-start',
+          indent !== 'none' && INDENT_CLASSES[indent],
+        )}
+      >
+        {googlePlaySrc && (
+          <a href={googlePlayHref} target="_blank" rel="noopener noreferrer">
+            <img src={googlePlaySrc} alt="Get it on Google Play" className="h-16 w-auto" />
+          </a>
+        )}
+        {appStoreSrc && (
+          <a href={appStoreHref} target="_blank" rel="noopener noreferrer">
+            <img src={appStoreSrc} alt="Download on the App Store" className="h-16 w-auto" />
+          </a>
+        )}
+      </div>
+    </div>
+  ),
+};

pagebuilder/components/widgets/article-cards-render.tsx

@@ -0,0 +1,132 @@
+/** ArticleCards presentation, split from its Puck config so another module
+ *  can render the same grid from live data — the news feed does.
+ *  The config lives in article-cards-widget.tsx. */
+
+import type { CSSProperties } from 'react';
+import { cn } from '../../utils/widgetUtils';
+import { renderRichText } from './_internal/rich-text';
+import { TextLink } from './_shared/text-link';
+
+export type ArticleCardItem = {
+  imageUrl: string;
+  imageAlt: string;
+  eyebrow: string;
+  date: string;
+  title: string;
+  body: string;
+  href: string;
+};
+
+export type ArticleCardsWidgetProps = {
+  title: string;
+  viewAllLabel: string;
+  viewAllHref: string;
+  columns: '2' | '3' | '4';
+  items: ArticleCardItem[];
+};
+
+const COLS_CLASS: Record<ArticleCardsWidgetProps['columns'], string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+// Display tokens come from the per-tenant page-builder theme (see styles.css
+// `:root` for Recodo defaults and `.gca-root` for the GCA overrides). The
+// fallback clamp reproduces the prior `text-2xl sm:text-3xl lg:text-4xl`
+// steps: 24px on phones, 30px at 640px, 36px at 1024px. All style objects are
+// hoisted — constant tokens only, no per-render allocation.
+const HEADING_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+  color: 'var(--pb-heading-color)',
+  fontSize: 'var(--pb-heading-lg, clamp(1.5rem, 1.25rem + 1.5625vw, 2.25rem))',
+};
+
+const CARD_META_STYLE: CSSProperties = {
+  color: 'var(--pb-body-color)',
+  fontSize: 'var(--pb-card-meta-size, 0.75rem)',
+};
+
+const CARD_TITLE_STYLE: CSSProperties = {
+  fontFamily: 'var(--pb-display-font)',
+  fontWeight:
+    'var(--pb-card-title-weight, var(--pb-display-weight))' as CSSProperties['fontWeight'],
+  fontSize: 'var(--pb-card-title-size, 1.125rem)',
+  color: 'var(--pb-heading-color)',
+};
+
+const CARD_BODY_STYLE: CSSProperties = {
+  color: 'var(--pb-body-color)',
+  fontSize: 'var(--pb-card-body-size, 0.875rem)',
+};
+
+export function ArticleCardsGrid({
+  title,
+  viewAllLabel,
+  viewAllHref,
+  columns,
+  items,
+}: ArticleCardsWidgetProps) {
+  return (
+    <section className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
+      {(title || (viewAllLabel && viewAllHref)) && (
+        <div className="mb-8 flex items-end justify-between gap-4">
+          {title && (
+            <h2 className="leading-[var(--pb-heading-leading,1.15)]" style={HEADING_STYLE}>
+              {renderRichText(title)}
+            </h2>
+          )}
+          {viewAllLabel && viewAllHref && <TextLink label={viewAllLabel} href={viewAllHref} />}
+        </div>
+      )}
+      <div className={cn('grid gap-6 grid-cols-1', COLS_CLASS[columns])}>
+        {items?.map((item, idx) => (
+          // The whole card is one anchor, so every string inside it renders
+          // with `allowLinks: false` — a nested <a> is invalid HTML and
+          // browsers split the card link in two.
+          <a
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+            key={idx}
+            href={item.href || '#'}
+            className="group block"
+          >
+            <div className="relative aspect-[16/10] overflow-hidden rounded-xl bg-[var(--pb-surface-muted)]">
+              {item.imageUrl && (
+                <img
+                  src={item.imageUrl}
+                  alt={item.imageAlt || item.title}
+                  loading="lazy"
+                  className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+              )}
+              {item.eyebrow && (
+                <span className="absolute right-3 top-3 inline-flex w-fit items-center rounded-full bg-[var(--pb-card-tag-bg,rgb(255_255_255/0.9))] px-2.5 py-0.5 text-xs font-medium text-[var(--pb-card-tag-color,#1a353e)] backdrop-blur-sm">
+                  {renderRichText(item.eyebrow, { allowLinks: false })}
+                </span>
+              )}
+            </div>
+            <div className="mt-4">
+              {item.date && (
+                <span style={CARD_META_STYLE}>
+                  {renderRichText(item.date, { allowLinks: false })}
+                </span>
+              )}
+              {item.title && (
+                <h3 className="mt-3 leading-snug" style={CARD_TITLE_STYLE}>
+                  {renderRichText(item.title, { allowLinks: false })}
+                </h3>
+              )}
+              {item.body && (
+                <p className="mt-2 leading-relaxed" style={CARD_BODY_STYLE}>
+                  {renderRichText(item.body, { allowLinks: false })}
+                </p>
+              )}
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

pagebuilder/components/widgets/article-cards-widget.tsx

@@ -0,0 +1,72 @@
+/** ArticleCards widget: field definitions and config assembly.
+ *  Types and the grid itself live in article-cards-render.tsx. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { ArticleCardsGrid, type ArticleCardsWidgetProps } from './article-cards-render';
+
+export type { ArticleCardItem, ArticleCardsWidgetProps } from './article-cards-render';
+export { ArticleCardsGrid } from './article-cards-render';
+
+export const ArticleCardsWidget: ComponentConfig<ArticleCardsWidgetProps> = {
+  label: 'Article cards (image-top, with category & date)',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    viewAllLabel: { type: 'text', label: 'View-all link label' },
+    viewAllHref: { type: 'text', label: 'View-all link URL' },
+    columns: {
+      type: 'select',
+      label: 'Columns (desktop)',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Articles',
+      arrayFields: {
+        imageUrl: createImageField(mediaLibraryAdapter, 'Image'),
+        imageAlt: { type: 'text', label: 'Image alt text' },
+        eyebrow: { type: 'text', label: 'Category tag' },
+        date: { type: 'text', label: 'Date' },
+        title: { type: 'text', label: 'Title' },
+        // The whole card is a link, so markdown links in this copy render
+        // as their label text only — say so where the editor can see it.
+        body: { type: 'textarea', label: 'Body (links not supported here)' },
+        href: { type: 'text', label: 'Link' },
+      },
+      defaultItemProps: {
+        imageUrl: '',
+        imageAlt: '',
+        eyebrow: 'Category tag',
+        date: 'MMM DD, YYYY',
+        title: 'Article title goes here and may be on two lines',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        href: '#',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    title: 'Latest news, updates & events',
+    viewAllLabel: 'View all',
+    viewAllHref: '#',
+    columns: '4',
+    items: [
+      {
+        imageUrl: '',
+        imageAlt: '',
+        eyebrow: 'Category tag',
+        date: 'MMM DD, YYYY',
+        title: 'Article title goes here and may be on two lines',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        href: '#',
+      },
+    ],
+  },
+  render: ArticleCardsGrid,
+};