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

pagebuilder/components/blocks/Image.tsx

@@ -0,0 +1,125 @@
+import type { ComponentConfig } from '@puckeditor/core';
+
+import {
+  buildSrcset,
+  DEFAULT_IMAGE_SIZES,
+  lookupAsset,
+  type MediaAssetRead,
+} from '../../utils/api';
+import { MediaPicker } from './MediaPicker';
+
+type AltKind = 'meaningful' | 'decorative';
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  altKind: AltKind;
+  width: number | null;
+  height: number | null;
+  objectFit: 'cover' | 'contain' | 'fill';
+  srcset: string;
+  sizes: string;
+}
+
+function resolveSizes(srcset: string, sizes: string): string | undefined {
+  if (sizes) return sizes;
+  // Browsers assume 100vw when sizes is omitted but srcset is present;
+  // setting it explicitly silences a console warning in dev tools.
+  if (srcset) return '100vw';
+  return undefined;
+}
+
+export const ImageBlock: ComponentConfig<ImageProps> = {
+  label: 'Image',
+  fields: {
+    src: {
+      type: 'custom',
+      render: ({ value, onChange, readOnly }) => (
+        <MediaPicker
+          value={(value as string) || ''}
+          onChange={(v) => onChange(v as ImageProps['src'])}
+          readOnly={readOnly}
+        />
+      ),
+    },
+    altKind: {
+      type: 'radio',
+      options: [
+        { label: 'Meaningful (describe the image)', value: 'meaningful' },
+        { label: 'Decorative (hidden from screen readers)', value: 'decorative' },
+      ],
+    },
+    alt: { type: 'text' },
+    width: { type: 'number' },
+    height: { type: 'number' },
+    objectFit: {
+      type: 'select',
+      options: [
+        { label: 'Cover', value: 'cover' },
+        { label: 'Contain', value: 'contain' },
+        { label: 'Fill', value: 'fill' },
+      ],
+    },
+    srcset: { type: 'textarea' },
+    sizes: { type: 'text' },
+  },
+  defaultProps: {
+    src: '',
+    alt: '',
+    altKind: 'meaningful',
+    width: null,
+    height: null,
+    objectFit: 'cover',
+    srcset: '',
+    sizes: '',
+  },
+  resolveData: async ({ props }, { changed }) => {
+    if (!changed.src || !props.src) return { props };
+    let asset: MediaAssetRead | undefined;
+    try {
+      asset = await lookupAsset(props.src);
+    } catch {
+      // Network failure mid-edit shouldn't break the editor — leave the
+      // src picked and let the author fill metadata manually.
+      return { props };
+    }
+    if (!asset) return { props };
+    return {
+      props: {
+        ...props,
+        width: asset.width ?? props.width,
+        height: asset.height ?? props.height,
+        srcset: buildSrcset(asset),
+        // Don't clobber values the author has set by hand.
+        sizes: props.sizes || DEFAULT_IMAGE_SIZES,
+        alt: props.alt || asset.original_filename.replace(/\.[^.]+$/, ''),
+      },
+    };
+  },
+  render: ({ src, alt, altKind, width, height, objectFit, srcset, sizes }) => {
+    if (!src) {
+      return (
+        <div className="my-3 p-6 border-2 border-dashed border-gray-300 rounded text-center text-gray-500 text-sm">
+          No image selected. Use the inspector to pick one.
+        </div>
+      );
+    }
+    const decorative = altKind === 'decorative';
+    return (
+      <img
+        src={src}
+        srcSet={srcset || undefined}
+        sizes={resolveSizes(srcset, sizes)}
+        alt={decorative ? '' : (alt ?? '')}
+        role={decorative ? 'presentation' : undefined}
+        aria-hidden={decorative ? true : undefined}
+        width={width ?? undefined}
+        height={height ?? undefined}
+        loading="lazy"
+        decoding="async"
+        style={{ objectFit, maxWidth: '100%' }}
+        className="my-3"
+      />
+    );
+  },
+};

pagebuilder/components/blocks/MediaPicker.tsx

