@akinon/pz-theme 2.0.43-rc.0 → 2.0.44

package/src/chrome/checkout-pieces.ts

@@ -0,0 +1,173 @@
+/**
+ * Module-level registry connecting checkout outlet BLOCKS to checkout PIECES.
+ *
+ * The two sides live in sibling React subtrees with no shared ancestor to
+ * carry this state: outlets render inside the `checkout-page-body` ChromeSlot
+ * subtree, while the pieces (the real, code-owned checkout components) render
+ * in the checkout page's `{children}` subtree. Like the overlay stack in
+ * `hooks/use-overlay`, the store is therefore module state — one queue both
+ * subtrees can see.
+ *
+ * Claim policy is FIRST-WINS: outlets register in insertion (mount) order and
+ * the first still-alive registration for a piece is the claim. A duplicate
+ * outlet for the same piece keeps rendering its empty target div and, in the
+ * designer, explains itself; it never steals the piece.
+ *
+ * No JSX and no 'use client' directive here on purpose — this module is only
+ * ever imported from client modules (the piece wrapper and the outlet blocks).
+ */
+
+export type CheckoutPieceKey = 'flow' | 'steps' | 'summary';
+
+export const CHECKOUT_PIECE_KEYS: readonly CheckoutPieceKey[] = [
+  'flow',
+  'steps',
+  'summary'
+];
+
+/**
+ * A composition's checkout-layout preference, carried by the flow outlet.
+ * DELIBERATELY closed to the two standalone families: the unified
+ * basket-and-checkout / accordion experiences are settings-only, so a
+ * composition can never change unified-ness (and can never create a
+ * basket-to-checkout redirect loop). 'inherit' is not a value here — it is
+ * expressed as an absent preference.
+ */
+export type CheckoutFlowVariantPreference = 'one-page' | 'step-by-step';
+
+export interface CheckoutOutletRegistration {
+  /** Outlet instance id (the `useId` of the outlet block). */
+  id: string;
+  /** The portal target div; identity never changes for the outlet's life. */
+  node: HTMLElement;
+  /**
+   * The flow outlet's composed checkout-layout preference. Absent means
+   * inherit (keep the storefront's configured checkout). Only ever read
+   * through `getCheckoutFlowVariantOverride`, so only the first-wins flow
+   * claim can steer the variant.
+   */
+  flowVariant?: CheckoutFlowVariantPreference;
+}
+
+/** Insertion order = claim priority (first-wins). */
+const outletsByPiece = new Map<
+  CheckoutPieceKey,
+  CheckoutOutletRegistration[]
+>();
+
+/** Ref-counted piece presence — a piece announces on mount, retracts on unmount. */
+const pieceRefCounts = new Map<CheckoutPieceKey, number>();
+
+const listeners = new Set<() => void>();
+
+const notify = () => {
+  listeners.forEach((listener) => listener());
+};
+
+export const registerCheckoutOutlet = (
+  piece: CheckoutPieceKey,
+  registration: CheckoutOutletRegistration
+): void => {
+  const outlets = outletsByPiece.get(piece) ?? [];
+  // A re-render re-running the outlet's effect must not queue a second claim.
+  if (outlets.some((existing) => existing.id === registration.id)) return;
+
+  outletsByPiece.set(piece, [...outlets, registration]);
+  notify();
+};
+
+export const unregisterCheckoutOutlet = (
+  piece: CheckoutPieceKey,
+  id: string
+): void => {
+  const outlets = outletsByPiece.get(piece);
+  if (!outlets) return;
+
+  const index = outlets.findIndex((existing) => existing.id === id);
+  if (index === -1) return;
+
+  outlets.splice(index, 1);
+  notify();
+};
+
+/**
+ * Designer-time property edits update the preference of an already-registered
+ * outlet IN PLACE — the registration keeps its queue position (no reorder, so
+ * first-wins never flips) and its node identity. Unknown ids are a no-op.
+ */
+export const updateCheckoutOutletFlowVariant = (
+  piece: CheckoutPieceKey,
+  id: string,
+  flowVariant?: CheckoutFlowVariantPreference
+): void => {
+  const registration = outletsByPiece
+    .get(piece)
+    ?.find((existing) => existing.id === id);
+  if (!registration || registration.flowVariant === flowVariant) return;
+
+  registration.flowVariant = flowVariant;
+  notify();
+};
+
+/** First registered, still-alive outlet for the piece — first-wins. Null when none. */
+export const getCheckoutOutletClaim = (
+  piece: CheckoutPieceKey
+): CheckoutOutletRegistration | null => outletsByPiece.get(piece)?.[0] ?? null;
+
+/**
+ * The composed checkout-layout preference, if any: the first-wins flow claim's
+ * preference or null. First-wins comes for free — duplicates never steer.
+ */
+export const getCheckoutFlowVariantOverride =
+  (): CheckoutFlowVariantPreference | null =>
+    getCheckoutOutletClaim('flow')?.flowVariant ?? null;
+
+export const isCheckoutOutletWinner = (
+  piece: CheckoutPieceKey,
+  id: string
+): boolean => getCheckoutOutletClaim(piece)?.id === id;
+
+export const announceCheckoutPiece = (piece: CheckoutPieceKey): void => {
+  pieceRefCounts.set(piece, (pieceRefCounts.get(piece) ?? 0) + 1);
+  notify();
+};
+
+export const retractCheckoutPiece = (piece: CheckoutPieceKey): void => {
+  const count = pieceRefCounts.get(piece) ?? 0;
+  // A stray retract must not push the count negative and mask a later mount.
+  if (count === 0) return;
+
+  pieceRefCounts.set(piece, count - 1);
+  notify();
+};
+
+export const isCheckoutPieceMounted = (piece: CheckoutPieceKey): boolean =>
+  (pieceRefCounts.get(piece) ?? 0) > 0;
+
+export const subscribeCheckoutPieces = (listener: () => void): (() => void) => {
+  listeners.add(listener);
+
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+/** Server snapshot helpers: on the server nothing is claimed and nothing is mounted. */
+export const noClaimOnServer = (): null => null;
+export const noPieceOnServer = (): boolean => false;
+export const noFlowVariantOnServer = (): null => null;
+
+/**
+ * The editor-proven designer flag, set only after a trusted
+ * SET_THEME_EDITOR_COOKIE through the origin-guarded bridge (see
+ * theme-placeholder-client.tsx) — being framed is never enough.
+ */
+export const isThemeEditorDesigner = (): boolean =>
+  typeof window !== 'undefined' && window.__themeEditorDesigner === true;
+
+/** Test helper — clears all outlets and piece counts. */
+export const resetCheckoutPiecesForTests = (): void => {
+  outletsByPiece.clear();
+  pieceRefCounts.clear();
+  notify();
+};

package/src/chrome/chrome-fallback.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { isTrustedEditorEvent, postToEditor } from '../editor-bridge';
+import { isSlugComposedInFrame } from './composition-state';
 
 /**
  * Wraps the brand's original chrome markup.
@@ -66,32 +67,13 @@ export function ChromeFallback({
       const { type, data } = event.data || {};
       if (type !== 'UPDATE_THEME' && type !== 'LOAD_THEME') return;
 
-      const placeholders = data?.theme?.placeholders;
-      if (!Array.isArray(placeholders)) return;
-
-      const placeholder = placeholders.find(
-        (item: { slug?: string; id?: string }) =>
-          item?.slug === slug || item?.id === slug
-      );
-      const sections = placeholder?.sections;
-      // Mirror the server's takeover rule exactly: only a *composed* section
-      // replaces the project markup, and a composed section is one that reached
-      // the saved order.
-      //
-      // The `native` exclusion guards against the retired native widget path
-      // rather than supporting it. That path styled a project component in place
-      // instead of replacing it, so its sections never entered the order; the
-      // runtime is gone, but the editor can still hold such a section in a
-      // stored theme and push it here, and withdrawing the project markup for
-      // one would show the designer an empty area no visitor ever sees. It goes
-      // when the editor-side machinery does.
-      setIsOverridden(
-        Array.isArray(sections) &&
-          sections.some(
-            (section: { hidden?: boolean; type?: string }) =>
-              !section?.hidden && section?.type !== 'native'
-          )
-      );
+      // Shared with ComposableRegion so the two can never disagree about
+      // whether one slug is composed; `null` means the frame said nothing
+      // about placeholders, so the current decision stands.
+      const composed = isSlugComposedInFrame(data, slug);
+      if (composed === null) return;
+
+      setIsOverridden(composed);
     };
 
     window.addEventListener('message', handleMessage);

package/src/chrome/chrome-slot.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { getWidgetData } from '@akinon/next/data/server';
 import ThemePlaceholder from '../theme-placeholder';
-import {
-  readCompositionState,
-  warnAboutUncomposedSlot
-} from './composition-state';
+import { warnAboutUncomposedSlot } from './composition-state';
+import { getSlugCompositionState } from './composition-source';
 import { ChromeFallback } from './chrome-fallback';
 
 interface ChromeSlotProps {
@@ -30,6 +27,13 @@ interface ChromeSlotProps {
    * classes; the designer overlay keeps a real box either way.
    */
   fallbackClassName?: string;
+  /**
+   * Set false when something ELSE on the page already carries this slug's
+   * takeover affordance — the checkout body, whose ComposableRegion offers it
+   * over the live flow. A fallback-less slot then draws no designer band at
+   * all: two competing CTAs for one slug is worse than none.
+   */
+  emptyZoneBand?: boolean;
 }
 
 /**
@@ -43,24 +47,17 @@ export default async function ChromeSlot({
   fallback,
   pageContext = null,
   className,
-  fallbackClassName
+  fallbackClassName,
+  emptyZoneBand = true
 }: ChromeSlotProps) {
-  let hasComposition = false;
+  // Shared with ComposableRegion and memoized per request, so a slug mounted by
+  // both is fetched once and both reach the same conclusion.
+  const state = await getSlugCompositionState(slug);
+  const hasComposition = state.kind === 'composed';
 
-  try {
-    // The generic is the widget's attributes bag, not the widget wrapper
-    const data = await getWidgetData<{
-      theme_editor_placeholder?: unknown;
-    }>({ slug });
-
-    const state = readCompositionState(data);
-    hasComposition = state.kind === 'composed';
-    // Explain a slot that kept the project markup — see composition-state.ts
-    // for why "missing" and "empty" must not read as the same thing.
-    warnAboutUncomposedSlot(slug, state);
-  } catch {
-    // No chrome widget published yet — brand fallback stays active
-  }
+  // Explain a slot that kept the project markup — see composition-state.ts
+  // for why "missing" and "empty" must not read as the same thing.
+  warnAboutUncomposedSlot(slug, state);
 
   if (hasComposition) {
     return (
@@ -71,7 +68,9 @@ export default async function ChromeSlot({
             header composition would blank the area until a full reload. The
             same applies to a fallback-less zone: its designer band has to be
             able to return, or removing the last section leaves the area
-            undiscoverable again. */}
+            undiscoverable again. A zone whose band is suppressed needs nothing
+            here — the ComposableRegion carrying its affordance follows the same
+            theme signal and comes back on its own. */}
         {fallback ? (
           <ChromeFallback
             slug={slug}
@@ -80,9 +79,9 @@ export default async function ChromeSlot({
           >
             {fallback}
           </ChromeFallback>
-        ) : (
+        ) : emptyZoneBand ? (
           <ChromeFallback slug={slug} emptyZone initiallyOverridden />
-        )}
+        ) : null}
         <ThemePlaceholder slug={slug} pageContext={pageContext} />
       </div>
     );
