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

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

@@ -1,122 +0,0 @@
-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

@@ -1,305 +0,0 @@
-'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

@@ -1,74 +0,0 @@
-'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

@@ -1,142 +0,0 @@
-'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>
-  );
-}