create-yss-spec 1.1.1 → 1.1.3

package/template/.codex/skills/data-analytics/src/analytics-app/layout/AnalyticsLayoutCanvas.tsx

@@ -0,0 +1,536 @@
+import {
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+import {
+  type AnalyticsLayoutItemState,
+  type AnalyticsLayoutPlacement,
+  type AnalyticsLayoutPlacementIntent,
+  type AnalyticsLayoutWidth,
+  normalize,
+  packRows,
+  predictPlacement
+} from "./analyticsLayoutCore";
+
+export type { AnalyticsLayoutWidth } from "./analyticsLayoutCore";
+
+export type AnalyticsLayoutRenderActions = {
+  setLayout: (layout: AnalyticsLayoutWidth) => void;
+};
+
+export type AnalyticsLayoutBlock = {
+  className?: string;
+  defaultLayout?: AnalyticsLayoutWidth;
+  id: string;
+  render: (layout: AnalyticsLayoutWidth, actions: AnalyticsLayoutRenderActions) => ReactNode;
+};
+
+type BlockRect = {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+};
+
+type DragSession = {
+  currentPoint: { x: number; y: number };
+  draggedId: string;
+  intent: AnalyticsLayoutPlacementIntent;
+  isStacked: boolean;
+  pointerOffset: { x: number; y: number };
+  previewItems: AnalyticsLayoutItemState[];
+  rects: Map<string, BlockRect>;
+  sourceRect: BlockRect;
+  startItems: AnalyticsLayoutItemState[];
+  targetId: string | null;
+};
+
+const STACK_BREAKPOINT_PX = 760;
+const AUTO_SCROLL_EDGE_PX = 72;
+const AUTO_SCROLL_STEP_PX = 18;
+const REORDER_INSERT_BAND_RATIO = 0.3;
+const SPLIT_SIDE_ZONE_RATIO = 0.4;
+const SPLIT_INDICATOR_OUTSET_PX = 8;
+
+function parseStoredLayout(storageKey: string | null): unknown {
+  if (!storageKey) return undefined;
+  const stored = window.localStorage.getItem(storageKey);
+  if (!stored) return undefined;
+  try {
+    return JSON.parse(stored);
+  } catch {
+    return undefined;
+  }
+}
+
+function sameItems(first: AnalyticsLayoutItemState[], second: AnalyticsLayoutItemState[]) {
+  return (
+    first.length === second.length
+    && first.every((item, index) => item.id === second[index]?.id && item.layout === second[index]?.layout)
+  );
+}
+
+function rectFromElement(element: HTMLElement): BlockRect {
+  const rect = element.getBoundingClientRect();
+  return {
+    bottom: rect.bottom,
+    height: rect.height,
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    width: rect.width
+  };
+}
+
+function distanceToRect(x: number, y: number, rect: BlockRect) {
+  const dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
+  const dy = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
+  return Math.hypot(dx, dy);
+}
+
+function shouldCancelDrag(target: EventTarget | null, cancelSelector: string) {
+  return target instanceof Element && Boolean(target.closest(cancelSelector));
+}
+
+function DragHandleIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="analytics-layout-grab-handle-icon"
+      fill="none"
+      focusable="false"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+    >
+      <g transform="rotate(-90 12 12)">
+        <circle cx="5" cy="8.5" fill="currentColor" r="2" />
+        <circle cx="12" cy="8.5" fill="currentColor" r="2" />
+        <circle cx="19" cy="8.5" fill="currentColor" r="2" />
+        <circle cx="5" cy="15.5" fill="currentColor" r="2" />
+        <circle cx="12" cy="15.5" fill="currentColor" r="2" />
+        <circle cx="19" cy="15.5" fill="currentColor" r="2" />
+      </g>
+    </svg>
+  );
+}
+
+export function AnalyticsLayoutCanvas({
+  ariaLabel,
+  blocks,
+  cancelSelector,
+  className,
+  isEditMode = false,
+  itemClassName,
+  layoutResetKey = 0,
+  onLayoutChange,
+  storageKey
+}: {
+  ariaLabel: string;
+  blocks: AnalyticsLayoutBlock[];
+  cancelSelector: string;
+  className?: string;
+  isEditMode?: boolean;
+  itemClassName?: (block: AnalyticsLayoutBlock, layout: AnalyticsLayoutWidth) => string;
+  layoutResetKey?: number;
+  onLayoutChange?: (items: AnalyticsLayoutItemState[]) => void;
+  storageKey: string | null;
+}) {
+  const [items, setItems] = useState<AnalyticsLayoutItemState[]>(() => normalize(blocks));
+  const [dragSession, setDragSession] = useState<DragSession | null>(null);
+  const blockById = useMemo(() => new Map(blocks.map((block) => [block.id, block])), [blocks]);
+  const canvasRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef(new Map<string, HTMLElement>());
+  const dragSessionRef = useRef<DragSession | null>(null);
+  const dragFrameRef = useRef<number | null>(null);
+  const dragPointRef = useRef<{ x: number; y: number } | null>(null);
+  const layoutLoadRef = useRef<{ layoutResetKey: number; storageKey: string | null } | null>(null);
+  const onLayoutChangeRef = useRef(onLayoutChange);
+
+  useEffect(() => {
+    onLayoutChangeRef.current = onLayoutChange;
+  }, [onLayoutChange]);
+
+  useLayoutEffect(() => {
+    const previousLoad = layoutLoadRef.current;
+    const shouldReloadStoredLayout =
+      !previousLoad
+      || previousLoad.layoutResetKey !== layoutResetKey
+      || previousLoad.storageKey !== storageKey;
+    layoutLoadRef.current = { layoutResetKey, storageKey };
+    setItems((currentItems) => {
+      const nextItems = normalize(
+        blocks,
+        shouldReloadStoredLayout ? parseStoredLayout(storageKey) : currentItems
+      );
+      onLayoutChangeRef.current?.(nextItems);
+      return nextItems;
+    });
+  }, [blocks, layoutResetKey, storageKey]);
+
+  useEffect(() => {
+    dragSessionRef.current = dragSession;
+  }, [dragSession]);
+
+  useEffect(() => {
+    if (!dragSession) return;
+    function refreshMeasuredRects() {
+      const session = dragSessionRef.current;
+      const canvas = canvasRef.current;
+      if (!session || !canvas) return;
+      const nextSession: DragSession = {
+        ...session,
+        isStacked: canvas.getBoundingClientRect().width < STACK_BREAKPOINT_PX,
+        rects: measureBlockRects()
+      };
+      dragSessionRef.current = nextSession;
+      setDragSession(nextSession);
+    }
+    window.addEventListener("resize", refreshMeasuredRects);
+    window.addEventListener("scroll", refreshMeasuredRects, true);
+    return () => {
+      window.removeEventListener("resize", refreshMeasuredRects);
+      window.removeEventListener("scroll", refreshMeasuredRects, true);
+    };
+  }, [dragSession?.draggedId]);
+
+  useEffect(() => {
+    return () => {
+      if (dragFrameRef.current != null) window.cancelAnimationFrame(dragFrameRef.current);
+    };
+  }, []);
+
+  const rows = packRows(items);
+
+  function measureBlockRects() {
+    const rects = new Map<string, BlockRect>();
+    itemRefs.current.forEach((element, id) => {
+      rects.set(id, rectFromElement(element));
+    });
+    return rects;
+  }
+
+  function commitItems(nextItems: AnalyticsLayoutItemState[]) {
+    const normalizedItems = normalize(blocks, nextItems);
+    setItems(normalizedItems);
+    onLayoutChangeRef.current?.(normalizedItems);
+    if (!isEditMode && storageKey) {
+      window.localStorage.setItem(storageKey, JSON.stringify(normalizedItems));
+    }
+  }
+
+  function setBlockLayout(blockId: string, layout: AnalyticsLayoutWidth) {
+    commitItems(items.map((item) => (item.id === blockId ? { ...item, layout } : item)));
+  }
+
+  function findPlacement(
+    clientX: number,
+    clientY: number,
+    session: DragSession,
+    rects: Map<string, BlockRect>
+  ): AnalyticsLayoutPlacement {
+    const candidates = [...rects.entries()]
+      .filter(([id]) => id !== session.draggedId)
+      .sort((first, second) => first[1].top - second[1].top || first[1].left - second[1].left);
+    if (!candidates.length) {
+      return { draggedId: session.draggedId, intent: "end" };
+    }
+
+    const firstRect = candidates[0][1];
+    const lastRect = candidates[candidates.length - 1][1];
+
+    let targetId = candidates[0][0];
+    let targetRect = candidates[0][1];
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const [id, rect] of candidates) {
+      const distance = distanceToRect(clientX, clientY, rect);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        targetId = id;
+        targetRect = rect;
+      }
+    }
+
+    const sideBand = targetRect.width * SPLIT_SIDE_ZONE_RATIO;
+    const isInsideTargetHeight = clientY >= targetRect.top && clientY <= targetRect.bottom;
+    const insertBand = Math.min(targetRect.height * REORDER_INSERT_BAND_RATIO, targetRect.height / 2);
+    const isBeforeBand = isInsideTargetHeight && clientY < targetRect.top + insertBand;
+    const isAfterBand = isInsideTargetHeight && clientY > targetRect.bottom - insertBand;
+    if (isBeforeBand) {
+      return { draggedId: session.draggedId, intent: "before", targetId };
+    }
+    if (isAfterBand) {
+      return { draggedId: session.draggedId, intent: "after", targetId };
+    }
+    if (!session.isStacked && isInsideTargetHeight && clientX < targetRect.left + sideBand) {
+      return { draggedId: session.draggedId, intent: "pair-before", targetId };
+    }
+    if (!session.isStacked && isInsideTargetHeight && clientX > targetRect.right - sideBand) {
+      return { draggedId: session.draggedId, intent: "pair-after", targetId };
+    }
+
+    if (clientY < firstRect.top + firstRect.height / 2) {
+      return { draggedId: session.draggedId, intent: "before", targetId: candidates[0][0] };
+    }
+    if (clientY > lastRect.top + lastRect.height / 2) {
+      return { draggedId: session.draggedId, intent: "end" };
+    }
+
+    const targetItem = session.startItems.find((item) => item.id === targetId);
+    if (targetItem?.layout === "half") {
+      const targetCenterX = targetRect.left + targetRect.width / 2;
+      return {
+        draggedId: session.draggedId,
+        intent: clientX < targetCenterX ? "before" : "after",
+        targetId
+      };
+    }
+
+    const targetCenterY = targetRect.top + targetRect.height / 2;
+    return {
+      draggedId: session.draggedId,
+      intent: clientY < targetCenterY ? "before" : "after",
+      targetId
+    };
+  }
+
+  function autoScroll(clientY: number) {
+    if (clientY < AUTO_SCROLL_EDGE_PX) {
+      window.scrollBy({ top: -AUTO_SCROLL_STEP_PX });
+    } else if (clientY > window.innerHeight - AUTO_SCROLL_EDGE_PX) {
+      window.scrollBy({ top: AUTO_SCROLL_STEP_PX });
+    }
+  }
+
+  function applyDragPoint(clientX: number, clientY: number) {
+    const session = dragSessionRef.current;
+    if (!session) return;
+    autoScroll(clientY);
+    const rects = measureBlockRects();
+    const placement = findPlacement(clientX, clientY, session, rects);
+    const predictedItems = predictPlacement(session.startItems, placement);
+    const previewChanged = !sameItems(predictedItems, session.previewItems);
+    const previewItems = previewChanged ? predictedItems : session.previewItems;
+    const nextSession: DragSession = {
+      ...session,
+      currentPoint: { x: clientX, y: clientY },
+      intent: placement.intent,
+      previewItems,
+      rects,
+      targetId: placement.targetId ?? null
+    };
+    dragSessionRef.current = nextSession;
+    setDragSession(nextSession);
+  }
+
+  function scheduleDragPoint(clientX: number, clientY: number) {
+    dragPointRef.current = { x: clientX, y: clientY };
+    if (dragFrameRef.current != null) return;
+    dragFrameRef.current = window.requestAnimationFrame(() => {
+      dragFrameRef.current = null;
+      const point = dragPointRef.current;
+      if (!point) return;
+      applyDragPoint(point.x, point.y);
+    });
+  }
+
+  function startDragSession(event: ReactPointerEvent<HTMLElement>, blockId: string) {
+    if (!isEditMode) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    if (shouldCancelDrag(event.target, cancelSelector)) return;
+    const element = itemRefs.current.get(blockId);
+    const canvas = canvasRef.current;
+    if (!element || !canvas) return;
+    event.preventDefault();
+    element.setPointerCapture?.(event.pointerId);
+    const sourceRect = rectFromElement(element);
+    const rects = measureBlockRects();
+    const canvasRect = canvas.getBoundingClientRect();
+    const startItems = normalize(blocks, items);
+    const session: DragSession = {
+      currentPoint: { x: event.clientX, y: event.clientY },
+      draggedId: blockId,
+      intent: "end",
+      isStacked: canvasRect.width < STACK_BREAKPOINT_PX,
+      pointerOffset: {
+        x: event.clientX - sourceRect.left,
+        y: event.clientY - sourceRect.top
+      },
+      previewItems: startItems,
+      rects,
+      sourceRect,
+      startItems,
+      targetId: null
+    };
+    dragSessionRef.current = session;
+    setDragSession(session);
+  }
+
+  function handlePointerDown(event: ReactPointerEvent<HTMLDivElement>, blockId: string) {
+    startDragSession(event, blockId);
+  }
+
+  function finishDrag(commit: boolean) {
+    const session = dragSessionRef.current;
+    if (dragFrameRef.current != null) {
+      window.cancelAnimationFrame(dragFrameRef.current);
+      dragFrameRef.current = null;
+    }
+    dragPointRef.current = null;
+    dragSessionRef.current = null;
+    setDragSession(null);
+    if (commit && session) {
+      commitItems(session.previewItems);
+    }
+  }
+
+  function handlePointerMove(event: ReactPointerEvent<HTMLDivElement>) {
+    if (!dragSessionRef.current) return;
+    event.preventDefault();
+    scheduleDragPoint(event.clientX, event.clientY);
+  }
+
+  function ghostStyle(session: DragSession): CSSProperties {
+    return {
+      height: session.sourceRect.height,
+      left: session.currentPoint.x - session.pointerOffset.x,
+      top: session.currentPoint.y - session.pointerOffset.y,
+      width: session.sourceRect.width
+    };
+  }
+
+  function dropIndicatorStyle(session: DragSession): { className: string; style: CSSProperties } | null {
+    if (session.intent === "hold") return null;
+    const canvas = canvasRef.current;
+    if (!canvas) return null;
+    const canvasRect = canvas.getBoundingClientRect();
+    const candidates = [...session.rects.entries()]
+      .filter(([id]) => id !== session.draggedId)
+      .sort((first, second) => first[1].top - second[1].top || first[1].left - second[1].left);
+    if (!candidates.length) return null;
+
+    if (session.intent === "pair-before" || session.intent === "pair-after") {
+      if (!session.targetId) return null;
+      const targetRect = session.rects.get(session.targetId);
+      if (!targetRect) return null;
+      const lineX = session.intent === "pair-before"
+        ? targetRect.left - SPLIT_INDICATOR_OUTSET_PX
+        : targetRect.right + SPLIT_INDICATOR_OUTSET_PX;
+      return {
+        className: "analytics-layout-drop-indicator is-split",
+        style: {
+          height: targetRect.height,
+          left: lineX - canvasRect.left,
+          top: targetRect.top - canvasRect.top
+        }
+      };
+    }
+
+    const targetRect = session.targetId
+      ? session.rects.get(session.targetId)
+      : candidates[candidates.length - 1]?.[1];
+    if (!targetRect) return null;
+    const lineY = session.intent === "before"
+      ? targetRect.top
+      : targetRect.bottom;
+    return {
+      className: "analytics-layout-drop-indicator is-reorder",
+      style: {
+        left: 0,
+        top: lineY - canvasRect.top,
+        width: canvasRect.width
+      }
+    };
+  }
+
+  const dropIndicator = dragSession ? dropIndicatorStyle(dragSession) : null;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={`analytics-layout-canvas ${isEditMode ? "is-edit-mode" : ""} ${dragSession ? "is-layout-dragging" : ""} ${className ?? ""}`.trim()}
+      data-analytics-layout-canvas
+      data-edit-mode={isEditMode ? "true" : "false"}
+      onPointerCancel={() => finishDrag(false)}
+      onPointerMove={handlePointerMove}
+      onPointerUp={() => finishDrag(true)}
+      ref={canvasRef}
+    >
+      {dropIndicator ? (
+        <div
+          aria-hidden="true"
+          className={dropIndicator.className}
+          data-image-export-exclude="true"
+          style={dropIndicator.style}
+        />
+      ) : null}
+      {rows.map((row, rowIndex) => (
+        <div
+          className={`analytics-layout-row ${row.length === 2 ? "is-half-row" : "is-full-row"}`}
+          key={row.map((item) => item.id).join(":")}
+        >
+          {row.map((item) => {
+            const block = blockById.get(item.id);
+            if (!block) return null;
+            const isDragged = dragSession?.draggedId === item.id;
+            const isTarget = dragSession?.targetId === item.id;
+            const rendered = block.render(item.layout, {
+              setLayout: (nextLayout) => setBlockLayout(item.id, nextLayout)
+            });
+            return (
+              <div
+                className={`analytics-layout-item layout-${item.layout} ${block.className ?? ""} ${itemClassName?.(block, item.layout) ?? ""} ${isDragged ? "is-dragging" : ""} ${isTarget ? `is-drop-target intent-zone-${dragSession?.intent}` : ""}`.trim()}
+                data-analytics-layout-item
+                data-layout-block-id={item.id}
+                data-layout-row-index={rowIndex}
+                data-layout-width={item.layout}
+                key={item.id}
+                ref={(node) => {
+                  if (node) itemRefs.current.set(item.id, node);
+                  else itemRefs.current.delete(item.id);
+                }}
+              >
+                {isEditMode ? (
+                  <div
+                    aria-hidden="true"
+                    className="analytics-layout-grab-handle"
+                    data-image-export-exclude="true"
+                    onPointerDown={(event) => handlePointerDown(event, item.id)}
+                    title="Drag to reorder"
+                  >
+                    <DragHandleIcon />
+                  </div>
+                ) : null}
+                <div className="analytics-layout-item-shell">
+                  {rendered}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+      {dragSession ? (
+        <div
+          aria-hidden="true"
+          className="analytics-layout-ghost"
+          data-image-export-exclude="true"
+          style={ghostStyle(dragSession)}
+        >
+          {blockById.get(dragSession.draggedId)?.render(
+            dragSession.startItems.find((item) => item.id === dragSession.draggedId)?.layout ?? "full",
+            { setLayout: () => undefined }
+          )}
+        </div>
+      ) : null}
+    </section>
+  );
+}