simple-module-pagebuilder 0.0.8__tar.gz → 0.0.10__tar.gz

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: simple_module_pagebuilder
-Version: 0.0.8
+Version: 0.0.10
 Summary: Drag-and-drop visual page builder for simple_module apps
 Project-URL: Repository, https://github.com/antosubash/simple_module_python_modules
 Author-email: Anto Subash <antosubash@live.com>

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-module-py/pagebuilder",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "private": true,
   "description": "Frontend assets for the PageBuilder module",
   "peerDependencies": {

simple_module_pagebuilder-0.0.10/pagebuilder/components/editor/noHeaderActions.tsx

@@ -0,0 +1,9 @@
+/**
+ * Puck `overrides` that drop the header's own "Publish" (#59).
+ *
+ * Both editors have a toolbar that owns saving and publishing, so Puck's
+ * button would be a second, duplicate control. The title, undo/redo and
+ * sidebar toggles stay. Module scope so Puck sees a stable object rather than
+ * a fresh one on every render.
+ */
+export const NO_HEADER_ACTIONS = { headerActions: () => <></> };

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/puckConfig.test.tsx

@@ -4,7 +4,7 @@ import { translate } from '../utils/i18n';
 import { type AnyBlock, registerPuckBlocks, resetBlockRegistry } from './blockRegistry';
 import { getLayoutPuckConfig } from './layoutPuckConfig';
 import { localizeConfig } from './localizeConfig';
-import { getPuckConfig } from './puckConfig';
+import { getPuckConfig, withRootTitle } from './puckConfig';
 
 const stub = { render: () => null } as unknown as AnyBlock;
 
@@ -139,3 +139,15 @@ describe('getLayoutPuckConfig', () => {
     expect(Object.keys(getLayoutPuckConfig().components)).toContain('Banner');
   });
 });
+
+describe('withRootTitle', () => {
+  it('defaults the root title to the page’s own, not "Untitled page"', () => {
+    const config = withRootTitle(getPuckConfig(), 'About us');
+    expect(config.root?.defaultProps).toEqual({ title: 'About us', width: 'contained' });
+  });
+
+  it('leaves the config alone when the page has no title yet', () => {
+    const base = getPuckConfig();
+    expect(withRootTitle(base, null)).toBe(base);
+  });
+});

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/puckConfig.tsx

@@ -106,6 +106,20 @@ export function getPuckConfig(): PageConfig {
   return cachedConfig;
 }
 