@@ -94,12 +93,12 @@ export default async function ChromeSlot({
         <ChromeFallback slug={slug} wrapperClassName={fallbackClassName}>
           {fallback}
         </ChromeFallback>
-      ) : (
+      ) : emptyZoneBand ? (
         // No brand markup to take over: an uncomposed zone would render as
         // nothing at all, so the designer gets a visible band instead. The
         // live site keeps rendering nothing.
         <ChromeFallback slug={slug} emptyZone />
-      )}
+      ) : null}
       {/* Empty until the designer overrides this area from the editor */}
       <ThemePlaceholder slug={slug} pageContext={pageContext} />
     </div>

package/src/chrome/code-owned-region.tsx

@@ -3,23 +3,35 @@
 import React, { useEffect, useState } from 'react';
 
 /**
- * Wraps markup that is deliberately NOT composable — the checkout flow being
- * the canonical case. Without this, hovering the area in the designer gives
- * no feedback at all, which reads as "broken" rather than "code-owned": every
- * other region either offers the takeover affordance or an empty-zone band.
+ * Wraps markup that is deliberately not editable at all — no takeover, no
+ * placement, nothing but an explanation. Without this wrapper, hovering the
+ * area in the designer gives no feedback whatsoever, which reads as "broken"
+ * rather than "code-owned": every other region either offers the takeover
+ * affordance or an empty-zone band.
+ *
+ * The default sentence promises nothing beyond that. A mount whose area DOES
+ * have a composable body zone must pass its own `note` saying so — the promise
+ * used to be baked into the default, and it was false for any mount without
+ * one (outlet blocks only register inside the `checkout-page-body` zone, so
+ * with no such zone in the layout no composition can move anything).
+ *
+ * An area that can be taken over wholesale wants `ComposableRegion` instead:
+ * same non-destructive wrapper, but with the real affordance.
  *
  * On the live site the wrapper is inert (one attribute-carrying div, no
  * styles beyond `position: relative`). In the designer, hover draws a neutral
- * outline and a note explaining why there is no edit affordance here and
- * where the composable zones are. The overlay never intercepts the pointer,
- * so the wrapped flow stays fully usable in the preview.
+ * outline and the note. The overlay never intercepts the pointer, so the
+ * wrapped flow stays fully usable in the preview.
  */
 export function CodeOwnedRegion({
   label,
+  note,
   children
 }: {
   /** Human-readable region name, e.g. "checkout flow". */
   label: string;
+  /** Replaces the default hover-pill sentence with region-specific wording. */
+  note?: string;
   children: React.ReactNode;
 }) {
   const [inDesigner, setInDesigner] = useState(false);
@@ -75,8 +87,8 @@ export function CodeOwnedRegion({
               boxShadow: '0 1px 3px rgba(0, 0, 0, 0.25)'
             }}
           >
-            The {label} is code-owned and cannot be composed — use the zones
-            above and below it
+            {note ??
+              `The ${label} is code-owned — its internals cannot be edited here`}
           </span>
         </div>
       )}

