@akinon/pz-theme 2.0.36-beta.0 → 2.0.36

package/src/components/action-toolbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 interface ActionToolbarProps {
   label: string;
@@ -14,6 +15,41 @@ interface ActionToolbarProps {
   onRename?: (newLabel: string) => void;
 }
 
+/**
+ * The element a toolbar belongs to: the one the composition's own styles are
+ * emitted onto (`collectBlockCSS` / `generateThemeCSS`), and therefore the one
+ * that can be given a clipping context.
+ */
+const HOST_SELECTOR = '[data-block-id],[data-section-id]';
+
+/**
+ * At <body> the toolbar no longer inherits its host's stacking context, so it
+ * has to out-rank whatever the storefront paints — a sticky header or an open
+ * drawer would otherwise cover the controls it just became reachable from.
+ * `zIndex` still orders block chrome above section chrome.
+ */
+const CHROME_Z_BASE = 2147483000;
+
+// `useLayoutEffect` would warn during SSR; the toolbar only ever mounts in the
+// designer, but the module is part of a server-rendered package.
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+/**
+ * A host with no box (hidden block/section) reports a zero rect, which would
+ * park the portaled toolbar at the viewport origin instead of hiding it with
+ * the thing it manages — the containment the old in-tree render gave for free.
+ */
+const isHostRendered = (host: HTMLElement): boolean => {
+  if (!host.isConnected) return false;
+
+  for (let node: Element | null = host; node; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === 'none') return false;
+  }
+
+  return true;
+};
+
 const LockIcon = () => (
   <svg
     width="14"
@@ -43,6 +79,17 @@ const LockIcon = () => (
   </svg>
 );
 
+/**
+ * The toolbar draws *above* its host's top edge — outside the host's box.
+ * Rendered as a child of the host, any clipping declaration the composition
+ * puts on it (`overflow`, `overflow-x/y`, `clip-path`, `contain`, …) cuts the
+ * toolbar away, and rename / duplicate / delete exist nowhere else: the sidebar
+ * offers only select, drag, toggle-visibility and add-child. The clip is real
+ * CSS the storefront must keep, so the editor's own chrome moves out of its
+ * reach instead of the property being banned — it is portaled to <body>, where
+ * no composition-owned element is an ancestor, and pinned back onto the host's
+ * viewport box so it lands exactly where it always did.
+ */
 export default function ActionToolbar({
   label,
   isLocked = false,
@@ -57,6 +104,100 @@ export default function ActionToolbar({
   const [isRenaming, setIsRenaming] = useState(false);
   const [newLabel, setNewLabel] = useState(label);
   const inputRef = useRef<HTMLInputElement>(null);
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  const measureRef = useRef<(() => void) | null>(null);
+  const [origin, setOrigin] = useState<{ top: number; left: number } | null>(
+    null
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+
+    const host =
+      anchor.closest<HTMLElement>(HOST_SELECTOR) ?? anchor.parentElement;
+    if (!host) return;
+
+    let frame = 0;
+
+    const measure = () => {
+      frame = 0;
+
+      const rect = host.getBoundingClientRect();
+
+      // Only a host with no box at all can be the hidden one, which keeps the
+      // ancestor walk off the scroll path.
+      if (rect.width === 0 && rect.height === 0 && !isHostRendered(host)) {
+        setOrigin(null);
+        return;
+      }
+
+      // `getBoundingClientRect` is the border box, but an absolutely positioned
+      // child used to resolve against the host's padding box — subtracting the
+      // border back out keeps a bordered block's toolbar where it was.
+      const next = {
+        top: rect.top + host.clientTop,
+        left: rect.left + host.clientLeft
+      };
+
+      setOrigin((previous) =>
+        previous && previous.top === next.top && previous.left === next.left
+          ? previous
+          : next
+      );
+    };
+
+    const schedule = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(measure);
+    };
+
+    measureRef.current = measure;
+    measure();
+
+    // `true` so scrolling inside any nested scroller repositions too — scroll
+    // does not bubble.
+    window.addEventListener('scroll', schedule, true);
+    window.addEventListener('resize', schedule);
+
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(schedule);
+    resizeObserver?.observe(host);
+    resizeObserver?.observe(document.documentElement);
+
+    // Hiding a block or section only rewrites the host's inline style, and
+    // reflowing content above it moves the host without resizing it — neither
+    // reaches a scroll or resize listener.
+    const mutationObserver =
+      typeof MutationObserver === 'undefined'
+        ? null
+        : new MutationObserver(schedule);
+    mutationObserver?.observe(host, {
+      attributes: true,
+      attributeFilter: ['style', 'class', 'hidden']
+    });
+
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      measureRef.current = null;
+      window.removeEventListener('scroll', schedule, true);
+      window.removeEventListener('resize', schedule);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    };
+  }, []);
+
+  // Reordering a block — what this toolbar's own Move Up / Move Down buttons
+  // do — moves the host without resizing it, without scrolling and without
+  // touching its own attributes, so none of the listeners above see it; the
+  // same is true of an insertion or a text edit anywhere above it. The canvas
+  // re-renders for all of them, so a render is a measuring point too. Bailing
+  // out on an unchanged origin keeps this from looping.
+  useIsomorphicLayoutEffect(() => {
+    measureRef.current?.();
+  });
 
   useEffect(() => {
     if (isRenaming && inputRef.current) {
@@ -91,10 +232,10 @@ export default function ActionToolbar({
       handleCancelRename();
     }
   };
-  return (
+  const toolbar = (
     <div
+      data-action-toolbar=""
       className="absolute -top-0.5 left-0 -translate-y-full flex items-center pointer-events-auto gap-1 min-w-max"
-      style={{ zIndex }}
     >
       <div className="flex items-center gap-1">
         {isRenaming ? (
@@ -302,4 +443,42 @@ export default function ActionToolbar({
       </div>
     </div>
   );
+
+  return (
+    <>
+      {/*
+        The handle on the host, left where the toolbar used to render so the
+        toolbar still belongs to whatever mounted it — no prop plumbing, and a
+        block toolbar still resolves to its own wrapper rather than an
+        ancestor's. `display: none` is inline rather than the `hidden`
+        attribute so no brand reset can promote the handle into a flex item or
+        a grid cell and open a gap the storefront does not have.
+      */}
+      <span
+        ref={anchorRef}
+        data-action-toolbar-anchor=""
+        style={{ display: 'none' }}
+      />
+      {origin
+        ? createPortal(
+            // A zero-size frame pinned to the host's top-left corner. The
+            // toolbar inside it keeps its original offsets, so the rendered
+            // position is the one it had as a child of the host.
+            <div
+              style={{
+                position: 'fixed',
+                top: origin.top,
+                left: origin.left,
+                width: 0,
+                height: 0,
+                zIndex: CHROME_Z_BASE + zIndex
+              }}
+            >
+              {toolbar}
+            </div>,
+            document.body
+          )
+        : null}
+    </>
+  );
 }

package/src/components/part-state-preview.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * Pins a part's state open while the designer styles it.
+ *
+ * Hover and focus cannot be held: the moment the cursor leaves the canvas for
+ * the colour picker, the state is gone and the designer is typing blind. The
+ * editor therefore says "show me this part in this state" and the state is
+ * written onto the matching elements as `data-state`, which the generated
+ * rules match alongside the real `:hover` / `:focus-visible`.
+ *
+ * Nothing here runs on the storefront — it only mounts in the designer.
+ */
+const PREVIEW_ATTRIBUTE = 'data-part-state-preview';
+
+export const PartStatePreview = ({ isDesigner }: { isDesigner: boolean }) => {
+  useEffect(() => {
+    if (!isDesigner) return undefined;
+
+    const clear = () => {
+      document
+        .querySelectorAll<HTMLElement>(`[${PREVIEW_ATTRIBUTE}]`)
+        .forEach((element) => {
+          const pinned = element.getAttribute(PREVIEW_ATTRIBUTE) || '';
+          const current = element.getAttribute('data-state') || '';
+
+          // The renderer may have changed the element's real state while the
+          // preview was pinned — a swatch became selected, a button became
+          // disabled. Restoring the remembered value would write that away, so
+          // only the pinned token is removed.
+          const next = current
+            .split(/\s+/)
+            .filter((token) => token && token !== pinned)
+            .join(' ');
+
+          if (next) element.setAttribute('data-state', next);
+          else element.removeAttribute('data-state');
+          element.removeAttribute(PREVIEW_ATTRIBUTE);
+        });
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'PREVIEW_PART_STATE') return;
+
+      const { blockId, partName, state } = event.data.data || {};
+      clear();
+
+      if (!blockId || !partName || !state) return;
+
+      const block = document.querySelector<HTMLElement>(
+        `[data-block-id="${CSS.escape(String(blockId))}"]`
+      );
+      if (!block) return;
+
+      Array.from(
+        block.querySelectorAll<HTMLElement>(
+          `[data-part="${CSS.escape(String(partName))}"]`
+        )
+      )
+        // Part names are shared between blocks on purpose, so a descendant
+        // search also finds the identically-named part of a block nested
+        // inside this one. A part belongs to its closest `[data-block-id]`
+        // ancestor — the same rule a click already uses to decide which part
+        // it selected (hooks/use-designer-features). Stamping a nested block's
+        // part would fire that block's own state rules and show the author a
+        // canvas that disagrees with the storefront.
+        .filter((element) => element.closest('[data-block-id]') === block)
+        .forEach((element) => {
+          const existing = element.getAttribute('data-state') || '';
+          // The pinned token is remembered, not the whole value: the renderer
+          // is free to change the element's real state while it is pinned.
+          element.setAttribute(PREVIEW_ATTRIBUTE, String(state));
+          element.setAttribute(
+            'data-state',
+            existing ? `${existing} ${state}` : String(state)
+          );
+        });
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      clear();
+    };
+  }, [isDesigner]);
+
+  return null;
+};
+
+export default PartStatePreview;