+/**
+ * Seed the root `title` field from the page row (#59).
+ *
+ * Puck fills a missing root prop from `defaultProps`, so a document saved
+ * without `root.props.title` — every seeded one — opened as "Untitled page"
+ * even though the page has a title. Defaulting to the page's own title shows
+ * the right thing without rewriting a stored document nobody has edited.
+ */
+export function withRootTitle(config: PageConfig, title: string | null | undefined): PageConfig {
+  if (!title) return config;
+  const defaultProps = { ...config.root?.defaultProps, title } as PageRootProps;
+  return { ...config, root: { ...config.root, defaultProps } };
+}
+
 export const emptyData = {
   content: [],
   root: { props: { title: 'Untitled page', width: 'contained' } },

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/widgets/_internal/eyebrow-split-section.tsx

@@ -54,7 +54,7 @@ export function EyebrowSplitSection({
             {renderRichText(eyebrow)}
           </p>
         )}
-        <div className="max-w-[var(--pb-split-content-max,none)]">
+        <div className="min-w-0 max-w-[var(--pb-split-content-max,none)]">
           {/* AccentText, not bare renderRichText: this is a display heading on
 					    `--pb-display-weight`, where a plain <strong>'s relative `bolder`
 					    can compute to no visible change. */}

simple_module_pagebuilder-0.0.10/pagebuilder/components/widgets/_internal/inline-image.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+// A link href or image src: ONE level of balanced parentheses, so Wikipedia's
+// `..._(disambiguation)` survives (see LINK_PATTERN in rich-text).
+export const HREF_SOURCE = String.raw`(?:[^\s()]|\([^\s()]*\))+`;
+/** `![alt](src)` — the alt may be empty, as a decorative logo's is. */
+export const IMAGE_SOURCE = String.raw`!\[[^\]]*\]\(${HREF_SOURCE}\)`;
+const IMAGE_EXACT = new RegExp(String.raw`^!\[([^\]]*)\]\((${HREF_SOURCE})\)$`);
+
+/**
+ * Only http(s) and scheme-less sources (`/media/...`, `logo.png`) load. Editor
+ * copy is not fully trusted, so `data:`, `javascript:` and the rest fall
+ * through to literal text, the same way an unsafe link href does.
+ */
+function isSafeImageSrc(src: string): boolean {
+  const scheme = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(src);
+  return !scheme || ['http', 'https'].includes(scheme[1].toLowerCase());
+}
+
+/**
+ * `![alt](src)` → `<img>`, or `null` when the text is not exactly one image or
+ * its src is unsafe (#66). Inline, so a line of logos sits in a row and a
+ * paragraph of its own stacks; `max-w-full` keeps a large one inside the column.
+ */
+export function renderInlineImage(markdown: string, key: string): ReactNode | null {
+  const match = IMAGE_EXACT.exec(markdown);
+  if (!match || !isSafeImageSrc(match[2])) return null;
+  return (
+    <img
+      key={key}
+      src={match[2]}
+      alt={match[1]}
+      loading="lazy"
+      className="inline-block h-auto max-w-full align-middle"
+    />
+  );
+}

simple_module_pagebuilder-0.0.10/pagebuilder/components/widgets/_internal/markdown-list.tsx

@@ -0,0 +1,35 @@
+import type { MarkdownListItem } from '../../../utils/markdown';
+import { renderRichText } from './rich-text';
+
+// Nested levels switch to hollow bullets, the way browsers mark a second level.
+// The marker position is inherited explicitly: preflight's `list-style: none`
+// resets it to `outside`, so under the Markdown widget's `list-inside` list
+// the nested markers hung back in line with their parent's.
+const NESTED_CLASS = 'list-[circle] [list-style-position:inherit] pl-5 mt-1 space-y-1';
+
+/**
+ * A parsed `- ` list, nesting included (#66). The Markdown widget, FAQ answers
+ * and widget textareas all render bullets through this, so a nested item can't
+ * work in one of them and flatten in another.
+ */
+export function MarkdownList({
+  items,
+  className,
+}: {
+  items: MarkdownListItem[];
+  className?: string;
+}) {
+  return (
+    <ul className={className}>
+      {items.map((item, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: list items are positional slices of the source text
+        <li key={i}>
+          {renderRichText(item.text)}
+          {item.children.length > 0 && (
+            <MarkdownList items={item.children} className={NESTED_CLASS} />
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/widgets/_internal/rich-text.tsx

@@ -5,6 +5,8 @@ import {
   parseMarkdownBlocks,
 } from '../../../utils/markdown';
 import { cn } from '../../../utils/widgetUtils';
+import { HREF_SOURCE, IMAGE_SOURCE, renderInlineImage } from './inline-image';
+import { MarkdownList } from './markdown-list';
 
 // `[label](href)`. Split first, so a link's label can still carry the emphasis
 // markers the inline tokenizer understands ("[**Datenschutz**](/x)").
@@ -15,7 +17,15 @@ import { cn } from '../../../utils/widgetUtils';
 // leaking the remainder onto the page as stray literal text. Anything the
 // pattern can't parse falls through unchanged and renders as literal text, so
 // malformed input is always visible rather than dropped.
-const LINK_PATTERN = /(\[[^\]]+\]\((?:[^\s()]|\([^\s()]*\))+\))/g;
+//
+// Images (#66) split out the same way, a linked image `[![alt](src)](href)`
+// first: tried as a plain link, its label would end at the image's own `]`.
+const LINK_PATTERN = new RegExp(
+  String.raw`(\[${IMAGE_SOURCE}\]\(${HREF_SOURCE}\)|${IMAGE_SOURCE}|\[[^\]]+\]\(${HREF_SOURCE}\))`,
+  'g',
+);
+const LINKED_IMAGE = new RegExp(String.raw`^\[(${IMAGE_SOURCE})\]\((${HREF_SOURCE})\)$`);
+const LINK = new RegExp(String.raw`^\[([^\]]+)\]\((${HREF_SOURCE})\)$`);
 
 // `<strong>`'s UA default `font-weight: bolder` is RELATIVE — inside
 // `font-light` (300) copy it computes to 400 and the bold is invisible. An
@@ -135,7 +145,18 @@ function renderRichTextNodes(text: string, opts?: RichTextOptions): ReactNode[]
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i];
     if (!part) continue;
-    const match = /^\[([^\]]+)\]\(((?:[^\s()]|\([^\s()]*\))+)\)$/.exec(part);
+    const image = renderInlineImage(part, `i-${i}`);
+    if (image) {
+      out.push(image);
+      continue;
+    }
+    const linked = LINKED_IMAGE.exec(part);
+    const linkedImage = linked && renderInlineImage(linked[1], `i-${i}`);
+    if (linked && linkedImage && isSafeHref(linked[2])) {
+      out.push(linksAllowed ? anchor(linked[2], linkedImage, `l-${i}`) : linkedImage);
+      continue;
+    }
+    const match = LINK.exec(part);
     if (match && isSafeHref(match[2])) {
       const [, label, href] = match;
       // Inside an `<a>`/`<button>`/`<summary>` an anchor can't be nested, so
@@ -145,19 +166,7 @@ function renderRichTextNodes(text: string, opts?: RichTextOptions): ReactNode[]
         out.push(...renderEmphasis(label, `u-${i}`, opts));
         continue;
       }
-      // Scheme-relative `//host/...` is off-site too — it must get the
-      // same new-tab + noopener treatment as absolute http(s) links.
-      const external = /^(?:https?:)?\/\//.test(href);
-      out.push(
-        <a
-          key={`l-${i}`}
-          href={href}
-          className="underline underline-offset-2 text-[color:var(--pb-prose-link-color,inherit)]"
-          {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-        >
-          {renderEmphasis(label, `l-${i}`, opts)}
-        </a>,
-      );
+      out.push(anchor(href, renderEmphasis(label, `l-${i}`, opts), `l-${i}`));
       continue;
     }
     out.push(...renderEmphasis(part, `t-${i}`, opts));
@@ -165,6 +174,22 @@ function renderRichTextNodes(text: string, opts?: RichTextOptions): ReactNode[]
   return out;
 }
 
+function anchor(href: string, children: ReactNode, key: string): ReactNode {
+  // Scheme-relative `//host/...` is off-site too — it must get the
+  // same new-tab + noopener treatment as absolute http(s) links.
+  const external = /^(?:https?:)?\/\//.test(href);
+  return (
+    <a
+      key={key}
+      href={href}
+      className="underline underline-offset-2 text-[color:var(--pb-prose-link-color,inherit)]"
+      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+    >
+      {children}
+    </a>
+  );
+}
+
 export type RichTextBlockProps = {
   text: string | undefined;
   className?: string;
@@ -224,12 +249,11 @@ function renderWithSoftBreaks(text: string): ReactNode[] {
 function renderBlock(block: MarkdownBlock, key: number): ReactNode {
   if (block.type === 'ul') {
     return (
-      <ul key={key} className="list-disc pl-5 [&:not(:first-child)]:mt-3">
-        {block.items.map((li, j) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: list items are positional slices of the source text
-          <li key={j}>{renderRichText(li)}</li>
-        ))}
-      </ul>
+      <MarkdownList
+        key={key}
+        items={block.items}
+        className="list-disc pl-5 [&:not(:first-child)]:mt-3"
+      />
     );
   }
   return (

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/widgets/faq-render.tsx

@@ -7,6 +7,7 @@ import { parseMarkdownBlocks } from '../../utils/markdown';
 import { cn } from '../../utils/widgetUtils';
 import { AccentText } from './_internal/accent-text';
 import { DisclosureChevron } from './_internal/disclosure-chevron';
+import { MarkdownList } from './_internal/markdown-list';
 import { RichTextBlock, renderRichText } from './_internal/rich-text';
 import { eyebrowTextStyle } from './_shared';
 
@@ -59,13 +60,12 @@ function Answer({ text, inverse }: { text: string; inverse?: boolean }) {
     >
       {parseMarkdownBlocks(text || '').map((block, i) =>
         block.type === 'ul' ? (
-          // biome-ignore lint/suspicious/noArrayIndexKey: blocks are positional slices of one string, re-derived each render
-          <ul key={i} className="list-disc pl-5 [&:not(:first-child)]:mt-3">
-            {block.items.map((li, j) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: list items are positional slices too
-              <li key={j}>{renderRichText(li)}</li>
-            ))}
-          </ul>
+          <MarkdownList
+            // biome-ignore lint/suspicious/noArrayIndexKey: blocks are positional slices of one string, re-derived each render
+            key={i}
+            items={block.items}
+            className="list-disc pl-5 [&:not(:first-child)]:mt-3"
+          />
         ) : (
           // biome-ignore lint/suspicious/noArrayIndexKey: blocks are positional slices of one string, re-derived each render
           <p key={i} className="[&:not(:first-child)]:mt-3">
@@ -160,7 +160,9 @@ function SplitFaq({
         >
           {renderRichText(eyebrow)}
         </p>
-        <div className="max-w-[var(--pb-split-content-max,none)]">
+        {/* min-w-0: a grid item's `min-width: auto` let a wide Markdown image
+            in an answer push the 2fr track past the coloured band. */}
+        <div className="min-w-0 max-w-[var(--pb-split-content-max,none)]">
           <div className="max-w-[var(--pb-faq-intro-max,none)]">
             {/* AccentText, not bare renderRichText: these are display headings
                 on `--pb-display-weight`, where a plain <strong>'s relative

simple_module_pagebuilder-0.0.10/pagebuilder/components/widgets/markdown-widget.test.tsx

@@ -0,0 +1,68 @@
+import type { ReactElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { MarkdownWidget } from './markdown-widget';
+
+const Markdown = MarkdownWidget.render as unknown as (
+  props: Record<string, unknown>,
+) => ReactElement;
+
+function html(content: string): string {
+  return renderToStaticMarkup(<Markdown {...MarkdownWidget.defaultProps} content={content} />);
+}
+
+// #66: content seeded from existing Markdown (a partners page of logos)
+// rendered `![alt](src)` as literal text and flattened nested lists.
+describe('MarkdownWidget images', () => {
+  it('renders an image', () => {
+    const out = html('![Acme logo](/media/acme.png)');
+    expect(out).toContain('<img');
+    expect(out).toContain('src="/media/acme.png"');
+    expect(out).toContain('alt="Acme logo"');
+    expect(out).not.toContain('![');
+  });
+
+  it('renders a linked image as an image inside the link', () => {
+    const out = html('[![Acme](/media/acme.png)](https://acme.example)');
+    expect(out).toMatch(
+      /<a [^>]*href="https:\/\/acme\.example"[^>]*><img [^>]*src="\/media\/acme\.png"/,
+    );
+  });
+
+  it('keeps several images on one line in one paragraph', () => {
+    const out = html('![A](/a.png) ![B](https://cdn.example/b.png)');
+    expect(out.match(/<img /g)).toHaveLength(2);
+    expect(out.match(/<p /g)).toHaveLength(1);
+  });
+
+  it('accepts an empty alt', () => {
+    expect(html('![](/logo.png)')).toContain('alt=""');
+  });
+
+  it('leaves an unsafe src as visible text, like an unsafe link', () => {
+    for (const src of ['javascript:alert(1)', 'data:image/svg+xml,x']) {
+      const out = html(`![x](${src})`);
+      expect(out).not.toContain('<img');
+      expect(out).toContain(`![x](${src})`);
+    }
+  });
+
+  it('does not wrap an image in a link whose href is unsafe', () => {
+    const out = html('[![x](/x.png)](javascript:alert(1))');
+    expect(out).not.toContain('href="javascript');
+  });
+
+  it('still renders plain links', () => {
+    expect(html('[Docs](/docs)')).toMatch(/<a [^>]*href="\/docs"[^>]*>Docs<\/a>/);
+  });
+});
+
+describe('MarkdownWidget nested lists', () => {
+  it('renders an indented bullet as a nested list', () => {
+    const out = html('- Partners\n  - Gold\n  - Silver\n- Press');
+    expect(out).toMatch(
+      /<li>Partners<ul [^>]*><li>Gold<\/li><li>Silver<\/li><\/ul><\/li><li>Press<\/li>/,
+    );
+  });
+});

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/widgets/markdown-widget.tsx

@@ -2,6 +2,7 @@ import type { ComponentConfig } from '@puckeditor/core';
 import { useMemo } from 'react';
 import { keys } from '../../utils/i18n';
 import { parseMarkdownBlocks as renderMarkdown } from '../../utils/markdown';
+import { MarkdownList } from './_internal/markdown-list';
 import { renderRichText } from './_internal/rich-text';
 
 export type MarkdownWidgetProps = {
@@ -128,13 +129,12 @@ function MarkdownRender({ content, width = 'auto', indent = 'none' }: MarkdownWi
             );
           if (block.type === 'ul')
             return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
-              <ul key={idx} className="list-disc list-inside space-y-1 mb-4">
-                {block.items.map((item, i) => (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
-                  <li key={i}>{renderInline(item)}</li>
-                ))}
-              </ul>
+              <MarkdownList
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={idx}
+                items={block.items}
+                className="list-disc list-inside space-y-1 mb-4"
+              />
             );
           return (
             // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/widgets/quote-widget.tsx

@@ -1,4 +1,5 @@
 import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
 import { keys } from '../../utils/i18n';
 import { cn } from '../../utils/widgetUtils';
 import { renderRichText } from './_internal/rich-text';
@@ -10,6 +11,18 @@ export type QuoteWidgetProps = {
   align: 'left' | 'center';
 };
 
+// Colours come from the renderer's `--pb-*` tokens rather than a fixed palette,
+// so the quote follows the page's theme whether or not it toggles `.dark` —
+// a dark branded page would otherwise get dark-grey text on its own navy.
+// The tint is mixed from the accent, so it reads on either background.
+const FIGURE_STYLE: CSSProperties = {
+  borderColor: 'var(--pb-accent, var(--primary))',
+  backgroundColor: 'color-mix(in srgb, var(--pb-accent, var(--primary)) 8%, transparent)',
+};
+const CAPTION_STYLE: CSSProperties = {
+  color: 'var(--pb-caption-color, var(--pb-body-color, var(--muted-foreground)))',
+};
+
 export const QuoteWidget: ComponentConfig<QuoteWidgetProps> = {
   label: keys.pagebuilder.blocks.quote.label,
   fields: {
@@ -34,15 +47,19 @@ export const QuoteWidget: ComponentConfig<QuoteWidgetProps> = {
   render: ({ quote, author, source, align }) => (
     <figure
       className={cn(
-        'max-w-3xl mx-auto px-4 py-10 border-l-4 border-primary-700 bg-primary-50/50 dark:bg-primary-950/30 rounded-r-lg',
+        'max-w-3xl mx-auto px-4 py-10 border-l-4 rounded-r-lg',
         align === 'center' ? 'text-center' : 'text-left',
       )}
+      style={FIGURE_STYLE}
     >
-      <blockquote className="text-xl sm:text-2xl italic text-gray-800 dark:text-gray-100 leading-relaxed">
+      <blockquote
+        className="text-xl sm:text-2xl italic leading-relaxed"
+        style={{ color: 'var(--pb-heading-color, var(--foreground))' }}
+      >
         “{renderRichText(quote)}”
       </blockquote>
       {(author || source) && (
-        <figcaption className="mt-4 text-gray-600 dark:text-gray-400">
+        <figcaption className="mt-4" style={CAPTION_STYLE}>
           {author && <span className="font-semibold">— {renderRichText(author)}</span>}
           {source && <span className="ml-2 text-sm">({renderRichText(source)})</span>}
         </figcaption>

{simple_module_pagebuilder-0.0.8 → simple_module_pagebuilder-0.0.10}/pagebuilder/components/widgets/section-intro-widget.tsx

@@ -112,7 +112,7 @@ export const SectionIntroWidget: ComponentConfig<SectionIntroWidgetProps> = {
                 {renderRichText(eyebrow)}
               </p>
             )}
-            <div className={eyebrow ? undefined : 'md:col-span-2'}>{content}</div>
+            <div className={cn('min-w-0', !eyebrow && 'md:col-span-2')}>{content}</div>
           </div>
         </section>
       );

simple_module_pagebuilder-0.0.10/pagebuilder/components/widgets/site-header-account.tsx

@@ -0,0 +1,53 @@
+/** Locale switcher and auth-aware CTA for the SiteHeader widget. */
+
+import { usePage } from '@inertiajs/react';
+import {
+  LocaleSwitcher,
+  useHasMultipleLocales,
+} from '@simple-module-py/ui/components/LocaleSwitcher';
+
+type AuthSharedProps = {
+  auth?: { isAuthenticated?: boolean } | null;
+};
+
+/**
+ * Whether the visitor has a session, from the `auth` shared prop the framework
+ * layouts read. The header only mounts inside an Inertia page; the guard keeps
+ * a bare render (a unit test, a static preview) on the anonymous branch rather
+ * than throwing, so a header that never set the new props renders as before.
+ */
+export function useIsSignedIn(): boolean {
+  try {
+    // biome-ignore lint/correctness/useHookAtTopLevel: usePage throws outside Inertia, after reading its context, so the hook order is unchanged
+    return Boolean(usePage<AuthSharedProps>().props.auth?.isAuthenticated);
+  } catch {
+    return false;
+  }
+}
+
+/** The CTA the visitor should see: the signed-in variant only when it is filled in. */
+export function resolveCta(
+  signedIn: boolean,
+  cta: { label: string; href: string },
+  signedInCta: { label?: string; href?: string },
+): { label: string; href: string } {
+  if (signedIn && signedInCta.label) {
+    return { label: signedInCta.label, href: signedInCta.href || cta.href };
+  }
+  return cta;
+}
+
+/**
+ * The shared switcher, hidden on a single-locale install where it would be an
+ * inert pill. It switches the UI locale; it does not jump to a translated
+ * page, because the shared control has no hook for a per-page target.
+ */
+export function HeaderLocaleSwitcher({ show }: { show: boolean }) {
+  const multiple = useHasMultipleLocales();
+  if (!show || !multiple) return null;
+  return (
+    <div className="ml-auto mr-2 flex items-center lg:ml-0 lg:mr-0">
+      <LocaleSwitcher />
+    </div>
+  );
+}

simple_module_pagebuilder-0.0.10/pagebuilder/components/widgets/site-header-widget.test.tsx

@@ -0,0 +1,89 @@
+// @vitest-environment happy-dom
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+let shared: Record<string, unknown> = {};
+vi.mock('@inertiajs/react', () => ({
+  usePage: () => ({ props: shared }),
+}));
+
+// The framework ui package ships JSX sources compiled with the classic runtime
+// under vitest, so its components expect a global React.
+(globalThis as { React?: unknown }).React = React;
+
+import type { SiteHeaderWidgetProps } from './site-header-widget';
+
+const { SiteHeaderRender, SiteHeaderWidget } = await import('./site-header-widget');
+const { resolveCta } = await import('./site-header-account');
+
+const base: Record<string, unknown> = {
+  ...(SiteHeaderWidget.defaultProps as object),
+  ctaLabel: 'Sign in',
+  ctaHref: '/users/login',
+};
+const i18n = (supportedLocales: string[]) => ({
+  locale: 'en',
+  supportedLocales,
+  messages: {},
+});
+const render = (props: Record<string, unknown> = {}) =>
+  renderToStaticMarkup(
+    <SiteHeaderRender {...({ ...base, ...props } as unknown as SiteHeaderWidgetProps)} />,
+  );
+
+beforeEach(() => {
+  shared = { auth: { isAuthenticated: false }, i18n: i18n(['en', 'fr']) };
+});
+
+describe('SiteHeader locale switcher', () => {
+  it('is hidden unless showLocaleSwitcher is set', () => {
+    expect(render()).not.toContain('/i18n/set-locale');
+  });
+
+  it('renders the shared switcher when enabled on a multi-locale install', () => {
+    const out = render({ showLocaleSwitcher: true });
+    expect(out).toContain('/i18n/set-locale');
+    expect(out).toContain('>EN<');
+  });
+
+  it('stays hidden on a single-locale install', () => {
+    shared = { auth: {}, i18n: i18n(['en']) };
+    expect(render({ showLocaleSwitcher: true })).not.toContain('>EN<');
+  });
+
+  it('exposes the toggle as an editor field defaulting to off', () => {
+    expect(SiteHeaderWidget.fields).toHaveProperty('showLocaleSwitcher');
+    expect(SiteHeaderWidget.defaultProps?.showLocaleSwitcher).toBe(false);
+  });
+});
+
+describe('SiteHeader auth-aware CTA', () => {
+  const props = { signedInLabel: 'Dashboard', signedInHref: '/dashboard/' };
+
+  it('shows the anonymous CTA to a visitor', () => {
+    const out = render(props);
+    expect(out).toContain('Sign in');
+    expect(out).not.toContain('Dashboard');
+  });
+
+  it('switches to the signed-in label and link with a session', () => {
+    shared = { auth: { isAuthenticated: true } };
+    const out = render(props);
+    expect(out).toContain('Dashboard');
+    expect(out).toContain('href="/dashboard/"');
+    expect(out).not.toContain('>Sign in<');
+  });
+
+  it('keeps the CTA for a signed-in visitor when no signed-in label is set', () => {
+    shared = { auth: { isAuthenticated: true } };
+    expect(render()).toContain('>Sign in<');
+  });
+
+  it('falls back to the CTA link when only the label is set', () => {
+    expect(resolveCta(true, { label: 'Sign in', href: '/x' }, { label: 'Hi', href: '' })).toEqual({
+      label: 'Hi',
+      href: '/x',
+    });
+  });
+});