@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/components/theme-editor/blocks/video-block.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+
+const getVideoEmbedUrl = (
+  url: string,
+  properties?: {
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+  }
+) => {
+  if (!url) return null;
+
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    let videoId = '';
+    if (url.includes('youtu.be/')) {
+      videoId = url.split('youtu.be/')[1].split('?')[0];
+    } else if (url.includes('watch?v=')) {
+      videoId = url.split('watch?v=')[1].split('&')[0];
+    } else if (url.includes('embed/')) {
+      videoId = url.split('embed/')[1].split('?')[0];
+    }
+
+    if (!videoId) return null;
+
+    const params = new URLSearchParams();
+    if (properties?.autoplay) params.append('autoplay', '1');
+    if (properties?.loop) {
+      params.append('loop', '1');
+      params.append('playlist', videoId);
+    }
+    if (properties?.muted) params.append('mute', '1');
+    if (properties?.controls === false) params.append('controls', '0');
+
+    const queryString = params.toString();
+    return `https://www.youtube.com/embed/${videoId}${
+      queryString ? '?' + queryString : ''
+    }`;
+  }
+
+  if (url.includes('vimeo.com')) {
+    const videoId = url.split('vimeo.com/')[1]?.split('?')[0];
+
+    if (!videoId) return null;
+
+    const params = new URLSearchParams();
+    if (properties?.autoplay) params.append('autoplay', '1');
+    if (properties?.loop) params.append('loop', '1');
+    if (properties?.muted) params.append('muted', '1');
+    if (properties?.controls === false) params.append('controls', '0');
+
+    const queryString = params.toString();
+    return `https://player.vimeo.com/video/${videoId}${
+      queryString ? '?' + queryString : ''
+    }`;
+  }
+
+  if (url.match(/\.(mp4|webm|ogg)$/i)) {
+    return url;
+  }
+
+  return null;
+};
+
+const VideoBlock = ({ block }: BlockRendererProps) => {
+  const videoUrl = block.value;
+  const properties = block.properties || {};
+
+  const embedUrl = getVideoEmbedUrl(videoUrl, properties);
+
+  let content;
+
+  if (!videoUrl || !embedUrl) {
+    content = (
+      <div
+        style={{
+          minHeight: '300px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#f0f0f0',
+          color: '#666',
+          fontSize: '14px'
+        }}
+      >
+        {!videoUrl ? 'No video URL provided' : 'Invalid video URL'}
+      </div>
+    );
+  } else if (embedUrl.includes('youtube.com') || embedUrl.includes('vimeo.com')) {
+    content = (
+      <iframe
+        src={embedUrl}
+        style={{
+          width: '100%',
+          height: '400px',
+          border: 'none'
+        }}
+        allow="autoplay; fullscreen; picture-in-picture"
+        allowFullScreen
+      />
+    );
+  } else {
+    content = (
+      <video
+        src={embedUrl}
+        controls={properties.controls !== false}
+        autoPlay={properties.autoplay}
+        loop={properties.loop}
+        muted={properties.muted}
+        style={{
+          width: '100%',
+          height: 'auto'
+        }}
+      />
+    );
+  }
+
+  return content;
+};
+
+export default VideoBlock;

