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

pagebuilder/components/editor/SchedulePanel.tsx

@@ -0,0 +1,85 @@
+/** Scheduled publish / unpublish controls inside the settings drawer. */
+
+import { fromLocalInput, toLocalInput } from '../../utils/datetime';
+
+interface Props {
+  publishAt: string | null;
+  unpublishAt: string | null;
+  onPublishAtChange: (iso: string | null) => void;
+  onUnpublishAtChange: (iso: string | null) => void;
+  onSave: () => void;
+  onClear: () => void;
+  saveDisabled: boolean;
+  clearDisabled: boolean;
+  error: string | null;
+}
+
+export function SchedulePanel({
+  publishAt,
+  unpublishAt,
+  onPublishAtChange,
+  onUnpublishAtChange,
+  onSave,
+  onClear,
+  saveDisabled,
+  clearDisabled,
+  error,
+}: Props) {
+  return (
+    <fieldset className="md:col-span-2 border rounded p-3 bg-white">
+      <legend className="px-1 text-sm font-medium text-gray-700">Schedule</legend>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <label className="flex flex-col gap-1">
+          <span className="text-xs text-gray-700">Publish at</span>
+          <input
+            type="datetime-local"
+            value={toLocalInput(publishAt)}
+            onChange={(e) => onPublishAtChange(fromLocalInput(e.target.value))}
+            className="border rounded px-2 py-1"
+            data-testid="schedule-publish-at"
+          />
+          <span className="text-xs text-gray-500">
+            Draft auto-publishes at this time. Cleared after the flip.
+          </span>
+        </label>
+        <label className="flex flex-col gap-1">
+          <span className="text-xs text-gray-700">Unpublish at</span>
+          <input
+            type="datetime-local"
+            value={toLocalInput(unpublishAt)}
+            onChange={(e) => onUnpublishAtChange(fromLocalInput(e.target.value))}
+            className="border rounded px-2 py-1"
+            data-testid="schedule-unpublish-at"
+          />
+          <span className="text-xs text-gray-500">
+            Published page reverts to draft at this time.
+          </span>
+        </label>
+      </div>
+      <div className="mt-2 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={saveDisabled}
+          className="px-3 py-1 text-sm rounded border hover:bg-gray-50 disabled:opacity-50"
+          data-testid="schedule-save"
+        >
+          Save schedule
+        </button>
+        <button
+          type="button"
+          onClick={onClear}
+          disabled={clearDisabled}
+          className="px-3 py-1 text-sm rounded border hover:bg-gray-50 disabled:opacity-50"
+        >
+          Clear
+        </button>
+        {error && (
+          <span className="text-xs text-red-600" data-testid="schedule-error">
+            {error}
+          </span>
+        )}
+      </div>
+    </fieldset>
+  );
+}

pagebuilder/components/editor/SeoSettingsPanel.tsx