package/src/chrome/composable-region-client.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { isTrustedEditorEvent, postToEditor } from '../editor-bridge';
+import { isThemeEditorDesigner } from './checkout-pieces';
+import { isSlugComposedInFrame } from './composition-state';
+
+/**
+ * The designer-facing half of `ComposableRegion`. See that file for what the
+ * component is for; everything below is why it is shaped the way it is.
+ *
+ * It deliberately contains NO `return null` on any path. ChromeFallback's whole
+ * contract is to disappear when the area is composed, which is exactly wrong
+ * here: the children are the real checkout flow, and losing them would lose the
+ * customer's payment session. Keeping the children unconditionally mounted is a
+ * structural property of this file rather than a rule someone has to remember.
+ *
+ * For the same reason the wrapper element is always the same single div: no
+ * conditional wrapper, no key change, no element appearing when the designer
+ * flag arrives after hydration. Only inline style VALUES flip, so the subtree
+ * below never remounts — a remount would refetch checkout state and could land
+ * mid-3DS.
+ */
+export function ComposableRegionClient({
+  slug,
+  label,
+  composedNote,
+  initiallyComposed = false,
+  children
+}: {
+  /** Placeholder slug this area hands over to, e.g. `checkout-page-body`. */
+  slug: string;
+  /** Hover-pill sentence; defaults to a generic take-it-over line. */
+  label?: string;
+  /**
+   * Hover-pill sentence shown once the area IS composed, when the live content
+   * is still rendering here (nothing in the composition placed it elsewhere).
+   * Defaults to a generic "composed, and inert on the canvas" line.
+   */
+  composedNote?: string;
+  /**
+   * True when the server rendered a composition for this slug. The affordance
+   * then starts hidden — the composition already owns the area — and comes back
+   * if the designer removes its last section.
+   */
+  initiallyComposed?: boolean;
+  children: React.ReactNode;
+}) {
+  const [inDesigner, setInDesigner] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isComposed, setIsComposed] = useState(initiallyComposed);
+
+  // Designer detection uses the editor-proven flag, NOT a framing check.
+  // Being framed is not the same as being edited: pz-next itself ships
+  // `frame-ancestors 'self' … akifast.com … akinoncloud.com`, so a REAL
+  // checkout is legitimately embedded in production — and this region makes
+  // its area pointer-inert, which on a real checkout is a customer who cannot
+  // pay. `window.__themeEditorDesigner` is set only after a trusted
+  // SET_THEME_EDITOR_COOKIE arrives through the origin-guarded bridge, which
+  // is the same signal `CheckoutPieceBridge` trusts for the same reason.
+  useEffect(() => {
+    if (isThemeEditorDesigner()) setInDesigner(true);
+  }, []);
+
+  // One listener for both questions the editor answers about this area.
+  //
+  // Designer flag: it rides a postMessage that can land AFTER this mount, and
+  // the editor sends the cookie frame only once per document — so the flag is
+  // read on mount above (it survives a late mount) and the frame itself is
+  // handled here. Acting on the frame rather than re-reading the flag when it
+  // arrives keeps this independent of which listener registered first.
+  //
+  // Composed state: whether this area is composed is decided server-side at
+  // request time, so a takeover that just happened in the editor would
+  // otherwise leave the region still advertising itself over the top of the
+  // new composition. Follow the theme the editor pushes — and offer the
+  // takeover again if the designer removes the last section.
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
+
+      const { type, data } = event.data || {};
+
+      if (type === 'SET_THEME_EDITOR_COOKIE') {
+        if (data) setInDesigner(true);
+        return;
+      }
+
+      if (type !== 'UPDATE_THEME' && type !== 'LOAD_THEME') return;
+
+      const composed = isSlugComposedInFrame(data, slug);
+      if (composed === null) return;
+
+      setIsComposed(composed);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [slug]);
+
+  const requestOverride = () => {
+    postToEditor({ type: 'REQUEST_CHROME_OVERRIDE', data: { slug } });
+  };
+
+  return (
+    <div
+      data-chrome-region={slug}
+      style={{
+        position: 'relative',
+        // Inert on the canvas whenever the flow renders in place: the capture
+        // guards that neutralize clicks, submits and Enter live on the outlet
+        // target, which only exists once a composition places one. Without
+        // this, a composed-but-unplaced flow would leave a working "place
+        // order" button on the canvas. The live site emits no value at all.
+        pointerEvents: inDesigner ? 'none' : undefined
+      }}
+    >
+      {children}
+
+      {/*
+        The overlay stays mounted for the whole designer session, composed or
+        not — only what it says changes. An overlay that unmounted on takeover
+        would leave the inert area with no explanation at all whenever the
+        composition does not place the live content elsewhere (an ordinary
+        section, or an outlet-free template): visibly dead content, no
+        feedback, which reads as a broken preview rather than a guarded one.
+      */}
+      {inDesigner && (
+        <div
+          data-chrome-region-affordance={isComposed ? undefined : ''}
+          data-chrome-region-note={isComposed ? '' : undefined}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            // Hover lives on the overlay, so detecting it never depends on the
+            // inert wrapper being a hit target.
+            pointerEvents: 'auto',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            // Composed: nothing to click, so no call-to-action scrim — just a
+            // neutral outline, the same "explained, not offered" register the
+            // code-owned note uses.
+            background:
+              isHovered && !isComposed
+                ? 'rgba(15, 23, 42, 0.55)'
+                : 'transparent',
+            outline: isHovered
+              ? isComposed
+                ? '2px dashed #cbd5e1'
+                : '2px dashed #60a5fa'
+              : 'none',
+            outlineOffset: '-2px',
+            transition: 'background 120ms ease',
+            zIndex: 30
+          }}
+        >
+          {isHovered &&
+            (isComposed ? (
+              <span
+                style={{
+                  // Sticky keeps the note readable while a tall region (the
+                  // whole checkout flow) is scrolled under the pointer.
+                  position: 'sticky',
+                  top: '12px',
+                  marginTop: '12px',
+                  background: '#0f172a',
+                  color: '#ffffff',
+                  borderRadius: '9999px',
+                  padding: '6px 14px',
+                  fontSize: '12.5px',
+                  fontWeight: 500,
+                  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.25)'
+                }}
+              >
+                {composedNote ??
+                  `This area is composed — the content below stays code-owned and is inert on the canvas`}
+              </span>
+            ) : (
+              <div
+                style={{
+                  // The checkout body is tall: a vertically centered control
+                  // lands off-screen, so the affordance rides the top edge.
+                  position: 'sticky',
+                  top: '12px',
+                  marginTop: '12px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '12px'
+                }}
+              >
+                <span
+                  style={{
+                    color: '#ffffff',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    textShadow: '0 1px 2px rgba(0,0,0,0.4)'
+                  }}
+                >
+                  {label ??
+                    `The ${slug} area is not composed yet — take it over to edit it here`}
+                </span>
+                <button
+                  type="button"
+                  onClick={requestOverride}
+                  style={{
+                    background: '#2563eb',
+                    color: '#ffffff',
+                    border: 'none',
+                    borderRadius: '6px',
+                    padding: '8px 14px',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    cursor: 'pointer'
+                  }}
+                >
+                  Edit in theme editor
+                </button>
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/chrome/composable-region.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { ComposableRegionClient } from './composable-region-client';
+import { getSlugCompositionState } from './composition-source';
+
+/**
+ * Wraps live, code-owned markup that a composition may TAKE OVER — the checkout
+ * flow being the case it exists for.
+ *
+ * Every other composable area offers its takeover through the markup a
+ * ChromeSlot can withdraw: hover the project's header, press "Edit in theme
+ * editor", the composition replaces it. Checkout cannot work that way. Its flow
+ * must never be replaced or unmounted — a composition arranges where the flow,
+ * steps and summary render through outlet blocks, and the flow itself always
+ * survives — so the slot that renders the composition carries no fallback and
+ * the flow stays outside it. That left the checkout body advertising itself
+ * with a slim dashed band while the actual page content underneath answered a
+ * hover with nothing, which reads as "this page is not editable".
+ *
+ * This region closes that gap: hovering the real checkout content in the
+ * designer offers the same scrim and the same "Edit in theme editor" button
+ * every other page has, posting `REQUEST_CHROME_OVERRIDE` for the body slug so
+ * the editor opens its template picker. The children are never withdrawn in any
+ * state — see `composable-region-client.tsx` for why that is the point.
+ *
+ * Mount it AFTER the slot for the same slug: outlet blocks inside the
+ * composition must register before the flow's mount latch runs.
+ */
+export default async function ComposableRegion({
+  slug,
+  label,
+  composedNote,
+  children
+}: {
+  /** Placeholder slug this area hands over to, e.g. `checkout-page-body`. */
+  slug: string;
+  /** Hover-pill sentence; defaults to a generic take-it-over line. */
+  label?: string;
+  /**
+   * Hover-pill sentence for the composed state, when the live content still
+   * renders here because nothing in the composition placed it elsewhere.
+   */
+  composedNote?: string;
+  children: React.ReactNode;
+}) {
+  const state = await getSlugCompositionState(slug);
+
+  return (
+    <ComposableRegionClient
+      slug={slug}
+      label={label}
+      composedNote={composedNote}
+      initiallyComposed={state.kind === 'composed'}
+    >
+      {children}
+    </ComposableRegionClient>
+  );
+}