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

pagebuilder/components/widgets/timeline-render.tsx

@@ -0,0 +1,294 @@
+/** Timeline render — both the default "rows" list and the "blobs" variant.
+ *  Field definitions live in timeline-widget.tsx. */
+
+import type { CSSProperties } from 'react';
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { eyebrowTextStyle, maskStyle } from './_shared';
+
+import { MARKER_BLOB, type TimelineItem, type TimelineWidgetProps } from './timeline-layout';
+
+export function TimelineWidgetRender({
+  eyebrow,
+  title,
+  surface = 'default',
+  variant = 'rows',
+  blobMaskUrl = '',
+  markerMaskUrl = '',
+  markerImageUrl = '',
+  markerColor = '',
+  items,
+}: TimelineWidgetProps) {
+  // Blobs: a row of organic coloured shapes (BioGarden "Projekt-Fahrplan").
+  // The blob content (marker pill, title, body) is centred and inverse; an
+  // empty mask falls back to a plain ellipse so the layout still reads.
+  if (variant === 'blobs') {
+    const markerMaskCss = markerMaskUrl ? maskStyle(markerMaskUrl) : undefined;
+    // Per-entry shape, falling back to the section-wide mask. Built once
+    // per distinct url rather than per item so mapped entries sharing a
+    // shape share one style object.
+    const maskCache = new Map<string, ReturnType<typeof maskStyle>>();
+    const maskFor = (it: TimelineItem) => {
+      const url = it.shapeMaskUrl || blobMaskUrl;
+      if (!url) return undefined;
+      let css = maskCache.get(url);
+      if (!css) {
+        css = maskStyle(url);
+        maskCache.set(url, css);
+      }
+      return css;
+    };
+    return (
+      <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+        {/* Eyebrow in the left margin, title starting at a fixed page-grid line —
+					    `--pb-timeline-cols` (BioGarden Figma: the title begins at the grid's
+					    3rd edge, 228px into the 1344px content box). The fallback reproduces
+					    the previous inline eyebrow-then-title row. */}
+        <div className="mb-10 flex flex-col gap-2 sm:grid sm:grid-cols-[var(--pb-timeline-cols,max-content_1fr)] sm:items-baseline sm:gap-x-[var(--pb-timeline-gap,2rem)]">
+          {eyebrow && (
+            <p
+              style={{
+                ...eyebrowTextStyle(),
+                // This call site's previous literal was `uppercase
+                // tracking-wide` UNCONDITIONALLY, unlike the other
+                // eyebrows. `eyebrowTextStyle`'s shared fallbacks are
+                // `none`/`normal`, so without restating them here a
+                // tenant that hasn't opted into uppercase eyebrows would
+                // silently get sentence case where it never could before.
+                textTransform:
+                  'var(--pb-eyebrow-transform, uppercase)' as CSSProperties['textTransform'],
+                letterSpacing: 'var(--pb-eyebrow-tracking, 0.025em)',
+                color: 'var(--pb-heading-color,#161728)',
+              }}
+            >
+              {renderRichText(eyebrow)}
+            </p>
+          )}
+          {title && (
+            <h2
+              className={cn('leading-tight', !eyebrow && 'sm:col-span-2')}
+              style={{
+                color: 'var(--pb-heading-color)',
+                fontWeight: 'var(--pb-display-weight)',
+                fontFamily: 'var(--pb-display-font)',
+                fontSize: 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem))',
+              }}
+            >
+              <AccentText text={title} />
+            </h2>
+          )}
+        </div>
+        {/* A uniform gap (no negative margin) keeps the blobs at the Figma's
+					    ~415x343 with clear space between them; overlapping them pushed
+					    each shape ~13% oversize and made neighbours collide. */}
+        <div className="flex flex-wrap justify-center gap-6 lg:flex-nowrap lg:justify-between">
+          {items.map((it, idx) => (
+            // The marker tag is a SIBLING of the masked blob, never a child:
+            // the blob's mask clips its own descendants, and the tag
+            // deliberately straddles the blob's edge.
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+            <div key={idx} className="relative flex min-w-[360px] flex-1">
+              <div
+                className={cn(
+                  // Text is left-aligned and vertically centred, inset far
+                  // enough that the mask's curved edges never cross it (the
+                  // design indents ~22% from the blob's left, ~14% right).
+                  'flex w-full flex-col items-start justify-center py-16 pr-[14%] pl-[22%] text-left',
+                  !maskFor(it) && !it.shapeImageUrl && 'rounded-[50%]',
+                )}
+                style={
+                  it.shapeImageUrl
+                    ? {
+                        // Supplied artwork carries both the shape and its
+                        // fill; the copy simply lays out on top of it.
+                        // Deliberately NO backgroundColor here: the artwork is
+                        // a transparent cut-out, so a colour behind it would
+                        // show through everywhere the PNG is transparent and
+                        // the blob would render as a solid rectangle — which
+                        // defeats the whole point of supplying the shape.
+                        // The trade-off is that a 404 on the artwork paints
+                        // nothing; the seed uploads these assets, so a missing
+                        // one is a broken seed rather than a per-entry typo.
+                        backgroundImage: `url(${it.shapeImageUrl})`,
+                        backgroundSize: '100% 100%',
+                        backgroundRepeat: 'no-repeat',
+                        aspectRatio: '439 / 360',
+                        color: 'var(--pb-surface-contrast, #ffffff)',
+                      }
+                    : {
+                        // Fallback keeps the blob (and its forced contrast
+                        // text) visible when an editor leaves the color blank.
+                        backgroundColor: it.color || 'var(--pb-accent, #16a34a)',
+                        aspectRatio: '439 / 360',
+                        color: 'var(--pb-surface-contrast, #ffffff)',
+                        ...(maskFor(it) ?? {}),
+                      }
+                }
+              >
+                {/* The inline pill is the fallback for BOTH overlay forms —
+									    without the `markerImageUrl` guard, the documented
+									    "artwork replaces mask + colour" configuration (artwork
+									    set, mask empty) renders the year twice. */}
+                {it.marker && !markerMaskCss && !markerImageUrl && (
+                  <span
+                    className="mb-3 inline-flex items-center rounded-full bg-white px-4 py-1 text-sm font-bold"
+                    style={{ color: 'var(--pb-heading-color,#161728)' }}
+                  >
+                    {renderRichText(it.marker)}
+                  </span>
+                )}
+                {it.title && <p className="text-xl font-bold">{renderRichText(it.title)}</p>}
+                {it.body && (
+                  <RichTextBlock text={it.body} className="mt-2 text-sm leading-relaxed" />
+                )}
+                {it.meta && (
+                  <p className="mt-3 text-sm font-bold italic leading-relaxed">
+                    {renderRichText(it.meta)}
+                  </p>
+                )}
+              </div>
+              {it.marker && markerImageUrl && (
+                <span
+                  className="pointer-events-none absolute"
+                  style={{
+                    left: MARKER_BLOB.left,
+                    top: MARKER_BLOB.top,
+                    width: MARKER_BLOB.width,
+                    aspectRatio: MARKER_BLOB.aspect,
+                    transform: 'translate(-50%, -50%)',
+                  }}
+                >
+                  {/* Artwork is drawn already tilted, so no rotation here. */}
+                  <img
+                    src={markerImageUrl}
+                    alt=""
+                    aria-hidden="true"
+                    loading="lazy"
+                    className="absolute inset-0 size-full"
+                  />
+                  <span
+                    className="absolute inset-0 flex items-center justify-center px-2 text-center text-[18px] font-bold leading-tight"
+                    style={{
+                      color: 'var(--pb-timeline-marker-color, #ffffff)',
+                    }}
+                  >
+                    {renderRichText(it.marker)}
+                  </span>
+                </span>
+              )}
+              {it.marker && !markerImageUrl && markerMaskCss && (
+                <span
+                  className="pointer-events-none absolute"
+                  style={{
+                    left: MARKER_BLOB.left,
+                    top: MARKER_BLOB.top,
+                    width: MARKER_BLOB.width,
+                    aspectRatio: MARKER_BLOB.aspect,
+                    transform: 'translate(-50%, -50%)',
+                  }}
+                >
+                  {/* Tilted art layer… */}
+                  <span
+                    aria-hidden="true"
+                    className="absolute inset-0"
+                    style={{
+                      backgroundColor: markerColor || 'var(--pb-accent, #16a34a)',
+                      transform: `rotate(${MARKER_BLOB.rotation})`,
+                      ...markerMaskCss,
+                    }}
+                  />
+                  {/* …and an upright label over it, as in the design. */}
+                  <span
+                    className="absolute inset-0 flex items-center justify-center px-2 text-center text-[18px] font-bold leading-tight"
+                    style={{
+                      color: 'var(--pb-timeline-marker-color, #ffffff)',
+                    }}
+                  >
+                    {renderRichText(it.marker)}
+                  </span>
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+  return (
+    <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+      <div
+        className={cn(
+          'grid gap-y-6 md:grid-cols-[var(--pb-split-cols,1fr_2fr)] md:gap-x-[var(--pb-split-gap,2rem)]',
+          surface === 'muted' &&
+            'rounded-[12px] bg-[var(--pb-surface-muted,#f3f3f4)] px-8 py-12 lg:px-0 lg:py-20',
+        )}
+      >
+        {eyebrow && (
+          <p
+            className={cn(surface === 'muted' && 'lg:pl-12')}
+            style={{
+              // Eyebrow size/weight/case/tracking are theme-driven; the
+              // fallbacks keep today's look for tenants that don't set them.
+              ...eyebrowTextStyle('1.125rem', '400'),
+              color: 'var(--pb-heading-color,#161728)',
+            }}
+          >
+            {renderRichText(eyebrow)}
+          </p>
+        )}
+        <div
+          className={cn('max-w-[var(--pb-split-content-max,48rem)]', !eyebrow && 'md:col-span-2')}
+        >
+          {title && (
+            <h2
+              className="leading-tight"
+              style={{
+                color: 'var(--pb-heading-color)',
+                fontWeight: 'var(--pb-display-weight)',
+                fontFamily: 'var(--pb-display-font)',
+                fontSize: 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem))',
+              }}
+            >
+              {renderRichText(title)}
+            </h2>
+          )}
+          <div className="mt-8">
+            {items.map((it, idx) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              <div key={idx} className="border-b border-[var(--border,#dcdcdf)] py-6 first:pt-0">
+                {it.marker && (
+                  <p
+                    className="text-[1.75rem] font-medium leading-tight"
+                    style={{ color: 'var(--pb-heading-color,#161728)' }}
+                  >
+                    {renderRichText(it.marker)}
+                  </p>
+                )}
+                {it.title && (
+                  <p
+                    className="mt-2 text-xl font-medium"
+                    style={{ color: 'var(--pb-heading-color,#161728)' }}
+                  >
+                    {renderRichText(it.title)}
+                  </p>
+                )}
+                {it.body && (
+                  <RichTextBlock
+                    text={it.body}
+                    className="mt-3 text-lg leading-[var(--pb-body-leading,1.625)] text-[var(--pb-body-color,#686873)]"
+                  />
+                )}
+                {it.meta && (
+                  <p className="mt-2 text-lg font-bold italic leading-[var(--pb-body-leading,1.625)] text-[var(--pb-body-color,#686873)]">
+                    {renderRichText(it.meta)}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

pagebuilder/components/widgets/timeline-widget.tsx

@@ -0,0 +1,106 @@
+/** TimelineWidget: field definitions and config assembly.
+ *  Types live in timeline-layout.ts, render in timeline-render.tsx. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import type { TimelineWidgetProps } from './timeline-layout';
+import { TimelineWidgetRender } from './timeline-render';
+
+export type * from './timeline-layout';
+
+export const TimelineWidget: ComponentConfig<TimelineWidgetProps> = {
+  label: 'Timeline',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    title: { type: 'text', label: 'Title' },
+    surface: {
+      type: 'select',
+      label: 'Surface',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Muted (soft card)', value: 'muted' },
+      ],
+    },
+    variant: {
+      type: 'select',
+      label: 'Variant',
+      options: [
+        { label: 'Rows (list)', value: 'rows' },
+        { label: 'Blobs (organic shapes)', value: 'blobs' },
+      ],
+    },
+    blobMaskUrl: {
+      type: 'text',
+      label: 'Blob mask URL (organic shape — blobs variant)',
+    },
+    markerMaskUrl: {
+      type: 'text',
+      label: 'Marker mask URL (organic tag shape — blobs variant)',
+    },
+    markerImageUrl: {
+      type: 'text',
+      label: 'Marker artwork (transparent PNG — replaces mask + colour)',
+    },
+    markerColor: {
+      type: 'text',
+      label: 'Marker color (CSS — blobs variant)',
+    },
+    items: {
+      type: 'array',
+      label: 'Entries',
+      arrayFields: {
+        marker: { type: 'text', label: 'Marker (e.g. year)' },
+        title: { type: 'text', label: 'Title' },
+        body: { type: 'textarea', label: 'Body' },
+        meta: { type: 'text', label: 'Trailing line (e.g. date)' },
+        color: { type: 'text', label: 'Blob color (CSS — blobs variant)' },
+        shapeMaskUrl: {
+          type: 'text',
+          label: 'Blob shape mask URL (overrides the section mask)',
+        },
+        shapeImageUrl: {
+          type: 'text',
+          label: 'Blob artwork (transparent PNG — replaces mask + colour)',
+        },
+      },
+      defaultItemProps: {
+        marker: '2026',
+        title: 'Milestone',
+        body: '',
+        meta: '',
+        color: '',
+        shapeMaskUrl: '',
+        shapeImageUrl: '',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Incentives & Recognition',
+    surface: 'default',
+    variant: 'rows',
+    blobMaskUrl: '',
+    markerMaskUrl: '',
+    markerImageUrl: '',
+    markerColor: '',
+    items: [
+      {
+        marker: '2026',
+        title: 'Scientific Co-Authorship',
+        body: 'In the current year (2026) at the end of the project, the top data contributors will be invited to co-write and become co-authors in a data descriptor paper that will be submitted to a scientific journal.',
+      },
+      {
+        marker: '2027',
+        title: 'Additional Incentives',
+        body: 'In the next year (2027) the pilot project will include additionally some basic incentives for participants providing large quantities of high-quality quests.',
+      },
+    ],
+  },
+  // Column geometry is tenant-tunable via `--pb-split-cols`/`--pb-split-gap`
+  // (Mowing aligns the content to the 4th page-grid column) and the content is
+  // capped by `--pb-split-content-max` (Mowing → 774px per the Figma); the
+  // fallbacks keep tenants without the tokens on the prior layout.
+  render: TimelineWidgetRender,
+};

pagebuilder/components/widgets/under-construction-widget.tsx

@@ -0,0 +1,40 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { renderRichText } from './_internal/rich-text';
+
+export type UnderConstructionWidgetProps = {
+  message: string;
+};
+
+export const UnderConstructionWidget: ComponentConfig<UnderConstructionWidgetProps> = {
+  label: 'Under Construction',
+  fields: {
+    message: { type: 'text', label: 'Message' },
+  },
+  defaultProps: {
+    message: 'This section is under construction.',
+  },
+  render: ({ message }) => (
+    <div className="container mx-auto px-4">
+      <div className="max-w-xl mx-auto py-12 px-6 text-center border-2 border-dashed border-yellow-400 rounded-xl bg-yellow-50 dark:bg-yellow-950/30">
+        <svg
+          className="size-10 mx-auto mb-3 text-yellow-600 dark:text-yellow-400"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <title>Under construction</title>
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          />
+        </svg>
+        <p className="text-yellow-900 dark:text-yellow-100 font-medium">
+          {renderRichText(message)}
+        </p>
+      </div>
+    </div>
+  ),
+};

pagebuilder/components/widgets/video-widget.tsx

@@ -0,0 +1,103 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createCheckboxField } from '../../fields';
+import { EmptyPlaceholder } from './_shared';
+
+export type VideoWidgetProps = {
+  src: string;
+  autoplay: boolean;
+  controls: boolean;
+  loop: boolean;
+  muted: boolean;
+  width: 'full' | 'container' | 'narrow';
+};
+
+function isEmbeddable(url: string): {
+  type: 'youtube' | 'vimeo' | 'file';
+  src: string;
+} {
+  try {
+    const u = new URL(url);
+    if (u.hostname.includes('youtube.com') || u.hostname.includes('youtu.be')) {
+      const id = u.hostname.includes('youtu.be') ? u.pathname.slice(1) : u.searchParams.get('v');
+      return { type: 'youtube', src: `https://www.youtube.com/embed/${id}` };
+    }
+    if (u.hostname.includes('vimeo.com')) {
+      return {
+        type: 'vimeo',
+        src: `https://player.vimeo.com/video/${u.pathname.replace(/\//, '')}`,
+      };
+    }
+    return { type: 'file', src: url };
+  } catch {
+    return { type: 'file', src: url };
+  }
+}
+
+export const VideoWidget: ComponentConfig<VideoWidgetProps> = {
+  label: 'Video',
+  fields: {
+    src: { type: 'text', label: 'Video URL (YouTube, Vimeo, or file)' },
+    autoplay: createCheckboxField('Autoplay'),
+    controls: createCheckboxField('Show controls'),
+    loop: createCheckboxField('Loop'),
+    muted: createCheckboxField('Muted'),
+    width: {
+      type: 'select',
+      label: 'Width',
+      options: [
+        { label: 'Full', value: 'full' },
+        { label: 'Container', value: 'container' },
+        { label: 'Narrow (centered)', value: 'narrow' },
+      ],
+    },
+  },
+  defaultProps: {
+    src: '',
+    autoplay: false,
+    controls: true,
+    loop: false,
+    muted: false,
+    width: 'full',
+  },
+  render: ({ src, autoplay, controls, loop, muted, width = 'full' }) => {
+    if (!src) {
+      return <EmptyPlaceholder label="Video (no source)" />;
+    }
+    const wrap =
+      width === 'narrow' ? 'mx-auto max-w-3xl' : width === 'container' ? 'mx-auto max-w-5xl' : '';
+    const { type, src: embedSrc } = isEmbeddable(src);
+    if (type === 'file') {
+      return (
+        <div className="container mx-auto py-6">
+          <div className={wrap}>
+            <video
+              className="w-full rounded-lg"
+              src={embedSrc}
+              autoPlay={autoplay}
+              controls={controls}
+              loop={loop}
+              muted={muted}
+            >
+              <track kind="captions" />
+            </video>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="container mx-auto py-6">
+        <div className={wrap}>
+          <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
+            <iframe
+              className="absolute inset-0 w-full h-full rounded-lg"
+              src={embedSrc}
+              title="Embedded video"
+              allow="autoplay; encrypted-media; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

pagebuilder/components/widgets/welcome-widget.tsx

@@ -0,0 +1,38 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type WelcomeWidgetProps = {
+  greeting: string;
+  body: string;
+  signature: string;
+};
+
+export const WelcomeWidget: ComponentConfig<WelcomeWidgetProps> = {
+  label: 'Welcome',
+  fields: {
+    greeting: { type: 'text', label: 'Greeting' },
+    body: { type: 'textarea', label: 'Body' },
+    signature: { type: 'text', label: 'Signature' },
+  },
+  defaultProps: {
+    greeting: 'Welcome!',
+    body: "We're glad to have you here.",
+    signature: 'The team',
+  },
+  render: ({ greeting, body, signature }) => (
+    <div className="container mx-auto max-w-2xl py-12 px-4 text-center">
+      <h2 className="text-3xl sm:text-4xl lg:text-5xl font-light mb-4">
+        {renderRichText(greeting)}
+      </h2>
+      <RichTextBlock
+        text={body}
+        className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed"
+      />
+      {signature && (
+        <p className="mt-6 italic text-gray-500 dark:text-gray-400">
+          — {renderRichText(signature)}
+        </p>
+      )}
+    </div>
+  ),
+};

pagebuilder/contracts/__init__.py

@@ -0,0 +1,57 @@
+"""PageBuilder contracts — the public interface for other modules.
+
+Everything outside this package is internal and may change without a
+major version bump.
+"""
+
+from pagebuilder.contracts.schemas import (
+    BlockChange,
+    LayoutDetail,
+    LayoutRead,
+    LayoutRevisionDetail,
+    LayoutRevisionListResponse,
+    LayoutRevisionRead,
+    LayoutUpdate,
+    MediaAssetListResponse,
+    MediaAssetRead,
+    MediaAssetVariant,
+    MetadataChange,
+    PageCreate,
+    PageDetail,
+    PageListResponse,
+    PageNoteRequest,
+    PageRead,
+    PageRejectRequest,
+    PageRevisionDetail,
+    PageRevisionListResponse,
+    PageRevisionRead,
+    PageScheduleRequest,
+    PageUpdate,
+    RevisionDiffResponse,
+)
+
+__all__ = [
+    "BlockChange",
+    "LayoutDetail",
+    "LayoutRead",
+    "LayoutRevisionDetail",
+    "LayoutRevisionListResponse",
+    "LayoutRevisionRead",
+    "LayoutUpdate",
+    "MediaAssetListResponse",
+    "MediaAssetRead",
+    "MediaAssetVariant",
+    "MetadataChange",
+    "PageCreate",
+    "PageDetail",
+    "PageListResponse",
+    "PageNoteRequest",
+    "PageRead",
+    "PageRejectRequest",
+    "PageRevisionDetail",
+    "PageRevisionListResponse",
+    "PageRevisionRead",
+    "PageScheduleRequest",
+    "PageUpdate",
+    "RevisionDiffResponse",
+]

pagebuilder/contracts/events.py

@@ -0,0 +1,25 @@
+"""Domain events other modules can subscribe to."""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+
+from simple_module_core.events import Event
+
+
+@dataclass
+class PageDeleted(Event):
+    """A page and its revisions were removed.
+
+    Modules that key their own rows to a page must handle this. Nothing else
+    can: the framework gives each module its own ``MetaData``, so a
+    cross-module foreign key cannot be declared and there is no
+    ``ON DELETE CASCADE`` to fall back on.
+
+    It matters more than "a row points at nothing" suggests — SQLite reuses a
+    deleted row's id, so a stale reference does not stay dangling, it silently
+    re-attaches to whatever page is created next.
+    """
+
+    page_id: int
+    slug: str