@akinon/pz-theme 2.0.164-rc.1 → 2.0.164

package/src/chrome/theme-page-up.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+
+import { IconGlyph, resolveIconSource } from '../blocks/icon-source';
+import { toSafeImageSource } from '../utils/svg-image-source';
+import {
+  PAGE_UP_OFFSET_VARIABLE,
+  readThemePageUpSettings,
+  type ThemePageUpSettings
+} from '../utils/theme-settings-readers';
+import { useEditorThemeSettings } from './use-editor-theme-settings';
+
+/**
+ * The "back to top" button the settings page's "Page up oku" switch turns on
+ * (`pageUpEnabled`, icon `pageUpIcon`).
+ *
+ * Mounted once per page by `ThemeModals`, the one global pz-theme mount every
+ * brand layout already renders, so a brand gets it with a version bump and no
+ * layout edit. Exported for a brand that does not mount `ThemeModals`.
+ */
+
+const ICON_SIZE = 24;
+
+/**
+ * The lift the button measured for itself, as a private variable on the
+ * button. It is only the fallback of the brand's offset variable, so a brand
+ * that sets that variable always wins, and the `bottom` declaration itself
+ * never changes after the server render.
+ */
+const MEASURED_LIFT_VARIABLE = '--pz-page-up-lift';
+
+/**
+ * Height of a fixed or sticky bar covering the bottom edge under the button,
+ * in px; 0 when there is none, when the brand sets the offset variable itself,
+ * or when the browser cannot hit-test.
+ *
+ * Only bars count: an element reaching above the middle of the viewport is an
+ * overlay (a drawer, a modal backdrop) that the button should not climb.
+ */
+export const measureBottomOverlay = (button: HTMLElement | null): number => {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return 0;
+  }
+  if (typeof document.elementsFromPoint !== 'function') return 0;
+
+  if (
+    button &&
+    window
+      .getComputedStyle(button)
+      .getPropertyValue(PAGE_UP_OFFSET_VARIABLE)
+      .trim()
+  ) {
+    return 0;
+  }
+
+  const { innerWidth, innerHeight } = window;
+  const rect = button?.getBoundingClientRect();
+  // The button's own column (it may sit on the left in a right-to-left page).
+  const x =
+    rect && rect.width > 0 ? rect.left + rect.width / 2 : innerWidth - 40;
+  const size = rect && rect.height > 0 ? rect.height : 44;
+  // Two probes. The bottom edge finds a bar (an add-to-cart strip,
+  // an install prompt); the button's resting spot, 16px above that edge, finds
+  // a floating button parked in the same corner (a chat or WhatsApp launcher)
+  // that would otherwise sit on top of it.
+  const probes = [innerHeight - 8, innerHeight - 16 - size / 2];
+
+  let offset = 0;
+
+  probes.forEach((y, index) => {
+    for (const element of document.elementsFromPoint(x, y)) {
+      if (button && (element === button || button.contains(element))) continue;
+
+      const { position } = window.getComputedStyle(element);
+      if (position !== 'fixed' && position !== 'sticky') continue;
+
+      const box = element.getBoundingClientRect();
+      if (index === 0 && box.bottom < innerHeight - 1) continue;
+      if (box.top <= innerHeight / 2) continue;
+
+      offset = Math.max(offset, innerHeight - box.top);
+    }
+  });
+
+  return Math.ceil(Math.min(offset, innerHeight / 2));
+};
+
+const prefersReducedMotion = (): boolean =>
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * After the jump, keyboard focus goes to the top of the content rather than
+ * staying on a button that is about to hide. A temporary `tabindex` makes the
+ * target focusable and is removed again once focus leaves it.
+ */
+const focusPageTop = () => {
+  const target = document.querySelector<HTMLElement>('main') ?? document.body;
+
+  if (!target.hasAttribute('tabindex')) {
+    target.setAttribute('tabindex', '-1');
+    target.addEventListener('blur', () => target.removeAttribute('tabindex'), {
+      once: true
+    });
+  }
+
+  target.focus({ preventScroll: true });
+};
+
+const PageUpIcon = ({ settings }: { settings: ThemePageUpSettings }) => {
+  // `up-arrow` resolves the brand's uploaded override of that icon before the
+  // catalogue chevron, exactly as an icon block asking for it would.
+  const source = resolveIconSource(settings.pageUpIcon || 'up-arrow', settings);
+
+  if (source.kind === 'svg' || source.kind === 'url') {
+    // Never injected as markup: the icon is shared settings data and an SVG
+    // loaded as an image runs no script (utils/svg-image-source.ts).
+    const src = toSafeImageSource(
+      source.kind === 'svg' ? source.markup : source.url
+    );
+
+    if (src) {
+      return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          width={ICON_SIZE}
+          height={ICON_SIZE}
+          alt=""
+          aria-hidden="true"
+          data-page-up-icon="image"
+          style={{ display: 'block' }}
+        />
+      );
+    }
+  }
+
+  return (
+    <IconGlyph
+      {...(source.kind === 'glyph'
+        ? { glyph: source.glyph }
+        : { name: 'up-arrow' })}
+      size={ICON_SIZE}
+      data-page-up-icon="glyph"
+    />
+  );
+};
+
+const PageUpButton = ({ settings }: { settings: ThemePageUpSettings }) => {
+  const { locale } = useLocalization();
+  const label = String(locale || '')
+    .toLowerCase()
+    .startsWith('tr')
+    ? 'Sayfanın başına dön'
+    : 'Back to top';
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [measuredOffset, setMeasuredOffset] = useState(0);
+
+  /**
+   * Visible once the page has scrolled a full viewport. An observed sentinel
+   * rather than a scroll handler, as in chrome/scroll-state.tsx: the observer
+   * costs nothing until the sentinel crosses the viewport edge. Zero-sized so
+   * it can never add a scrollbar to a page shorter than 100vh.
+   */
+  useEffect(() => {
+    if (typeof IntersectionObserver === 'undefined') return undefined;
+
+    const sentinel = document.createElement('div');
+    sentinel.setAttribute('data-page-up-sentinel', '');
+    sentinel.setAttribute('aria-hidden', 'true');
+    sentinel.style.position = 'absolute';
+    sentinel.style.top = '100vh';
+    sentinel.style.left = '0px';
+    sentinel.style.width = '0px';
+    sentinel.style.height = '0px';
+    sentinel.style.pointerEvents = 'none';
+    document.body.appendChild(sentinel);
+
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (!entry) return;
+      // Out of view AND above it: below the fold (a fresh page) is not
+      // "scrolled past".
+      setVisible(!entry.isIntersecting && entry.boundingClientRect.top < 0);
+    });
+    observer.observe(sentinel);
+
+    return () => {
+      observer.disconnect();
+      sentinel.remove();
+    };
+  }, []);
+
+  /** Re-measured when the button shows and on resize, one frame at most. */
+  useEffect(() => {
+    if (!visible) return undefined;
+
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      setMeasuredOffset(measureBottomOverlay(buttonRef.current));
+    };
+    const schedule = () => {
+      if (typeof window.requestAnimationFrame !== 'function') {
+        measure();
+        return;
+      }
+      if (!frame) frame = window.requestAnimationFrame(measure);
+    };
+
+    schedule();
+    window.addEventListener('resize', schedule);
+
+    return () => {
+      window.removeEventListener('resize', schedule);
+      if (frame && typeof window.cancelAnimationFrame === 'function') {
+        window.cancelAnimationFrame(frame);
+      }
+    };
+  }, [visible]);
+
+  const onClick = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+    });
+    focusPageTop();
+  };
+
+  const style = {
+    [MEASURED_LIFT_VARIABLE]: `${measuredOffset}px`,
+    position: 'fixed',
+    // Logical, so a right-to-left page gets it on its trailing side too.
+    insetInlineEnd:
+      'max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))',
+    bottom: `calc(16px + var(${PAGE_UP_OFFSET_VARIABLE}, var(${MEASURED_LIFT_VARIABLE}, 0px)) + env(safe-area-inset-bottom, 0px))`,
+    zIndex: 30,
+    width: 44,
+    height: 44,
+    margin: 0,
+    padding: 0,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    borderRadius: '50%',
+    border: '1px solid var(--theme-border, #e2e2e2)',
+    background: 'var(--theme-background, #fff)',
+    color: 'var(--theme-heading, #111)',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.12)',
+    cursor: 'pointer',
+    opacity: visible ? 1 : 0,
+    visibility: visible ? 'visible' : 'hidden',
+    pointerEvents: visible ? 'auto' : 'none',
+    // A fade, not a movement, so it stays under reduced motion.
+    transition: 'opacity 150ms ease, visibility 150ms ease'
+  } as React.CSSProperties;
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      data-theme-page-up=""
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      // Hidden, it must not be reachable either: no tab stop, nothing read.
+      aria-hidden={visible ? undefined : true}
+      tabIndex={visible ? undefined : -1}
+      style={style}
+    >
+      <PageUpIcon settings={settings} />
+    </button>
+  );
+};
+
+export interface ThemePageUpProps {
+  /**
+   * The theme settings, whole or already narrowed with
+   * `readThemePageUpSettings`; only the page-up keys are read.
+   */
+  settings?: Record<string, unknown> | null;
+}
+
+/**
+ * Renders nothing unless `pageUpEnabled` is true. In the designer the
+ * editor's live settings replace the saved ones as soon as they arrive.
+ */
+export function ThemePageUp({ settings = null }: ThemePageUpProps) {
+  const saved = useMemo(() => readThemePageUpSettings(settings), [settings]);
+  const effective = useEditorThemeSettings(saved);
+
+  if (effective.pageUpEnabled !== true) return null;
+
+  return <PageUpButton settings={effective} />;
+}
+
+export default ThemePageUp;