@@ -0,0 +1,119 @@
+/** SEO metadata drawer: description, OG image, canonical, indexing, JSON-LD. */
+
+import type { ReactNode } from 'react';
+
+interface Props {
+  metaDescription: string;
+  onMetaDescriptionChange: (value: string) => void;
+  ogImage: string;
+  onOgImageChange: (value: string) => void;
+  canonicalUrl: string;
+  onCanonicalUrlChange: (value: string) => void;
+  indexInSearch: boolean;
+  onIndexInSearchChange: (value: boolean) => void;
+  jsonLdText: string;
+  jsonLdError: string | null;
+  onJsonLdChange: (value: string) => void;
+  /** Rendered inside the same grid, spanning both columns. */
+  schedule: ReactNode;
+}
+
+export function SeoSettingsPanel({
+  metaDescription,
+  onMetaDescriptionChange,
+  ogImage,
+  onOgImageChange,
+  canonicalUrl,
+  onCanonicalUrlChange,
+  indexInSearch,
+  onIndexInSearchChange,
+  jsonLdText,
+  jsonLdError,
+  onJsonLdChange,
+  schedule,
+}: Props) {
+  return (
+    <div className="border-b bg-gray-50 px-4 py-3 grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+      <label className="flex flex-col gap-1">
+        <span className="font-medium text-gray-700">Meta description</span>
+        <textarea
+          value={metaDescription}
+          onChange={(e) => onMetaDescriptionChange(e.target.value)}
+          maxLength={500}
+          rows={2}
+          placeholder="Shown in search results and link previews."
+          className="border rounded px-2 py-1"
+        />
+        <span className="text-xs text-gray-500">{metaDescription.length}/500</span>
+      </label>
+      <label className="flex flex-col gap-1">
+        <span className="font-medium text-gray-700">Open Graph image URL</span>
+        <input
+          type="text"
+          value={ogImage}
+          onChange={(e) => onOgImageChange(e.target.value)}
+          maxLength={500}
+          placeholder="https://… or /media/pagebuilder/…"
+          className="border rounded px-2 py-1 font-mono"
+        />
+        <span className="text-xs text-gray-500">
+          Paste a URL from the{' '}
+          <a href="/pagebuilder/media" className="text-blue-600 hover:underline">
+            media library
+          </a>
+          .
+        </span>
+      </label>
+      <label className="flex flex-col gap-1">
+        <span className="font-medium text-gray-700">Canonical URL</span>
+        <input
+          type="text"
+          value={canonicalUrl}
+          onChange={(e) => onCanonicalUrlChange(e.target.value)}
+          maxLength={500}
+          placeholder="Defaults to this page's own URL."
+          className="border rounded px-2 py-1 font-mono"
+        />
+        <span className="text-xs text-gray-500">
+          Override when this page is a duplicate of content hosted elsewhere.
+        </span>
+      </label>
+      <label className="flex items-start gap-2 mt-1">
+        <input
+          type="checkbox"
+          checked={indexInSearch}
+          onChange={(e) => onIndexInSearchChange(e.target.checked)}
+          className="mt-1"
+        />
+        <span className="flex flex-col">
+          <span className="font-medium text-gray-700">Allow search engines to index this page</span>
+          <span className="text-xs text-gray-500">
+            Uncheck to emit <code>noindex,nofollow</code> and exclude from sitemap.
+          </span>
+        </span>
+      </label>
+      <label className="flex flex-col gap-1 md:col-span-2">
+        <span className="font-medium text-gray-700">JSON-LD structured data</span>
+        <textarea
+          value={jsonLdText}
+          onChange={(e) => onJsonLdChange(e.target.value)}
+          rows={6}
+          placeholder='{"@context":"https://schema.org","@type":"Article",…}'
+          className="border rounded px-2 py-1 font-mono text-xs"
+        />
+        {jsonLdError ? (
+          <span className="text-xs text-red-600" data-testid="json-ld-error">
+            {jsonLdError}
+          </span>
+        ) : (
+          <span className="text-xs text-gray-500">
+            Embedded inside <code>&lt;script type="application/ld+json"&gt;</code>. Leave blank to
+            omit.
+          </span>
+        )}
+      </label>
+
+      {schedule}
+    </div>
+  );
+}

pagebuilder/components/layoutPuckConfig.tsx