@@ -0,0 +1,178 @@
+/**
+ * Custom Puck field that opens a modal grid of uploaded media assets.
+ * Selecting an asset emits its URL via `onChange` and stashes the full
+ * `MediaAssetRead` in the picked-asset cache so the Image block's
+ * `resolveData` can back-fill sibling props without a second fetch.
+ * A manually typed URL is also accepted; `resolveData` then falls back
+ * to a fresh list lookup.
+ */
+
+import { useEffect, useState } from 'react';
+
+import { listMedia, type MediaAssetRead, rememberPickedAsset } from '../../utils/api';
+
+interface MediaPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  readOnly?: boolean;
+}
+
+export function MediaPicker({ value, onChange, readOnly }: MediaPickerProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <input
+        type="text"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={readOnly}
+        placeholder="Pick from library or paste a URL"
+        className="w-full px-2 py-1.5 border rounded text-sm"
+      />
+      <div className="flex gap-2">
+        <button
+          type="button"
+          disabled={readOnly}
+          onClick={() => setOpen(true)}
+          className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+        >
+          Browse media…
+        </button>
+        {value && (
+          <button
+            type="button"
+            disabled={readOnly}
+            onClick={() => onChange('')}
+            className="px-3 py-1.5 text-sm rounded border hover:bg-gray-50 disabled:opacity-50"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      {value && (
+        <img src={value} alt="" className="max-h-24 rounded border bg-gray-50 object-contain" />
+      )}
+      {open && (
+        <MediaPickerModal
+          onPick={(asset) => {
+            rememberPickedAsset(asset);
+            onChange(asset.url);
+            setOpen(false);
+          }}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+function MediaPickerModal({
+  onPick,
+  onClose,
+}: {
+  onPick: (asset: MediaAssetRead) => void;
+  onClose: () => void;
+}) {
+  const [assets, setAssets] = useState<MediaAssetRead[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    listMedia()
+      .then((r) => {
+        if (!cancelled) setAssets(r.items);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Failed to load media');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Close on Escape so keyboard-only users aren't trapped.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    // Click-outside is a mouse affordance only. The keyboard path is the
+    // Escape handler registered above, plus the labelled Close button inside.
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Escape and the Close button are the keyboard paths
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Media library picker"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={onClose}
+    >
+      {/* Not an interactive element — the handler only stops the backdrop's
+          click-to-close from firing when the click lands inside the dialog. */}
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: only stops backdrop click-through */}
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: only stops backdrop click-through */}
+      <div
+        className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[80vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b p-4">
+          <h2 className="text-lg font-semibold">Pick an image</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-800 text-xl leading-none"
+            aria-label="Close picker"
+          >
+            ×
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto p-4">
+          {error && <div className="text-red-600 text-sm">{error}</div>}
+          {!error && assets === null && <div className="text-gray-500 text-sm">Loading…</div>}
+          {assets && assets.length === 0 && (
+            <div className="text-gray-500 text-sm">
+              No uploads yet. Upload images from the Media library page.
+            </div>
+          )}
+          {assets && assets.length > 0 && (
+            <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+              {assets.map((a) => (
+                <li key={a.id}>
+                  <button
+                    type="button"
+                    onClick={() => onPick(a)}
+                    className="w-full text-left border rounded overflow-hidden hover:ring-2 hover:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  >
+                    <div className="aspect-square bg-gray-100 flex items-center justify-center overflow-hidden">
+                      {a.content_type.startsWith('image/') ? (
+                        <img
+                          src={a.url}
+                          alt={a.original_filename}
+                          className="max-h-full max-w-full object-contain"
+                        />
+                      ) : (
+                        <span className="text-xs text-gray-500">{a.content_type}</span>
+                      )}
+                    </div>
+                    <div className="p-2 text-xs space-y-0.5">
+                      <div className="font-medium truncate" title={a.original_filename}>
+                        {a.original_filename}
+                      </div>
+                      <div className="text-gray-500">
+                        {a.width && a.height ? `${a.width}×${a.height}` : '—'}
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

pagebuilder/components/blocks/Spacer.tsx

@@ -0,0 +1,31 @@
+import type { ComponentConfig } from '@puckeditor/core';
+
+interface SpacerProps {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const heights: Record<SpacerProps['size'], number> = {
+  xs: 8,
+  sm: 16,
+  md: 32,
+  lg: 64,
+  xl: 128,
+};
+
+export const SpacerBlock: ComponentConfig<SpacerProps> = {
+  label: 'Spacer',
+  fields: {
+    size: {
+      type: 'select',
+      options: [
+        { label: 'XS', value: 'xs' },
+        { label: 'S', value: 'sm' },
+        { label: 'M', value: 'md' },
+        { label: 'L', value: 'lg' },
+        { label: 'XL', value: 'xl' },
+      ],
+    },
+  },
+  defaultProps: { size: 'md' },
+  render: ({ size }) => <div style={{ height: heights[size] }} aria-hidden />,
+};

pagebuilder/components/blocks/Text.tsx

@@ -0,0 +1,80 @@
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { cn } from '../../utils/widgetUtils';
+import { RichTextBlock } from '../widgets/_internal/rich-text';
+
+interface TextProps {
+  /**
+   * Light markdown, not HTML: `**bold**`, `*italic*`, `` `code` ``,
+   * `[label](href)`, `- ` bullets and blank-line paragraphs. See the note on
+   * the field below for why this isn't Puck's `richtext`.
+   */
+  text: string;
+  size: 'sm' | 'base' | 'lg' | 'xl';
+  align: 'left' | 'center' | 'right';
+}
+
+const sizeClass: Record<TextProps['size'], string> = {
+  sm: 'text-sm',
+  base: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+};
+
+// Spelled out rather than `text-${align}` — Tailwind's scanner cannot see an
+// interpolated class name. See the same note in Heading.
+const alignClass: Record<TextProps['align'], string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+export const TextBlock: ComponentConfig<TextProps> = {
+  label: 'Text',
+  fields: {
+    /**
+     * Upstream uses Puck's `richtext` field here, which stores HTML and hands
+     * it to Puck to render. This stays a textarea rendered through
+     * `RichTextBlock`, which parses light markdown into React elements.
+     *
+     * Same expressive range for an author — bold, italic, code, links, bullets,
+     * paragraphs — but nothing on a published page is ever built from stored
+     * markup, so there is no injection surface to sanitise. That matters more
+     * here than upstream: pages reach the public viewer through a review
+     * workflow, and the CSP that would otherwise be the backstop is an
+     * operator-tunable setting that can be emptied. It also keeps this block
+     * consistent with the other 50, which all render copy this way.
+     */
+    text: { type: 'textarea', label: 'Text (markdown)' },
+    size: {
+      type: 'select',
+      label: 'Size',
+      options: [
+        { label: 'Small', value: 'sm' },
+        { label: 'Base', value: 'base' },
+        { label: 'Large', value: 'lg' },
+        { label: 'Extra large', value: 'xl' },
+      ],
+    },
+    align: {
+      type: 'radio',
+      label: 'Alignment',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+        { label: 'Right', value: 'right' },
+      ],
+    },
+  },
+  defaultProps: { text: 'Some descriptive text.', size: 'base', align: 'left' },
+  // `size` is defaulted here too: every Text already on a page predates the
+  // field and arrives undefined, which would index `sizeClass` to `undefined`.
+  render: ({ text, size = 'base', align = 'left' }) => (
+    <div className="container mx-auto px-4 py-2">
+      <RichTextBlock
+        text={text}
+        className={cn('leading-relaxed', sizeClass[size], alignClass[align])}
+      />
+    </div>
+  ),
+};

pagebuilder/components/editor/PageEditorToolbar.tsx

@@ -0,0 +1,169 @@
+/** Top toolbar: title/slug inputs, status badges, and workflow actions. */
+
+import { router } from '@inertiajs/react';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import { Input } from '@simple-module-py/ui/components/ui/input';
+
+import type { PageDetail } from '../../utils/api';
+import { formatSaveLabel, type SaveState } from '../../utils/editorSnapshot';
+import { slugify } from '../../utils/slugify';
+import { ScheduledBadge } from '../ScheduledBadge';
+import { StatusBadge } from '../StatusBadge';
+
+interface Props {
+  pageId: number | null;
+  title: string;
+  onTitleChange: (value: string) => void;
+  effectiveSlug: string;
+  onSlugChange: (value: string) => void;
+  status: PageDetail['status'];
+  publishAt: string | null;
+  unpublishAt: string | null;
+  saveState: SaveState;
+  isDirty: boolean;
+  lastSavedAt: Date | null;
+  autosaveError: string | null;
+  revisionCount: number;
+  busy: boolean;
+  message: string | null;
+  onToggleSettings: () => void;
+  onToggleHistory: () => void;
+  onSave: () => void;
+  onPublish: () => void;
+  onUnpublish: () => void;
+  onSubmitForReview: () => void;
+  onApprove: () => void;
+  onReject: () => void;
+}
+
+export function PageEditorToolbar({
+  pageId,
+  title,
+  onTitleChange,
+  effectiveSlug,
+  onSlugChange,
+  status,
+  publishAt,
+  unpublishAt,
+  saveState,
+  isDirty,
+  lastSavedAt,
+  autosaveError,
+  revisionCount,
+  busy,
+  message,
+  onToggleSettings,
+  onToggleHistory,
+  onSave,
+  onPublish,
+  onUnpublish,
+  onSubmitForReview,
+  onApprove,
+  onReject,
+}: Props) {
+  const saveStateClass =
+    saveState === 'error'
+      ? 'text-xs text-destructive'
+      : isDirty
+        ? 'text-xs text-amber-700'
+        : 'text-xs text-muted-foreground';
+
+  return (
+    <div className="flex flex-wrap items-center gap-3 border-b bg-background px-4 py-2">
+      <Button variant="link" size="sm" onClick={() => router.visit('/pagebuilder')}>
+        ← All pages
+      </Button>
+      {/* Explicit widths, not min-w: Input's base class list carries `w-full`,
+          which would stretch these across the row and wrap the toolbar onto
+          three lines. cn()'s tailwind-merge resolves w-64/w-52 over w-full. */}
+      <Input
+        type="text"
+        value={title}
+        onChange={(e) => onTitleChange(e.target.value)}
+        placeholder="Page title"
+        className="h-8 w-64 shrink-0 text-sm font-medium"
+      />
+      <Input
+        type="text"
+        value={effectiveSlug}
+        onChange={(e) => onSlugChange(slugify(e.target.value))}
+        placeholder="slug"
+        className="h-8 w-52 shrink-0 font-mono text-sm"
+      />
+      <StatusBadge status={status} />
+      <ScheduledBadge status={status} publishAt={publishAt} unpublishAt={unpublishAt} />
+      {pageId !== null && (
+        <span
+          className={saveStateClass}
+          data-testid="autosave-status"
+          title={autosaveError ?? undefined}
+        >
+          {formatSaveLabel(saveState, isDirty, lastSavedAt, autosaveError)}
+        </span>
+      )}
+      <div className="ml-auto flex gap-2">
+        <Button variant="outline" size="sm" onClick={onToggleSettings}>
+          SEO
+        </Button>
+        <Button variant="outline" size="sm" disabled={pageId === null} onClick={onToggleHistory}>
+          History ({revisionCount})
+        </Button>
+        <Button variant="outline" size="sm" disabled={busy} onClick={onSave}>
+          Save draft
+        </Button>
+        {status === 'published' && (
+          <Button variant="outline" size="sm" disabled={busy} onClick={onUnpublish}>
+            Unpublish
+          </Button>
+        )}
+        {status === 'draft' && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-amber-500 text-amber-700 hover:bg-amber-50"
+            disabled={busy || pageId === null}
+            onClick={onSubmitForReview}
+          >
+            Submit for review
+          </Button>
+        )}
+        {status === 'submitted_for_review' && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-destructive text-destructive hover:bg-destructive/10"
+              disabled={busy}
+              onClick={onReject}
+            >
+              Reject
+            </Button>
+            <Button
+              size="sm"
+              className="bg-green-600 text-white hover:bg-green-700"
+              disabled={busy}
+              onClick={onApprove}
+            >
+              Approve
+            </Button>
+          </>
+        )}
+        <Button size="sm" disabled={busy} onClick={onPublish}>
+          Publish
+        </Button>
+        {/* Stays an <a>: the e2e selects it with getByRole('link', {name: /^view$/i}). */}
+        {status === 'published' && pageId !== null && (
+          <a
+            href={`/p/${effectiveSlug}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex h-8 items-center rounded-md border px-3 text-sm hover:bg-accent"
+          >
+            View
+          </a>
+        )}
+      </div>
+      {message && <span className="mt-1 w-full text-sm text-muted-foreground">{message}</span>}
+    </div>
+  );
+}

pagebuilder/components/editor/RevisionHistoryPanel.tsx

@@ -0,0 +1,95 @@
+/** Revision history drawer with per-revision compare and restore. */
+
+import type { PageRevisionRead, RevisionDiff, RevisionEvent } from '../../utils/api';
+import { DiffSummary } from '../DiffSummary';
+
+const EVENT_LABELS: Record<RevisionEvent, string> = {
+  publish: 'Published',
+  unpublish: 'Unpublished',
+  submit: 'Submitted for review',
+  approve: 'Approved',
+  reject: 'Rejected',
+};
+
+// Revision events whose ``data`` snapshot matches what /p/{slug} served.
+const RESTORABLE_EVENTS: ReadonlySet<RevisionEvent> = new Set(['publish', 'approve']);
+
+interface Props {
+  revisions: PageRevisionRead[];
+  activeDiff: RevisionDiff | null;
+  diffError: string | null;
+  busy: boolean;
+  onCompare: (beforeId: number, afterId: number) => void;
+  onRestore: (revisionId: number) => void;
+}
+
+export function RevisionHistoryPanel({
+  revisions,
+  activeDiff,
+  diffError,
+  busy,
+  onCompare,
+  onRestore,
+}: Props) {
+  return (
+    <div className="border-b bg-gray-50 px-4 py-3 text-sm">
+      {revisions.length === 0 ? (
+        <p className="text-gray-500">No history yet. Publish or submit to record one.</p>
+      ) : (
+        <ul className="space-y-1 max-h-48 overflow-y-auto">
+          {revisions.map((r, idx) => {
+            // Revisions are sorted newest-first, so the "previous" is
+            // the next index. The last item has no predecessor.
+            const previous = revisions[idx + 1];
+            const isOpen =
+              activeDiff !== null &&
+              activeDiff.after_id === r.id &&
+              previous !== undefined &&
+              activeDiff.before_id === previous.id;
+            return (
+              <li key={r.id} className="flex items-start justify-between gap-3 py-1">
+                <div className="flex-1 min-w-0">
+                  <span className="font-medium">{EVENT_LABELS[r.event] ?? r.event}</span>
+                  <span className="text-gray-700 ml-2">{r.title}</span>
+                  <span className="text-gray-500 ml-2">
+                    {new Date(r.created_at).toLocaleString()}
+                  </span>
+                  {r.created_by && <span className="text-gray-500 ml-2">by {r.created_by}</span>}
+                  {r.note && <div className="text-gray-800 mt-0.5 break-words">Note: {r.note}</div>}
+                </div>
+                <div className="flex gap-3 shrink-0">
+                  {previous && (
+                    <button
+                      type="button"
+                      onClick={() => onCompare(previous.id, r.id)}
+                      className="text-blue-600 hover:underline"
+                      data-testid={`compare-${r.id}`}
+                    >
+                      {isOpen ? 'Hide diff' : 'Compare'}
+                    </button>
+                  )}
+                  {RESTORABLE_EVENTS.has(r.event) && (
+                    <button
+                      type="button"
+                      disabled={busy}
+                      onClick={() => onRestore(r.id)}
+                      className="text-blue-600 hover:underline disabled:opacity-50"
+                    >
+                      Restore as draft
+                    </button>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {diffError && (
+        <p className="mt-2 text-xs text-red-600" data-testid="diff-error">
+          {diffError}
+        </p>
+      )}
+      {activeDiff && <DiffSummary diff={activeDiff} />}
+    </div>
+  );
+}