package/src/chrome/use-editor-theme-settings.ts

@@ -0,0 +1,104 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { parseEditorMessage } from '../editor-bridge';
+import {
+  readThemePageUpSettings,
+  type ThemePageUpSettings
+} from '../utils/theme-settings-readers';
+
+/**
+ * The page-up settings as the EDITOR currently has them.
+ *
+ * The back-to-top button is mounted by `ThemeModals`, a server component
+ * outside every placeholder, so it never sees the `LOAD_THEME`/`UPDATE_THEME`
+ * frames a placeholder wrapper turns into live settings. Without this the
+ * designer would flip "Page up oku" and see nothing until the theme was saved
+ * and the canvas reloaded.
+ *
+ * Module state, like `overlays/use-editor-modals.ts` and for the same reason:
+ * every mount, in whichever React root, must agree on one answer.
+ */
+let editorSettings: ThemePageUpSettings | null = null;
+
+/**
+ * Serialized form of the slice. `UPDATE_THEME` arrives on every keystroke
+ * anywhere in the theme and almost none of those touch these keys, so the
+ * button only re-renders when the slice actually changes.
+ */
+let signature: string | null = null;
+
+const listeners = new Set<() => void>();
+
+const setEditorSettings = (next: ThemePageUpSettings) => {
+  const nextSignature = JSON.stringify(next);
+  if (nextSignature === signature) return;
+
+  signature = nextSignature;
+  editorSettings = next;
+  listeners.forEach((listener) => listener());
+};
+
+let listening = false;
+
+const handleMessage = (event: MessageEvent) => {
+  const message = parseEditorMessage(event);
+  if (!message) return;
+  if (message.type !== 'LOAD_THEME' && message.type !== 'UPDATE_THEME') {
+    return;
+  }
+
+  const settings = (
+    message.data as { theme?: { settings?: unknown } } | undefined
+  )?.theme?.settings;
+  // A frame without settings says nothing about them; the placeholder
+  // wrapper ignores it the same way.
+  if (!settings || typeof settings !== 'object') return;
+
+  setEditorSettings(
+    readThemePageUpSettings(settings as Record<string, unknown>)
+  );
+};
+
+const startListening = () => {
+  if (listening || typeof window === 'undefined') return;
+  listening = true;
+  window.addEventListener('message', handleMessage);
+};
+
+/**
+ * The editor's page-up slice once one has been heard, otherwise `initial` —
+ * which is what the server rendered, so the first client render matches it.
+ */
+export const useEditorThemeSettings = (
+  initial: ThemePageUpSettings
+): ThemePageUpSettings => {
+  const [heard, setHeard] = useState<ThemePageUpSettings | null>(null);
+
+  useEffect(() => {
+    startListening();
+
+    const listener = () => setHeard(editorSettings);
+    listeners.add(listener);
+    // A frame may have landed between render and this effect.
+    if (editorSettings) listener();
+
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+
+  return heard ?? initial;
+};
+
+/** Test-only: drop what was heard and the listener. */
+export const __resetEditorThemeSettingsForTests = (): void => {
+  editorSettings = null;
+  signature = null;
+  listeners.clear();
+  if (listening && typeof window !== 'undefined') {
+    window.removeEventListener('message', handleMessage);
+  }
+  listening = false;
+};

package/src/components/with-designer-features.tsx

@@ -19,6 +19,13 @@ import {
   HIDE_IN_CARD_VIEW_ATTRIBUTE,
   HIDE_IN_CARD_VIEW_PROPERTY
 } from '../utils/card-media';
+// Own-colour / own-typography markers for the theme's rich-text
+// element defaults.
+import { useThemeSettingsContext } from '../theme-settings-context';
+import {
+  type ThemeOwnTextStyle,
+  themeOwnStyleAttributes
+} from '../utils/theme-settings-css';
 
 /** Elements that already act on Enter/Space themselves. */
 export const NATIVE_KEYBOARD_CONTROLS =
@@ -39,6 +46,11 @@ interface WithDesignerFeaturesProps {
   onToggleVisibility?: () => void;
   onDelete?: () => void;
   onRename?: (newLabel: string) => void;
+  /**
+   * Text colour or typography the caller paints on this wrapper with classes,
+   * which neither the block's styles nor `style` can show.
+   */
+  ownTextStyle?: ThemeOwnTextStyle;
   // Note: repo has mixed React type versions; keep this permissive to avoid ReactNode incompatibilities.
   children: any;
 }
@@ -58,9 +70,14 @@ export function WithDesignerFeatures({
   onToggleVisibility,
   onDelete,
   onRename,
+  ownTextStyle,
   children
 }: WithDesignerFeaturesProps) {
   const blockRef = useRef<HTMLDivElement>(null);
+  // Read here, not in the renderers: this wrapper encloses every
+  // element the block's root styles reach (its own box, or the inner root of
+  // a text/link/button), so a marker on it covers the authored values.
+  const themeSettings = useThemeSettingsContext();
   const actionBlockId = block.styleSourceId || block.id;
   const { handleClick } = useDesignerFeatures({
     blockId: actionBlockId,
@@ -182,6 +199,15 @@ export function WithDesignerFeatures({
     ...(ownsAction && !isDesigner ? { cursor: 'pointer' } : null)
   };
 
+  // Data-pz-own-color / data-pz-own-type, so the theme's rich-text
+  // defaults leave the colour and typography this block authored to inherit.
+  // `style` counts too: a section paints a code-owned box's text colour there.
+  const ownStyleAttributes = themeOwnStyleAttributes(
+    { ...block.styles, ...style },
+    themeSettings,
+    ownTextStyle
+  );
+
   return (
     <div
       ref={blockRef}
@@ -191,6 +217,7 @@ export function WithDesignerFeatures({
       {...(hideInCardView
         ? { [HIDE_IN_CARD_VIEW_ATTRIBUTE]: hideInCardView }
         : null)}
+      {...ownStyleAttributes}
       className={clsx(
         'relative',
         className,