@@ -0,0 +1,109 @@
+import type { Config } from '@puckeditor/core';
+
+import { registeredBlocks, registryVersion } from './blockRegistry';
+import { basePageConfig, getPuckConfig } from './puckConfig';
+import { SiteFooterWidget } from './widgets/site-footer-widget';
+import { SiteHeaderWidget } from './widgets/site-header-widget';
+
+let cachedConfig: Config | null = null;
+let cachedVersion = -1;
+
+/**
+ * The site-layout palette.
+ *
+ * A small, curated set — see `categories` below, which is what the palette is
+ * built from. The page-shaped root is replaced with a transparent pass-through
+ * so the host wrapper (`<header>`/`<footer>`) controls layout rather than
+ * Puck's default page container.
+ *
+ * A module's blocks only appear here if it registered with `layout: true` — a
+ * news feed belongs on a page, not in the site chrome.
+ *
+ * Memoised on the registry version, not unconditionally: caching on first call
+ * would drop any block registered after the first render. Call it inside a
+ * component, never at module scope.
+ */
+export function getLayoutPuckConfig(): Config {
+  if (cachedConfig && cachedVersion === registryVersion()) return cachedConfig;
+
+  const pageConfig = getPuckConfig();
+  const categories: Record<string, { title?: string; visible?: boolean; components: string[] }> = {
+    // Site chrome is registered here and NOT in the page palette: a nav bar
+    // dropped into the middle of a page would render a second one under the
+    // real header.
+    chrome: { title: 'Site chrome', components: ['SiteHeader', 'SiteFooter'] },
+    typography: { components: ['Heading', 'Text'] },
+    media: { components: ['Image'] },
+    actions: { components: ['Button'] },
+    // The partner strip under the GCA footer is this widget rather than markup
+    // baked into SiteFooter, so an author can reorder or drop it.
+    collections: { title: 'Collections', components: ['LogoCloud'] },
+    layout: { components: ['Spacer', 'Divider'] },
+    // Offered in the site-layout editor before the palette was curated, so a
+    // header or footer saved back then may contain one. Kept registered — Puck
+    // renders nothing at all for a type its config doesn't know, with no error
+    // and no placeholder, so removing them outright would quietly delete
+    // sections from live sites — but `visible: false` keeps them out of the
+    // palette, so nobody adds a new one.
+    _legacy: {
+      visible: false,
+      components: [
+        'PageHeader',
+        'Hero',
+        'EyebrowSection',
+        'MediaObject',
+        'CallToAction',
+        'FeatureCards',
+        'Faq',
+        'Stats',
+        'ArticleCards',
+        'ContactCards',
+        'ContactForm',
+        'Tags',
+      ],
+    },
+  };
+
+  // Built from the categories above — an allowlist, not "the page palette minus
+  // a couple". The subtractive form silently inherited every block added to the
+  // page: when the catalogue went from 20 to 56, the header/footer editor
+  // quietly started offering Leaderboard, Timeline and ~45 other page sections
+  // under Puck's catch-all "Other" group, because they had no category here.
+  // Site chrome is a deliberately small palette; it has to stay one by
+  // construction — and anything an author could once place here has to stay
+  // renderable, which is what `_legacy` above is for.
+  const components: Record<string, unknown> = {};
+  for (const name of Object.values(categories).flatMap((c) => c.components)) {
+    const block = (basePageConfig.components as Record<string, unknown>)[name];
+    if (block) components[name] = block;
+  }
+
+  components.SiteHeader = SiteHeaderWidget;
+  components.SiteFooter = SiteFooterWidget;
+
+  for (const registration of registeredBlocks()) {
+    if (!registration.layout) continue;
+    Object.assign(components, registration.blocks);
+    if (!registration.category) continue;
+    const { key, title } = registration.category;
+    categories[key] = {
+      title,
+      components: [...(categories[key]?.components ?? []), ...Object.keys(registration.blocks)],
+    };
+  }
+
+  cachedConfig = {
+    ...pageConfig,
+    root: {
+      fields: {},
+      defaultProps: {},
+      render: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    },
+    categories,
+    components,
+  } as unknown as Config;
+  cachedVersion = registryVersion();
+  return cachedConfig;
+}
+
+export const emptyLayoutData = { content: [], root: { props: {} } };

pagebuilder/components/media/MediaFilters.tsx