package/components/theme-editor/components/action-toolbar.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface ActionToolbarProps {
+  label: string;
+  isLocked?: boolean;
+  zIndex?: number;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+}
+
+const LockIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M7 10V7.5C7 4.46243 9.46243 2 12.5 2C15.5376 2 18 4.46243 18 7.5V10"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+    />
+    <path
+      d="M7 10H17C18.1046 10 19 10.8954 19 12V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19V12C5 10.8954 5.89543 10 7 10Z"
+      stroke="currentColor"
+      strokeWidth="1.7"
+    />
+    <path
+      d="M12 14V17"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export default function ActionToolbar({
+  label,
+  isLocked = false,
+  zIndex = 30,
+  onMoveUp,
+  onMoveDown,
+  onDuplicate,
+  onToggleVisibility,
+  onDelete,
+  onRename
+}: ActionToolbarProps) {
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [newLabel, setNewLabel] = useState(label);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isRenaming && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isRenaming]);
+
+  const handleStartRename = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setNewLabel(label);
+    setIsRenaming(true);
+  };
+
+  const handleSaveRename = () => {
+    if (newLabel.trim() && onRename) {
+      onRename(newLabel.trim());
+    }
+    setIsRenaming(false);
+  };
+
+  const handleCancelRename = () => {
+    setNewLabel(label);
+    setIsRenaming(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      handleSaveRename();
+    } else if (e.key === 'Escape') {
+      handleCancelRename();
+    }
+  };
+  return (
+    <div
+      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 ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={newLabel}
+            onChange={(e) => setNewLabel(e.target.value)}
+            onBlur={handleSaveRename}
+            onKeyDown={handleKeyDown}
+            onClick={(e) => e.stopPropagation()}
+            className="bg-[#4482ff] text-white text-sm font-semibold p-2.5 rounded outline-none border-2 border-white"
+          />
+        ) : (
+          <div
+            className="bg-[#4482ff] text-white text-sm font-semibold p-2.5 rounded cursor-text"
+            onClick={handleStartRename}
+            title="Click to rename"
+          >
+            {label}
+          </div>
+        )}
+        {isLocked && (
+          <div
+            className="flex h-10 w-10 items-center justify-center rounded border border-amber-300/25 bg-amber-400/15 text-amber-100"
+            title="Locked"
+            aria-label="Locked"
+          >
+            <LockIcon />
+          </div>
+        )}
+      </div>
+      <div className="h-10 bg-black rounded text-white grid grid-cols-5 items-center gap-3 px-5">
+        <button
+          className={
+            isLocked
+              ? 'cursor-not-allowed opacity-40'
+              : 'hover:opacity-70 transition-opacity'
+          }
+          title="Move Up"
+          disabled={isLocked}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMoveUp?.();
+          }}
+        >
+          <svg
+            id="a"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 9.23 13"
+            height={14}
+            width={14}
+          >
+            <path
+              d="M3.73,3.02l-2.24,2.24c-.36.33-.92.31-1.25-.04-.32-.34-.32-.87,0-1.21L3.99.26c.35-.34.91-.34,1.25,0l3.75,3.75c.33.36.3.92-.06,1.25-.34.31-.86.31-1.19,0l-2.24-2.24v9.13c-.02.49-.43.87-.92.85-.46-.02-.84-.39-.85-.85V3.02Z"
+              fill="#fff"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+        <button
+          className={
+            isLocked
+              ? 'cursor-not-allowed opacity-40'
+              : 'hover:opacity-70 transition-opacity'
+          }
+          title="Move Down"
+          disabled={isLocked}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMoveDown?.();
+          }}
+        >
+          <svg
+            id="a"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 9.23 13"
+            width={14}
+            height={14}
+          >
+            <path
+              d="M5.49,9.98l2.24-2.24c.36-.33.92-.31,1.25.04.32.34.32.87,0,1.21l-3.75,3.75c-.35.34-.91.34-1.25,0L.23,8.99c-.33-.36-.3-.92.06-1.25.34-.31.86-.31,1.19,0l2.24,2.24V.85C3.74.37,4.15-.02,4.64,0c.46.02.84.39.85.85v9.13Z"
+              fill="#fff"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+        <button
+          className={
+            isLocked
+              ? 'cursor-not-allowed opacity-40'
+              : 'hover:opacity-70 transition-opacity'
+          }
+          title="Duplicate"
+          disabled={isLocked}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDuplicate?.();
+          }}
+        >
+          <svg
+            id="a"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 13 13"
+            width={14}
+            height={14}
+          >
+            <path
+              d="M8.5,3H1.5c-.8,0-1.5.7-1.5,1.5v7c0,.8.7,1.5,1.5,1.5h7c.8,0,1.5-.7,1.5-1.5v-7c0-.8-.7-1.5-1.5-1.5ZM9,11.5c0,.3-.2.5-.5.5H1.5c-.3,0-.5-.2-.5-.5v-7c0-.3.2-.5.5-.5h7c.3,0,.5.2.5.5v7Z"
+              fill="#fff"
+            />
+            <path
+              d="M3.5,2.5c.3,0,.5-.2.5-.5v-.5c0-.3.2-.5.5-.5h.5c.3,0,.5-.2.5-.5s-.2-.5-.5-.5h-.5c-.8,0-1.5.7-1.5,1.5v.5c0,.3.2.5.5.5Z"
+              fill="#fff"
+            />
+            <path
+              d="M12.5,7.5c-.3,0-.5.2-.5.5v.5c0,.3-.2.5-.5.5h-.5c-.3,0-.5.2-.5.5s.2.5.5.5h.5c.8,0,1.5-.7,1.5-1.5v-.5c0-.3-.2-.5-.5-.5Z"
+              fill="#fff"
+            />
+            <path
+              d="M11.5,0h-.5c-.3,0-.5.2-.5.5s.2.5.5.5h.5c.3,0,.5.2.5.5v.5c0,.3.2.5.5.5s.5-.2.5-.5v-.5c0-.8-.7-1.5-1.5-1.5Z"
+              fill="#fff"
+            />
+            <path
+              d="M12.5,3.5c-.3,0-.5.2-.5.5v2c0,.3.2.5.5.5s.5-.2.5-.5v-2c0-.3-.2-.5-.5-.5Z"
+              fill="#fff"
+            />
+            <path
+              d="M7,1h2c.3,0,.5-.2.5-.5s-.2-.5-.5-.5h-2c-.3,0-.5.2-.5.5s.2.5.5.5Z"
+              fill="#fff"
+            />
+            <path
+              d="M6.5,7.5h-1v-1c0-.3-.2-.5-.5-.5s-.5.2-.5.5v1h-1c-.3,0-.5.2-.5.5s.2.5.5.5h1v1c0,.3.2.5.5.5s.5-.2.5-.5v-1h1c.3,0,.5-.2.5-.5s-.2-.5-.5-.5Z"
+              fill="#fff"
+            />
+          </svg>
+        </button>
+        <button
+          className="hover:opacity-70 transition-opacity"
+          title="Show/Hide"
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleVisibility?.();
+          }}
+        >
+          <svg
+            id="a"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 327.2"
+            width={14}
+            height={14}
+          >
+            <g id="b">
+              <g id="c">
+                <g id="d">
+                  <g id="e">
+                    <path
+                      id="f"
+                      d="M259.2,327.2C90.7,327.2,6.5,178.2,0,171.7v-16.2C3.2,149,87.5,0,256,0s252.8,149.1,256,155.5v16.2c-3.2,6.5-87.5,155.5-256,155.5h3.2ZM35.6,165.2c19.4,29.2,94,129.6,223.6,129.6s204.2-100.5,223.6-129.6c-19.4-29.2-94-129.6-223.6-129.6S55.1,136.1,35.6,165.2ZM259.2,262.4c-55.1,0-97.2-42.1-97.2-97.2s42.1-97.2,97.2-97.2,97.2,42.1,97.2,97.2-42.1,97.2-97.2,97.2ZM259.2,100.4c-35.6,0-64.8,29.2-64.8,64.8s29.2,64.8,64.8,64.8,64.8-29.2,64.8-64.8-29.2-64.8-64.8-64.8h0Z"
+                      fill="#fff"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </button>
+        <button
+          className={
+            isLocked
+              ? 'cursor-not-allowed opacity-40'
+              : 'hover:opacity-70 transition-opacity'
+          }
+          title="Delete"
+          disabled={isLocked}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete?.();
+          }}
+        >
+          <svg
+            id="a"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 11.87 12.98"
+            width={14}
+            height={14}
+          >
+            <g id="b">
+              <g id="c">
+                <g id="d">
+                  <g id="e">
+                    <g id="f">
+                      <path
+                        id="g"
+                        d="M11.21,2.43h-2.36v-.66c0-.96-.81-1.77-1.77-1.77h-2.36c-.96,0-1.77.81-1.77,1.77v.66H.59c-.29,0-.59.22-.59.59s.29.52.59.52h.66v7.74c0,.96.81,1.7,1.77,1.7h5.9c.96,0,1.7-.81,1.7-1.7V3.54h.66c.29,0,.59-.22.59-.59s-.37-.52-.66-.52h0ZM4.13,1.77c0-.37.29-.66.66-.66h2.36c.37,0,.66.29.66.66v.66h-3.69v-.66h0ZM9.44,11.21c0,.37-.29.59-.59.59H2.95c-.37,0-.66-.29-.66-.59V3.54h7.15v7.67ZM4.72,5.38c-.29,0-.59.22-.59.59v3.47c0,.29.22.59.59.59s.59-.22.59-.59v-3.54c0-.29-.29-.52-.59-.52h0ZM7.08,5.38c-.29,0-.59.22-.59.52v3.54c0,.29.22.59.59.59s.59-.22.59-.59v-3.54c-.07-.29-.29-.52-.59-.52Z"
+                        fill="#fff"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/theme-editor/components/designer-overlay.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+import ActionToolbar from './action-toolbar';
+
+interface DesignerOverlayProps {
+  label: string;
+  isSelected: boolean;
+  isLocked?: boolean;
+  isHovered?: boolean;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+}
+
+export default function DesignerOverlay({
+  label,
+  isSelected,
+  isLocked = false,
+  onMoveUp,
+  onMoveDown,
+  onDuplicate,
+  onToggleVisibility,
+  onDelete,
+  onRename
+}: DesignerOverlayProps) {
+  const lockedClasses = isLocked
+    ? isSelected
+      ? 'border-dashed border-amber-400 bg-amber-400/[0.12] shadow-[0_0_0_1px_rgba(251,191,36,0.4)]'
+      : 'border-dashed border-amber-300/25 bg-amber-400/[0.03] group-hover:border-amber-300/55 group-hover:bg-amber-400/[0.07]'
+    : null;
+  const defaultClasses = !isLocked
+    ? isSelected
+      ? 'border-[#1b57f0] bg-[#1b57f0]/20 shadow-[0_0_0_1px_rgba(27,87,240,0.35)]'
+      : 'border-transparent group-hover:border-[#7fb2ff] group-hover:bg-[#7fb2ff]/15'
+    : null;
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          clsx(
+            'absolute inset-0 pointer-events-none border-2 transition-all duration-150 z-50',
+            defaultClasses,
+            lockedClasses
+          )
+        )}
+      />
+      {isSelected &&
+        (onMoveUp ||
+          onMoveDown ||
+          onDuplicate ||
+          onToggleVisibility ||
+          onDelete ||
+          onRename) && (
+          <ActionToolbar
+            label={label}
+            isLocked={isLocked}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
+            onDuplicate={onDuplicate}
+            onToggleVisibility={onToggleVisibility}
+            onDelete={onDelete}
+            onRename={onRename}
+          />
+        )}
+    </>
+  );
+}

