@akinon/pz-theme 2.0.95-beta.1 → 2.0.95-rc.0

package/src/index.ts

@@ -99,16 +99,6 @@ export {
   useOpenModalIds
 } from './overlays/overlay-bus';
 
-/**
- * Which modal the composition is inside, for a brand's OWN auth surface: a
- * hand-written form composed into a drawer can now close the drawer the way
- * the built-in ones do. See `overlays/modal-host-context.tsx`.
- */
-export {
-  useModalHostId,
-  useHostModalCloser
-} from './overlays/modal-host-context';
-
 export {
   readThemeModals,
   MODAL_PRESENTATIONS

package/src/overlays/__tests__/modal-registry.test.ts

@@ -63,11 +63,7 @@ describe('readThemeModals', () => {
           // surface, so an unauthored padding must stay unauthored here.
           padding: undefined,
           showSheetHandle: true,
-          stretchContent: false,
-          // On for a modal that never mentioned it, which is safe precisely
-          // because the layer waits: an unauthored delay leaves the surface's
-          // own 150ms, and nothing a small composition can outrun changes.
-          showLoading: true
+          stretchContent: false
         },
         autoTrigger: undefined,
         visibilityRules: undefined

package/src/overlays/modal-chrome-css.ts

@@ -41,14 +41,7 @@ export const MODAL_CHROME_PARTS = [
   'overlay',
   'close',
   'close-text',
-  'handle',
-  // The layer shown while a composition is still committing, its mark, and the
-  // authored words beside it. Chrome rather than blocks for the usual reason:
-  // they are drawn by `overlay-loading.tsx` from inline styles and hang off no
-  // `[data-block-id]`, so no block part rule could ever reach them.
-  'loading',
-  'loading-mark',
-  'loading-text'
+  'handle'
 ] as const;
 
 export type ModalChromePart = (typeof MODAL_CHROME_PARTS)[number];

package/src/overlays/modal-preview-host.tsx

@@ -10,7 +10,6 @@ import {
   OverlayCloseButton,
   OverlayHandleProps
 } from './overlay-surface';
-import { ModalHostIdProvider } from './modal-host-context';
 import ThemeModalMount from './theme-modal-mount';
 import { useEditorModals } from './use-editor-modals';
 import { useHeldModal } from './use-modal-preview';
@@ -168,9 +167,7 @@ export const ModalPreviewHost = ({
         chromeCss={chromeCss}
         header={header}
       >
-        <ModalHostIdProvider value={modal.id}>
-          {composition(modal.slug)}
-        </ModalHostIdProvider>
+        {composition(modal.slug)}
       </CentredModalSurface>
     ) : (
       <LayeredOverlaySurface
@@ -196,9 +193,7 @@ export const ModalPreviewHost = ({
         chromeCss={chromeCss}
         header={header}
       >
-        <ModalHostIdProvider value={modal.id}>
-          {composition(modal.slug)}
-        </ModalHostIdProvider>
+        {composition(modal.slug)}
       </LayeredOverlaySurface>
     );
 

package/src/overlays/modal-registry.ts

@@ -7,7 +7,6 @@ import type { VisibilityRules } from '../utils/visibility-rules';
 import {
   OVERLAY_BACKDROP_COLOR,
   OVERLAY_BACKDROP_OPACITY,
-  OVERLAY_LOADING_DELAY_MAX,
   OVERLAY_WIDTH_UNITS,
   SHEET_HEIGHT_FALLBACK,
   isSheetHeightLength,
@@ -153,30 +152,6 @@ export interface ModalChrome {
    */
   closeText?: string;
   closeTextSide?: 'before' | 'after';
-  /**
-   * Whether the panel shows a loading mark while its composition is still
-   * committing. Absent reads as ON, which cannot change how a published modal
-   * looks: the layer is invisible for its first `loadingDelay` ms, and a
-   * composition that commits in the same frame — every small one — has
-   * revealed itself long before that. What it buys is the large ones, where
-   * the panel's white surface is on screen for a beat with nothing in it.
-   *
-   * Off restores the single commit: the composition renders with the panel and
-   * nothing is drawn over it.
-   */
-  showLoading?: boolean;
-  /**
-   * How long the panel may be empty before the mark fades in, in ms. Absent
-   * means the historical-safe 150 — see `OVERLAY_LOADING_DELAY`.
-   */
-  loadingDelay?: number;
-  /**
-   * Words beside the mark. Absence-preserving for the same reason as
-   * `closeText`, and for one more: this package has no dictionary, so a
-   * default would be an English string on every storefront. Authored text is
-   * the only text.
-   */
-  loadingLabel?: string;
 }
 
 /**
@@ -627,19 +602,7 @@ const readChrome = (value: unknown, name: string): ModalChrome => {
     // a close text must not come out of here claiming an empty one, and the
     // side only means something once the text exists.
     closeText: asString(raw.closeText) || undefined,
-    closeTextSide: raw.closeTextSide === 'before' ? 'before' : undefined,
-    // Absent reads as on: the layer is invisible until the delay has passed,
-    // so turning it on for every published modal changes nothing a shopper
-    // sees except on the modals that were already keeping them waiting.
-    showLoading: asToggle(raw.showLoading, true),
-    // Read, not defaulted, on the same grounds as `padding`: 0 is a real
-    // answer ("show it at once"), so absence has to stay distinguishable.
-    loadingDelay: asOptionalClamped(
-      raw.loadingDelay,
-      0,
-      OVERLAY_LOADING_DELAY_MAX
-    ),
-    loadingLabel: asString(raw.loadingLabel) || undefined
+    closeTextSide: raw.closeTextSide === 'before' ? 'before' : undefined
   };
 };
 

package/src/overlays/overlay-surface.tsx

@@ -478,21 +478,6 @@ export interface OverlaySurfaceProps extends OverlayGeometryInput {
   chromeCss?: string;
   /** Rendered inside the panel, above the authored content. */
   header?: React.ReactNode;
-  /**
-   * Drawn over the panel while the composition is still committing — see
-   * `overlay-loading.tsx` for why a large one needs it.
-   *
-   * A node rather than a flag because only the composed modal host has one:
-   * the panel block passes nothing, so its markup — pinned byte for byte by
-   * `panel-legacy-golden.json` — cannot move.
-   */
-  loading?: React.ReactNode;
-  /**
-   * Marks the dialog as still filling. The attribute is the accessible half of
-   * `loading`: a wordless spinner tells a screen reader nothing, `aria-busy`
-   * tells it exactly what is happening. Absent leaves no attribute at all.
-   */
-  panelBusy?: boolean;
   children: React.ReactNode;
   /**
    * Legacy marker attributes per node. Order matters: they are spread BEFORE
@@ -545,8 +530,6 @@ export const CentredModalSurface = ({
   topInset,
   chromeCss,
   header,
-  loading,
-  panelBusy,
   children,
   markers
 }: Omit<
@@ -582,7 +565,6 @@ export const CentredModalSurface = ({
       role="dialog"
       {...overlayProps}
       aria-label={ariaLabel}
-      {...(panelBusy ? { 'aria-busy': true as const } : null)}
       // The backdrop closes the modal; clicks on the panel itself must not
       // bubble up into that handler.
       onClick={(event) => event.stopPropagation()}
@@ -611,7 +593,6 @@ export const CentredModalSurface = ({
         <style dangerouslySetInnerHTML={{ __html: chromeCss }} />
       ) : null}
       {header}
-      {loading}
       {children}
     </div>
   </div>
@@ -645,8 +626,6 @@ export const LayeredOverlaySurface = ({
   topInset,
   chromeCss,
   header,
-  loading,
-  panelBusy,
   children,
   markers
 }: OverlaySurfaceProps) => {
@@ -673,7 +652,6 @@ export const LayeredOverlaySurface = ({
       role="dialog"
       {...overlayProps}
       aria-label={ariaLabel}
-      {...(panelBusy ? { 'aria-busy': true as const } : null)}
       // Focus target of last resort, for a panel whose every control the
       // designer turned off.
       tabIndex={-1}
@@ -707,7 +685,6 @@ export const LayeredOverlaySurface = ({
         <OverlaySheetHandle markerAttrs={markers?.handle} />
       )}
       {header}
-      {loading}
       {children}
     </div>
   );

package/src/overlays/overlay-tokens.ts

@@ -33,18 +33,6 @@ export const OVERLAY_WIDTH_UNITS: OverlayWidthUnit[] = ['px', '%', 'vw'];
 export const OVERLAY_BACKDROP_COLOR = '#000000';
 export const OVERLAY_BACKDROP_OPACITY = 50;
 
-/**
- * How long a panel may be empty before its loading mark fades in, in ms, and
- * the longest delay a designer may ask for.
- *
- * Here rather than beside the layer that animates it for the reason at the top
- * of this file: the REGISTRY clamps the authored value, and the registry is
- * parsed on the server. `overlay-loading.tsx` re-exports both so client
- * callers keep one import path.
- */
-export const OVERLAY_LOADING_DELAY = 150;
-export const OVERLAY_LOADING_DELAY_MAX = 2000;
-
 /**
  * How tall a sheet is, and what a designer is allowed to write for it.
  *

package/src/overlays/theme-modal-mount.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { startTransition, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { useOverlay } from '../hooks/use-overlay';
 import { useVisibilityContext } from '../hooks/use-visibility-context';
@@ -18,8 +18,6 @@ import {
   LayeredOverlaySurface,
   OverlayCloseButton
 } from './overlay-surface';
-import { OverlayLoadingLayer } from './overlay-loading';
-import { ModalHostIdProvider } from './modal-host-context';
 import { useEditorKnowsModal } from './use-editor-modals';
 import { useModalPreview } from './use-modal-preview';
 import { useOverlayBreakpoint } from './use-overlay-breakpoint';
@@ -136,53 +134,6 @@ const ThemeModalMount = ({
     isDesigner ? breakpoint : undefined
   );
 
-  /**
-   * Whether the composition is revealed in its own commit, with a loading
-   * layer under it until it lands.
-   *
-   * Never in the canvas: a designer composing a modal must see their blocks
-   * the instant they select it, and the editor's own render is not the commit
-   * this is about.
-   */
-  const showsLoading = chrome.showLoading !== false && !isEditing;
-  const [revealed, setRevealed] = useState(!showsLoading);
-
-  /**
-   * A TRANSITION, not a timer.
-   *
-   * The pause this covers is the commit itself: a composed modal's content
-   * ships with the page, so opening a large one — ninety blocks, a text block
-   * carrying half a megabyte of pasted markup — is one long synchronous render
-   * during which nothing at all can be scheduled, a `setTimeout` that would
-   * show a spinner least of all. Rendering the composition at transition
-   * priority splits it off the urgent commit that draws the panel, so the
-   * panel and the loading layer paint first and the browser is free in
-   * between.
-   *
-   * It costs the fast path one extra commit and nothing visible: the layer is
-   * invisible for its first `loadingDelay` ms, which a small composition has
-   * long since outrun. And because `act()` flushes transitions, a test that
-   * opens a modal still sees its content in the same tick.
-   *
-   * Reset on close so a reopen starts from the cheap commit again — the bus is
-   * module state, so a mount lives far longer than one open.
-   */
-  useEffect(() => {
-    if (!showsLoading) {
-      setRevealed(true);
-
-      return;
-    }
-
-    if (!opened) {
-      setRevealed(false);
-
-      return;
-    }
-
-    startTransition(() => setRevealed(true));
-  }, [opened, showsLoading]);
-
   /**
    * In the canvas the overlay is fully inert: it never steals focus into the
    * page the designer is styling, never freezes it, never claims `aria-modal`
@@ -197,17 +148,8 @@ const ThemeModalMount = ({
     // be a lie.
     modal: isCentred ? true : chrome.showBackdrop,
     lockScroll: chrome.lockScroll && (isCentred || chrome.showBackdrop),
-    closeOnEscape: chrome.closeOnEscape
-    /**
-     * No `fallbackFocusRef` on purpose. It used to point at `rootRef`, which
-     * cannot take focus (the div carries no `tabIndex={-1}`) and is detached
-     * by the time the hand-back runs anyway — `if (!opened) return null`
-     * removes it in the same commit that closes the modal. `useOverlay`
-     * verifies that focus actually landed, so the branch was dead; naming a
-     * target that cannot work only hides the real gap, which is a modal
-     * nobody clicked open (an auto-triggered popup) having no opener to hand
-     * focus back to.
-     */
+    closeOnEscape: chrome.closeOnEscape,
+    fallbackFocusRef: rootRef
   });
 
   if (!opened) return null;
@@ -229,20 +171,6 @@ const ThemeModalMount = ({
 
   const ariaLabel = chrome.ariaLabel || modal.name;
 
-  /**
-   * The layer, and the composition it stands in for. Both are absent once the
-   * composition has landed, so nothing is drawn over it and no attribute is
-   * left claiming the dialog is still filling.
-   */
-  const loading =
-    showsLoading && !revealed ? (
-      <OverlayLoadingLayer
-        label={chrome.loadingLabel}
-        delay={chrome.loadingDelay}
-      />
-    ) : null;
-  const body = revealed ? children : null;
-
   const surface = isCentred ? (
     <CentredModalSurface
       overlayProps={overlay.overlayProps}
@@ -258,10 +186,8 @@ const ThemeModalMount = ({
       topInset={chrome.topInset}
       chromeCss={chromeCss}
       header={header}
-      loading={loading}
-      panelBusy={Boolean(loading)}
     >
-      {body}
+      {children}
     </CentredModalSurface>
   ) : (
     <LayeredOverlaySurface
@@ -283,10 +209,8 @@ const ThemeModalMount = ({
       panelStretch={chrome.stretchContent}
       chromeCss={chromeCss}
       header={header}
-      loading={loading}
-      panelBusy={Boolean(loading)}
     >
-      {body}
+      {children}
     </LayeredOverlaySurface>
   );
 
@@ -300,10 +224,7 @@ const ThemeModalMount = ({
       data-theme-modal={modal.id}
       data-theme-modal-state="open"
     >
-      {/* Tells the composition which modal it is inside, so a form that
-          finishes can close THIS one — see `modal-host-context.tsx`. Renders
-          no element, so the published markup is untouched. */}
-      <ModalHostIdProvider value={modal.id}>{surface}</ModalHostIdProvider>
+      {surface}
     </div>
   );
 };

package/src/utils/visibility-rules.ts

@@ -532,109 +532,6 @@ export const evaluateVisibilityRules = (
 const isVisibilityRuleExempt = (node: Block | Section): boolean =>
   containsCheckoutOutlet(node);
 
-
-/**
- * A per-breakpoint value, read the way the renderers read one.
- *
- * A local reader rather than `getResponsiveValue` from `../utils`: this module
- * is pure and is walked on the server read path, and that barrel pulls in the
- * React helpers.
- */
-const readResponsive = (value: unknown, breakpoint?: string): unknown => {
-  if (value === null || typeof value !== 'object' || Array.isArray(value)) {
-    return value;
-  }
-
-  const record = value as Record<string, unknown>;
-  const chain = [
-    breakpoint,
-    ...(breakpoint ? BREAKPOINT_FALLBACKS[breakpoint] ?? [] : []),
-    'desktop'
-  ];
-
-  for (const key of chain) {
-    if (key && record[key] !== undefined) return record[key];
-  }
-
-  return undefined;
-};
-
-/**
- * Who a block's ACTION is for.
- *
- * Visibility already answers "who is this block for"; this answers the same
- * question about the action wired onto it, which is not the same thing. The
- * account button is the case that forced it: it renders its own link — to the
- * account for a member, to the login page for a guest — while a designer wires
- * "open the login drawer" onto the block itself. Both then fire on one click,
- * so a signed-in shopper landed on their account page with the login drawer
- * open over it.
- *
- * Resolved HERE, in the pass that already knows who the shopper is, rather
- * than in `use-block-action`: that hook runs for every block on the page, and
- * making it read the session would make a SessionProvider mandatory for the
- * whole theme rather than for the placeholder wrapper that already has one.
- */
-export const BLOCK_ACTION_AUDIENCES = ['all', 'guest', 'authenticated'] as const;
-
-export type BlockActionAudience = (typeof BLOCK_ACTION_AUDIENCES)[number];
-
-const MODAL_ACTION_TYPES = new Set([
-  'open-modal',
-  'close-modal',
-  'toggle-modal'
-]);
-
-/**
- * The audience a block's action is scoped to.
- *
- * Absent means `all`, EXCEPT for an account button opening a modal: a member
- * clicking their own account button never wants the login drawer, so the
- * default there is `guest`. That is a behaviour change on published
- * compositions, and a deliberate one — the alternative is the drawer covering
- * the account page it just navigated to. A brand that really wants it for
- * everyone says `all`.
- */
-const resolveActionAudience = (
-  block: Block,
-  currentBreakpoint?: string
-): BlockActionAudience => {
-  const authored = String(
-    readResponsive(block.properties?.actionAudience, currentBreakpoint) ?? ''
-  ).trim();
-
-  if ((BLOCK_ACTION_AUDIENCES as readonly string[]).includes(authored)) {
-    return authored as BlockActionAudience;
-  }
-
-  const actionType = String(
-    readResponsive(block.properties?.actionType, currentBreakpoint) ?? ''
-  ).trim();
-
-  if (block.type === 'account-button' && MODAL_ACTION_TYPES.has(actionType)) {
-    return 'guest';
-  }
-
-  return 'all';
-};
-
-/**
- * Whether the action runs for this shopper.
- *
- * `loading` counts as a guest: the session is unknown for the first client
- * render, and withholding the login drawer through it would break the common
- * case to fix the rare one.
- */
-const actionRunsFor = (
-  audience: BlockActionAudience,
-  authState: unknown
-): boolean => {
-  if (audience === 'all') return true;
-  if (audience === 'authenticated') return authState === 'authenticated';
-
-  return authState !== 'authenticated';
-};
-
 const applyBlockVisibility = (
   block: Block,
   context: VisibilityRuleContext
@@ -644,19 +541,8 @@ const applyBlockVisibility = (
     isVisibilityRuleExempt(block) ||
     evaluateVisibilityRules(block.properties?.visibilityRules, context);
 
-  /**
-   * An action this shopper is not the audience for is REMOVED rather than
-   * ignored at click time, so the wrapper never claims `aria-haspopup="dialog"`
-   * for a dialog it will not open either.
-   */
-  const audience = resolveActionAudience(block, context.breakpoint);
-  const properties = actionRunsFor(audience, context.authState)
-    ? block.properties
-    : { ...(block.properties || {}), actionType: 'none' };
-
   return {
     ...block,
-    properties,
     hidden: Boolean(block.hidden) || !isVisibleByRules,
     blocks
   };