@@ -0,0 +1,83 @@
+/** Search, content-type, and size filter controls. */
+
+import { Input } from '@simple-module-py/ui/components/ui/input';
+
+import type { ListFilters } from './types';
+
+const CONTENT_TYPE_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Any type', value: '' },
+  { label: 'JPEG', value: 'image/jpeg' },
+  { label: 'PNG', value: 'image/png' },
+  { label: 'GIF', value: 'image/gif' },
+  { label: 'WebP', value: 'image/webp' },
+];
+
+interface Props {
+  filters: ListFilters;
+  onChange: (update: (previous: ListFilters) => ListFilters) => void;
+}
+
+export function MediaFilters({ filters, onChange }: Props) {
+  return (
+    <div className="flex flex-wrap gap-3 items-end mb-4">
+      <div className="flex-1 min-w-[200px]">
+        <label htmlFor="media-filter-search" className="block text-xs text-gray-500 mb-1">
+          Search
+        </label>
+        <Input
+          id="media-filter-search"
+          type="search"
+          value={filters.search}
+          onChange={(e) => onChange((f) => ({ ...f, search: e.target.value }))}
+          placeholder="Filename contains…"
+          className="w-full"
+        />
+      </div>
+      <div>
+        <label htmlFor="media-filter-type" className="block text-xs text-gray-500 mb-1">
+          Type
+        </label>
+        <select
+          id="media-filter-type"
+          value={filters.contentType}
+          onChange={(e) => onChange((f) => ({ ...f, contentType: e.target.value }))}
+          className="h-9 rounded-md border border-input bg-transparent px-2 text-sm shadow-xs"
+        >
+          {CONTENT_TYPE_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div>
+        <label htmlFor="media-filter-min-kb" className="block text-xs text-gray-500 mb-1">
+          Min KB
+        </label>
+        <Input
+          id="media-filter-min-kb"
+          type="number"
+          inputMode="numeric"
+          min={0}
+          value={filters.minKB}
+          onChange={(e) => onChange((f) => ({ ...f, minKB: e.target.value }))}
+          className="w-24"
+        />
+      </div>
+      <div>
+        <label htmlFor="media-filter-max-kb" className="block text-xs text-gray-500 mb-1">
+          Max KB
+        </label>
+        <Input
+          id="media-filter-max-kb"
+          type="number"
+          inputMode="numeric"
+          min={0}
+          value={filters.maxKB}
+          onChange={(e) => onChange((f) => ({ ...f, maxKB: e.target.value }))}
+          className="w-24"
+        />
+      </div>
+    </div>
+  );
+}

pagebuilder/components/media/MediaFolderSidebar.tsx

@@ -0,0 +1,97 @@
+/** Folder navigation and the upload-target folder input. */
+
+import { Input } from '@simple-module-py/ui/components/ui/input';
+
+interface FolderItemProps {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+function FolderItem({ label, active, onClick }: FolderItemProps) {
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={onClick}
+        className={`w-full text-left px-2 py-1 rounded truncate ${
+          active ? 'bg-blue-100 text-blue-900 font-medium' : 'hover:bg-gray-100 text-gray-700'
+        }`}
+        title={label}
+      >
+        {label}
+      </button>
+    </li>
+  );
+}
+
+interface Props {
+  folders: string[];
+  folderOptions: string[];
+  activeFolder: string | null;
+  onSelectFolder: (folder: string | null) => void;
+  uploadFolder: string;
+  onUploadFolderChange: (value: string) => void;
+}
+
+export function MediaFolderSidebar({
+  folders,
+  folderOptions,
+  activeFolder,
+  onSelectFolder,
+  uploadFolder,
+  onUploadFolderChange,
+}: Props) {
+  return (
+    <aside className="space-y-4">
+      <div>
+        <h2 className="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">
+          Folders
+        </h2>
+        <ul className="space-y-1 text-sm">
+          <FolderItem
+            label="All assets"
+            active={activeFolder === null}
+            onClick={() => onSelectFolder(null)}
+          />
+          <FolderItem
+            label="Unfiled"
+            active={activeFolder === ''}
+            onClick={() => onSelectFolder('')}
+          />
+          {folders.map((name) => (
+            <FolderItem
+              key={name}
+              label={name}
+              active={activeFolder === name}
+              onClick={() => onSelectFolder(name)}
+            />
+          ))}
+        </ul>
+      </div>
+      <div>
+        <label
+          htmlFor="media-upload-folder"
+          className="block text-sm font-semibold text-gray-600 mb-1"
+        >
+          Upload to folder
+        </label>
+        <Input
+          id="media-upload-folder"
+          type="text"
+          value={uploadFolder}
+          onChange={(e) => onUploadFolderChange(e.target.value)}
+          list="pagebuilder-folder-suggestions"
+          placeholder="e.g. marketing/heros"
+          className="w-full"
+        />
+        <datalist id="pagebuilder-folder-suggestions">
+          {folderOptions.map((name) => (
+            <option key={name} value={name} />
+          ))}
+        </datalist>
+        <p className="text-xs text-gray-500 mt-1">Leave blank to upload into Unfiled.</p>
+      </div>
+    </aside>
+  );
+}

pagebuilder/components/media/MediaGrid.tsx

@@ -0,0 +1,76 @@
+/** Thumbnail grid of media assets with copy-URL and delete actions. */
+
+import { Button } from '@simple-module-py/ui/components/ui/button';
+
+import type { MediaAssetRead } from '../../utils/api';
+import { formatBytes } from '../../utils/mediaFormat';
+
+interface Props {
+  assets: MediaAssetRead[];
+  loading: boolean;
+  copiedId: number | null;
+  onCopy: (asset: MediaAssetRead) => void;
+  onDelete: (id: number) => void;
+}
+
+export function MediaGrid({ assets, loading, copiedId, onCopy, onDelete }: Props) {
+  if (assets.length === 0 && !loading) {
+    return (
+      <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
+        No assets match the current filter.
+      </div>
+    );
+  }
+  return (
+    <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {assets.map((a) => (
+        <li key={a.id} className="overflow-hidden rounded-lg border bg-card shadow-xs">
+          <div className="flex aspect-square items-center justify-center overflow-hidden bg-muted">
+            {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-muted-foreground">{a.content_type}</span>
+            )}
+          </div>
+          <div className="p-2 text-xs space-y-1">
+            <div className="font-medium truncate" title={a.original_filename}>
+              {a.original_filename}
+            </div>
+            <div className="text-muted-foreground">
+              {formatBytes(a.size_bytes)}
+              {a.width && a.height ? ` · ${a.width}×${a.height}` : ''}
+            </div>
+            {a.folder && (
+              <div className="truncate text-muted-foreground" title={a.folder}>
+                {a.folder}
+              </div>
+            )}
+            <div className="flex gap-2 pt-1 flex-wrap">
+              <Button
+                variant="link"
+                size="sm"
+                className="h-auto p-0"
+                onClick={() => onCopy(a)}
+                title="Useful for the SEO og_image field or external use"
+              >
+                {copiedId === a.id ? 'Copied!' : 'Copy URL'}
+              </Button>
+              <Button
+                variant="link"
+                size="sm"
+                className="ml-auto h-auto p-0 text-destructive"
+                onClick={() => onDelete(a.id)}
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

pagebuilder/components/media/MediaHeader.tsx

@@ -0,0 +1,37 @@
+/** Media library actions: back-to-pages link and the file picker.
+ *
+ * Rendered into PageShell's `actions` slot, so the heading lives there
+ * rather than here.
+ */
+
+import { router } from '@inertiajs/react';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import type { ChangeEvent, RefObject } from 'react';
+
+interface Props {
+  fileInputRef: RefObject<HTMLInputElement | null>;
+  onFilesSelected: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function MediaHeader({ fileInputRef, onFilesSelected }: Props) {
+  return (
+    <>
+      <Button variant="outline" onClick={() => router.visit('/pagebuilder')}>
+        ← Pages
+      </Button>
+      {/* Stays a <label> wrapping the input: that pairing is what makes the
+          hidden file input clickable, and a <button> cannot wrap it. */}
+      <label className="inline-flex h-9 cursor-pointer items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-xs hover:bg-primary/90">
+        Upload
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          className="hidden"
+          onChange={onFilesSelected}
+        />
+      </label>
+    </>
+  );
+}