package/components/theme-editor/components/with-designer-features.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+import { getResponsiveValue } from '../utils';
+import DesignerOverlay from './designer-overlay';
+import { useDesignerFeatures } from '../hooks/use-designer-features';
+
+interface WithDesignerFeaturesProps {
+  block: any;
+  placeholderId: string;
+  sectionId: string;
+  isDesigner: boolean;
+  isSelected?: boolean;
+  currentBreakpoint?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+  // Note: repo has mixed React type versions; keep this permissive to avoid ReactNode incompatibilities.
+  children: any;
+}
+
+export function WithDesignerFeatures({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  isSelected = false,
+  currentBreakpoint = 'desktop',
+  className,
+  style,
+  onMoveUp,
+  onMoveDown,
+  onDuplicate,
+  onToggleVisibility,
+  onDelete,
+  onRename,
+  children
+}: WithDesignerFeaturesProps) {
+  const blockRef = useRef<HTMLDivElement>(null);
+  const actionBlockId = block.styleSourceId || block.id;
+  const { handleClick } = useDesignerFeatures({
+    blockId: actionBlockId,
+    placeholderId,
+    sectionId,
+    isDesigner,
+    blockInfo: {
+      id: actionBlockId,
+      type: block.type,
+      label: block.label
+    }
+  });
+
+  useEffect(() => {
+    if (!isDesigner) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      if (
+        event.data?.type === 'SCROLL_TO_BLOCK' &&
+        event.data?.data?.blockId === actionBlockId
+      ) {
+        blockRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [actionBlockId, isDesigner]);
+
+  const isButtonBlock = block.type === 'button';
+
+  const buttonDisplay = isButtonBlock
+    ? getResponsiveValue(
+        block.styles?.display,
+        currentBreakpoint,
+        'inline-block'
+      )
+    : null;
+  const buttonAlign =
+    isButtonBlock && block.properties?.align
+      ? getResponsiveValue(block.properties.align, currentBreakpoint, 'left')
+      : 'left';
+
+  // In designer mode, keep hidden blocks mounted (prevents remount-driven side effects)
+  // but visually hide them.
+  const mergedStyle: React.CSSProperties = {
+    ...(style || {}),
+    ...(isDesigner && block.hidden ? { display: 'none' } : null)
+  };
+
+  return (
+    <div
+      ref={blockRef}
+      data-block-id={block.styleSourceId || block.id}
+      className={clsx(
+        'relative',
+        className,
+        isDesigner && 'cursor-pointer group',
+        block.type === 'tab' && 'h-full'
+      )}
+      style={mergedStyle}
+      onClick={handleClick}
+    >
+      {isDesigner && (
+        <DesignerOverlay
+          label={block.label}
+          isSelected={isSelected}
+          isLocked={block.locked === true}
+          onMoveUp={onMoveUp}
+          onMoveDown={onMoveDown}
+          onDuplicate={onDuplicate}
+          onToggleVisibility={onToggleVisibility}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      )}
+      {isButtonBlock ? (
+        <div
+          style={{
+            display: buttonDisplay === 'inline-block' ? 'block' : undefined,
+            textAlign:
+              buttonDisplay === 'inline-block'
+                ? (buttonAlign as 'left' | 'center' | 'right')
+                : undefined
+          }}
+        >
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}