sa2kit 3.0.0 → 3.2.0

package/dist/festivalCard/index.mjs

@@ -1,1475 +0,0 @@
-import React4, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { clsx } from 'clsx';
-
-// src/festivalCard/core/defaults.ts
-var DEFAULT_FESTIVAL_CARD_CONFIG = {
-  id: "default-festival-card",
-  name: "Holiday Card",
-  theme: "winter",
-  coverTitle: "Happy Holidays",
-  coverSubtitle: "Warm wishes for you",
-  background: {
-    colorA: "#0c1a34",
-    colorB: "#1f4f8a"
-  },
-  backgroundMusic: {
-    src: "",
-    loop: true,
-    autoPlay: false,
-    volume: 0.5
-  },
-  pages: [
-    {
-      id: "page-1",
-      title: "\u5C01\u9762",
-      background: { color: "#11284d" },
-      elements: [
-        {
-          id: "p1-text-1",
-          type: "text",
-          x: 50,
-          y: 20,
-          content: "\u65B0\u5E74\u5FEB\u4E50",
-          fontSize: 34,
-          fontWeight: 700,
-          align: "center",
-          color: "#f8fafc"
-        },
-        {
-          id: "p1-text-2",
-          type: "text",
-          x: 50,
-          y: 36,
-          content: "\u613F\u8FD9\u4E00\u5E74\u5E73\u5B89\u559C\u4E50",
-          fontSize: 18,
-          fontWeight: 500,
-          align: "center",
-          color: "#dbeafe"
-        },
-        {
-          id: "p1-image-1",
-          type: "image",
-          x: 50,
-          y: 68,
-          width: 72,
-          height: 42,
-          src: "https://images.unsplash.com/photo-1512389142860-9c449e58a543?auto=format&fit=crop&w=1200&q=80",
-          fit: "cover",
-          borderRadius: 16,
-          alt: "holiday",
-          isBackground: false
-        }
-      ]
-    },
-    {
-      id: "page-2",
-      title: "\u795D\u798F",
-      background: { color: "#1a3766" },
-      elements: [
-        {
-          id: "p2-text-1",
-          type: "text",
-          x: 50,
-          y: 28,
-          content: "\u613F\u4F60\u65B0\u5C81\uFF1A",
-          fontSize: 28,
-          fontWeight: 700,
-          align: "center",
-          color: "#fef3c7"
-        },
-        {
-          id: "p2-text-2",
-          type: "text",
-          x: 50,
-          y: 42,
-          content: "\u6240\u5F97\u7686\u6240\u671F\uFF0C\u6240\u5931\u4EA6\u65E0\u788D",
-          fontSize: 18,
-          fontWeight: 500,
-          align: "center",
-          color: "#f8fafc"
-        },
-        {
-          id: "p2-text-3",
-          type: "text",
-          x: 50,
-          y: 55,
-          content: "\u613F\u4F60\u7684\u6BCF\u4E00\u6B65\u90FD\u8D70\u5411\u5149\u4EAE",
-          fontSize: 16,
-          fontWeight: 400,
-          align: "center",
-          color: "#dbeafe"
-        }
-      ]
-    },
-    {
-      id: "page-3",
-      title: "\u843D\u6B3E",
-      background: { color: "#11284d" },
-      elements: [
-        {
-          id: "p3-image-1",
-          type: "image",
-          x: 50,
-          y: 34,
-          width: 60,
-          height: 42,
-          src: "https://images.unsplash.com/photo-1456324504439-367cee3b3c32?auto=format&fit=crop&w=1200&q=80",
-          fit: "cover",
-          borderRadius: 14,
-          alt: "gift",
-          isBackground: false
-        },
-        {
-          id: "p3-text-1",
-          type: "text",
-          x: 50,
-          y: 72,
-          content: "Best wishes, from SA2Kit",
-          fontSize: 18,
-          fontWeight: 600,
-          align: "center",
-          color: "#f8fafc"
-        }
-      ]
-    }
-  ]
-};
-
-// src/festivalCard/core/normalize.ts
-var ensurePage = (page, index) => ({
-  id: page.id || `page-${index + 1}`,
-  title: page.title || `\u7B2C ${index + 1} \u9875`,
-  elements: Array.isArray(page.elements) ? page.elements : [],
-  background: page.background || {}
-});
-var normalizeFestivalCardConfig = (config) => {
-  const pages = config?.pages && config.pages.length > 0 ? config.pages : DEFAULT_FESTIVAL_CARD_CONFIG.pages;
-  return {
-    ...DEFAULT_FESTIVAL_CARD_CONFIG,
-    ...config,
-    background: {
-      ...DEFAULT_FESTIVAL_CARD_CONFIG.background,
-      ...config?.background || {}
-    },
-    backgroundMusic: {
-      ...DEFAULT_FESTIVAL_CARD_CONFIG.backgroundMusic,
-      ...config?.backgroundMusic || {},
-      src: config?.backgroundMusic?.src ?? DEFAULT_FESTIVAL_CARD_CONFIG.backgroundMusic?.src ?? ""
-    },
-    pages: pages.map(ensurePage)
-  };
-};
-var resizeFestivalCardPages = (config, pageCount) => {
-  const safeCount = Math.max(1, Math.min(12, Math.floor(pageCount || 1)));
-  const nextPages = [...config.pages];
-  while (nextPages.length < safeCount) {
-    const idx = nextPages.length;
-    nextPages.push({
-      id: `page-${idx + 1}`,
-      title: `\u7B2C ${idx + 1} \u9875`,
-      elements: [],
-      background: {}
-    });
-  }
-  return {
-    ...config,
-    pages: nextPages.slice(0, safeCount)
-  };
-};
-var useFestivalCardConfig = (options) => {
-  const [config, setConfig] = useState(
-    () => normalizeFestivalCardConfig(options?.initialConfig || DEFAULT_FESTIVAL_CARD_CONFIG)
-  );
-  const [loading, setLoading] = useState(Boolean(options?.fetchConfig));
-  const [saving, setSaving] = useState(false);
-  useEffect(() => {
-    const fetchConfig = options?.fetchConfig;
-    if (!fetchConfig) return;
-    let active = true;
-    void fetchConfig().then((value) => {
-      if (!active) return;
-      setConfig(normalizeFestivalCardConfig(value));
-    }).finally(() => {
-      if (active) setLoading(false);
-    });
-    return () => {
-      active = false;
-    };
-  }, [options?.fetchConfig]);
-  const save = useCallback(async () => {
-    const onSave = options?.onSave;
-    if (!onSave) return;
-    setSaving(true);
-    try {
-      await onSave(config);
-    } finally {
-      setSaving(false);
-    }
-  }, [config, options?.onSave]);
-  return useMemo(
-    () => ({
-      config,
-      setConfig,
-      loading,
-      saving,
-      save
-    }),
-    [config, loading, save, saving]
-  );
-};
-var FloatingMenu = ({
-  trigger,
-  menu,
-  initialPosition = { x: 20, y: 20 },
-  defaultOpen = false,
-  className = "",
-  menuClassName = "",
-  triggerClassName = "",
-  zIndex = 1e3
-}) => {
-  const [position, setPosition] = useState(initialPosition);
-  const [isMenuOpen, setIsMenuOpen] = useState(defaultOpen);
-  const [menuDirection, setMenuDirection] = useState("right");
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-  const containerRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const [hasDragged, setHasDragged] = useState(false);
-  const dragTimerRef = useRef(null);
-  const mouseDownPosRef = useRef(null);
-  useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
-  }, []);
-  useEffect(() => {
-    if (!mounted || !containerRef.current) return;
-    const updateMenuDirection = () => {
-      const rect = containerRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      const windowWidth = window.innerWidth;
-      const middlePoint = windowWidth / 2;
-      setMenuDirection(rect.left < middlePoint ? "right" : "left");
-    };
-    updateMenuDirection();
-    window.addEventListener("resize", updateMenuDirection);
-    window.addEventListener("scroll", updateMenuDirection);
-    return () => {
-      window.removeEventListener("resize", updateMenuDirection);
-      window.removeEventListener("scroll", updateMenuDirection);
-    };
-  }, [mounted]);
-  const handleMouseDown = (e) => {
-    if (!containerRef.current) return;
-    e.stopPropagation();
-    mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
-    const rect = containerRef.current.getBoundingClientRect();
-    setDragOffset({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    });
-    setHasDragged(false);
-    setIsDragging(true);
-  };
-  useEffect(() => {
-    if (!isDragging) return;
-    const handleMouseMove = (e) => {
-      if (mouseDownPosRef.current) {
-        const dx = Math.abs(e.clientX - mouseDownPosRef.current.x);
-        const dy = Math.abs(e.clientY - mouseDownPosRef.current.y);
-        if (dx > 3 || dy > 3) {
-          setHasDragged(true);
-        }
-      }
-      const newX = e.clientX - dragOffset.x;
-      const newY = e.clientY - dragOffset.y;
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-      setPosition({
-        x: Math.min(Math.max(newX, 0), windowWidth - 50),
-        y: Math.min(Math.max(newY, 0), windowHeight - 50)
-      });
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      mouseDownPosRef.current = null;
-      if (dragTimerRef.current) {
-        window.clearTimeout(dragTimerRef.current);
-      }
-      dragTimerRef.current = window.setTimeout(() => {
-        setHasDragged(false);
-      }, 300);
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, dragOffset]);
-  useEffect(() => {
-    return () => {
-      if (dragTimerRef.current) {
-        window.clearTimeout(dragTimerRef.current);
-      }
-    };
-  }, []);
-  const toggleMenu = (e) => {
-    e.stopPropagation();
-    if (hasDragged) {
-      return;
-    }
-    setIsMenuOpen(!isMenuOpen);
-  };
-  useEffect(() => {
-    if (!isMenuOpen) return;
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setIsMenuOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isMenuOpen]);
-  useEffect(() => {
-    if (!mounted) return;
-    const checkBoundaries = () => {
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-      setPosition((prev) => {
-        const newX = Math.min(Math.max(prev.x, 0), windowWidth - 50);
-        const newY = Math.min(Math.max(prev.y, 0), windowHeight - 50);
-        if (newX !== prev.x || newY !== prev.y) {
-          return { x: newX, y: newY };
-        }
-        return prev;
-      });
-    };
-    window.addEventListener("resize", checkBoundaries);
-    return () => {
-      window.removeEventListener("resize", checkBoundaries);
-    };
-  }, [mounted]);
-  if (!mounted) return null;
-  return createPortal(
-    /* @__PURE__ */ React4.createElement(
-      "div",
-      {
-        ref: containerRef,
-        className: clsx("fixed select-none box-border", className),
-        style: {
-          left: position.x + "px",
-          top: position.y + "px",
-          zIndex
-        }
-      },
-      /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          className: clsx(
-            "flex items-center justify-center w-12 h-12 md:w-12 md:h-12 bg-white rounded-full shadow-md hover:shadow-lg cursor-grab active:cursor-grabbing transition-all duration-200 hover:scale-105 active:scale-95",
-            triggerClassName
-          ),
-          onMouseDown: handleMouseDown,
-          onClick: toggleMenu
-        },
-        trigger
-      ),
-      isMenuOpen && /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          className: clsx(
-            "absolute top-0 bg-white rounded-lg shadow-xl p-3 min-w-[200px] md:min-w-[200px] max-w-[300px] z-[1000] transition-all duration-200",
-            isMenuOpen ? "opacity-100 scale-100" : "opacity-0 scale-95",
-            menuDirection === "left" ? "right-[calc(100%+10px)]" : "left-[calc(100%+10px)]",
-            menuClassName
-          ),
-          onClick: (e) => e.stopPropagation(),
-          onMouseDown: (e) => e.stopPropagation(),
-          onMouseUp: (e) => e.stopPropagation(),
-          onTouchStart: (e) => e.stopPropagation(),
-          onTouchMove: (e) => e.stopPropagation(),
-          onTouchEnd: (e) => e.stopPropagation(),
-          onPointerDown: (e) => e.stopPropagation(),
-          onPointerUp: (e) => e.stopPropagation()
-        },
-        menu
-      )
-    ),
-    document.body
-  );
-};
-var FloatingMenu_default = FloatingMenu;
-var elementStyle = (element) => ({
-  position: "absolute",
-  zIndex: 2,
-  left: `${element.x}%`,
-  top: `${element.y}%`,
-  width: `${element.width ?? 70}%`,
-  height: element.height ? `${element.height}%` : void 0,
-  transform: "translate(-50%, -50%)"
-});
-var renderElement = (element) => {
-  if (element.type === "text") {
-    return /* @__PURE__ */ React4.createElement(
-      "div",
-      {
-        key: element.id,
-        style: {
-          ...elementStyle(element),
-          color: element.color || "#f8fafc",
-          fontSize: element.fontSize || 18,
-          fontWeight: element.fontWeight || 500,
-          fontFamily: element.fontFamily || "inherit",
-          textAlign: element.align || "left",
-          lineHeight: 1.45,
-          whiteSpace: "pre-wrap"
-        }
-      },
-      element.content
-    );
-  }
-  return /* @__PURE__ */ React4.createElement(
-    "img",
-    {
-      key: element.id,
-      src: element.src,
-      alt: element.alt || "festival-card-image",
-      style: {
-        ...elementStyle(element),
-        objectFit: element.fit || "cover",
-        borderRadius: element.borderRadius || 0,
-        overflow: "hidden",
-        boxShadow: "0 12px 30px rgba(2, 6, 23, 0.32)"
-      }
-    }
-  );
-};
-var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
-var FestivalCardPageRenderer = ({
-  page,
-  editable = false,
-  selectedElementId = null,
-  onElementSelect,
-  onElementChange
-}) => {
-  const [draggingElementId, setDraggingElementId] = useState(null);
-  const [resizingElementId, setResizingElementId] = useState(null);
-  const stageRef = useRef(null);
-  const interactionRef = useRef(null);
-  const backgroundElement = useMemo(
-    () => page.elements.find(
-      (element) => element.type === "image" && Boolean(element.isBackground)
-    ),
-    [page]
-  );
-  const foregroundElements = useMemo(
-    () => page.elements.filter((element) => !(element.type === "image" && element.isBackground)),
-    [page]
-  );
-  const updateElementByPointer = (element, interaction, clientX, clientY) => {
-    if (!onElementChange || interaction.rect.width <= 0 || interaction.rect.height <= 0) return;
-    const xPercent = clamp((clientX - interaction.rect.left) / interaction.rect.width * 100, 0, 100);
-    const yPercent = clamp((clientY - interaction.rect.top) / interaction.rect.height * 100, 0, 100);
-    if (interaction.mode === "move") {
-      onElementChange(element.id, { x: xPercent, y: yPercent });
-      return;
-    }
-    const nextWidth = clamp(Math.abs(xPercent - element.x) * 2, 4, 100);
-    if (element.type === "image") {
-      const nextHeight = clamp(Math.abs(yPercent - element.y) * 2, 4, 100);
-      onElementChange(element.id, { width: nextWidth, height: nextHeight });
-      return;
-    }
-    onElementChange(element.id, { width: nextWidth });
-  };
-  const beginInteraction = (event, elementId, mode) => {
-    if (!editable || !stageRef.current) return;
-    event.preventDefault();
-    event.stopPropagation();
-    const rect = stageRef.current.getBoundingClientRect();
-    interactionRef.current = {
-      pointerId: event.pointerId,
-      elementId,
-      mode,
-      rect
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    onElementSelect?.(elementId);
-    if (mode === "move") {
-      setDraggingElementId(elementId);
-      setResizingElementId(null);
-    } else {
-      setResizingElementId(elementId);
-      setDraggingElementId(null);
-    }
-    const element = foregroundElements.find((item) => item.id === elementId);
-    if (element) {
-      updateElementByPointer(element, interactionRef.current, event.clientX, event.clientY);
-    }
-  };
-  const handlePointerMove = (event) => {
-    const interaction = interactionRef.current;
-    if (!interaction || interaction.pointerId !== event.pointerId) return;
-    const element = foregroundElements.find((item) => item.id === interaction.elementId);
-    if (!element) return;
-    updateElementByPointer(element, interaction, event.clientX, event.clientY);
-  };
-  const endInteraction = (event) => {
-    const interaction = interactionRef.current;
-    if (!interaction || interaction.pointerId !== event.pointerId) return;
-    interactionRef.current = null;
-    setDraggingElementId(null);
-    setResizingElementId(null);
-  };
-  return /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      ref: stageRef,
-      onPointerMove: editable ? handlePointerMove : void 0,
-      onPointerUp: editable ? endInteraction : void 0,
-      onPointerCancel: editable ? endInteraction : void 0,
-      onClick: editable ? () => onElementSelect?.(null) : void 0,
-      className: `relative h-full w-full overflow-hidden rounded-2xl ${editable ? "touch-none" : ""}`,
-      style: {
-        backgroundColor: page.background?.color || "#0f172a",
-        backgroundImage: backgroundElement ? `url(${backgroundElement.src})` : page.background?.image ? `url(${page.background.image})` : void 0,
-        backgroundSize: "cover",
-        backgroundPosition: "center"
-      }
-    },
-    /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-0 bg-slate-950/20" }),
-    foregroundElements.map((element) => {
-      if (!editable) {
-        return renderElement(element);
-      }
-      const isSelected = selectedElementId === element.id;
-      const isDragging = draggingElementId === element.id;
-      const isResizing = resizingElementId === element.id;
-      return /* @__PURE__ */ React4.createElement(
-        "div",
-        {
-          key: element.id,
-          role: "button",
-          tabIndex: 0,
-          onClick: (event) => {
-            event.stopPropagation();
-            onElementSelect?.(element.id);
-          },
-          onPointerDown: (event) => beginInteraction(event, element.id, "move"),
-          className: `absolute select-none touch-none rounded-md ${isDragging ? "cursor-grabbing" : isResizing ? "cursor-se-resize" : "cursor-grab"} ${isSelected ? "ring-2 ring-sky-300" : "ring-1 ring-white/40"}`,
-          style: {
-            ...elementStyle(element),
-            zIndex: isSelected ? 4 : 2
-          }
-        },
-        element.type === "text" ? /* @__PURE__ */ React4.createElement(
-          "div",
-          {
-            className: "rounded-md bg-black/20 px-2 py-1",
-            style: {
-              color: element.color || "#f8fafc",
-              fontSize: element.fontSize || 18,
-              fontWeight: element.fontWeight || 500,
-              fontFamily: element.fontFamily || "inherit",
-              textAlign: element.align || "left",
-              lineHeight: 1.45,
-              whiteSpace: "pre-wrap"
-            }
-          },
-          element.content
-        ) : /* @__PURE__ */ React4.createElement(
-          "img",
-          {
-            src: element.src,
-            alt: element.alt || "festival-card-image",
-            draggable: false,
-            className: "pointer-events-none h-full w-full",
-            style: {
-              objectFit: element.fit || "cover",
-              borderRadius: element.borderRadius || 0,
-              overflow: "hidden",
-              boxShadow: "0 12px 30px rgba(2, 6, 23, 0.32)"
-            }
-          }
-        ),
-        /* @__PURE__ */ React4.createElement(
-          "button",
-          {
-            type: "button",
-            "aria-label": "resize",
-            onPointerDown: (event) => beginInteraction(event, element.id, "resize"),
-            className: "absolute -bottom-2 -right-2 h-4 w-4 rounded-full border border-white bg-sky-500 shadow"
-          }
-        )
-      );
-    })
-  );
-};
-
-// src/festivalCard/components/FestivalCardBook3D.tsx
-var loadImage = (src) => new Promise((resolve, reject) => {
-  const image = new window.Image();
-  image.crossOrigin = "anonymous";
-  image.decoding = "async";
-  image.onload = () => resolve(image);
-  image.onerror = () => reject(new Error(`\u56FE\u7247\u52A0\u8F7D\u5931\u8D25: ${src}`));
-  image.src = src;
-});
-var drawImageWithFit = (ctx, image, left, top, width, height, fit) => {
-  const imageRatio = image.width / image.height;
-  const boxRatio = width / height;
-  let drawWidth = width;
-  let drawHeight = height;
-  let offsetX = left;
-  let offsetY = top;
-  if (fit === "cover") {
-    if (imageRatio > boxRatio) {
-      drawHeight = height;
-      drawWidth = height * imageRatio;
-      offsetX = left - (drawWidth - width) / 2;
-    } else {
-      drawWidth = width;
-      drawHeight = width / imageRatio;
-      offsetY = top - (drawHeight - height) / 2;
-    }
-  } else if (imageRatio > boxRatio) {
-    drawWidth = width;
-    drawHeight = width / imageRatio;
-    offsetY = top + (height - drawHeight) / 2;
-  } else {
-    drawHeight = height;
-    drawWidth = height * imageRatio;
-    offsetX = left + (width - drawWidth) / 2;
-  }
-  ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);
-};
-var withRoundedClip = (ctx, left, top, width, height, radius, draw) => {
-  const safeRadius = Math.max(0, Math.min(radius, Math.min(width, height) / 2));
-  if (safeRadius <= 0) {
-    draw();
-    return;
-  }
-  ctx.save();
-  ctx.beginPath();
-  ctx.moveTo(left + safeRadius, top);
-  ctx.lineTo(left + width - safeRadius, top);
-  ctx.quadraticCurveTo(left + width, top, left + width, top + safeRadius);
-  ctx.lineTo(left + width, top + height - safeRadius);
-  ctx.quadraticCurveTo(left + width, top + height, left + width - safeRadius, top + height);
-  ctx.lineTo(left + safeRadius, top + height);
-  ctx.quadraticCurveTo(left, top + height, left, top + height - safeRadius);
-  ctx.lineTo(left, top + safeRadius);
-  ctx.quadraticCurveTo(left, top, left + safeRadius, top);
-  ctx.closePath();
-  ctx.clip();
-  draw();
-  ctx.restore();
-};
-var drawMultilineText = (ctx, text, left, top, maxWidth, lineHeight) => {
-  const paragraphs = text.split("\n");
-  let currentY = top;
-  paragraphs.forEach((paragraph, index) => {
-    const words = paragraph.split("");
-    let line = "";
-    for (const word of words) {
-      const testLine = line + word;
-      if (ctx.measureText(testLine).width > maxWidth && line) {
-        ctx.fillText(line, left, currentY);
-        line = word;
-        currentY += lineHeight;
-      } else {
-        line = testLine;
-      }
-    }
-    ctx.fillText(line, left, currentY);
-    currentY += lineHeight;
-    if (index < paragraphs.length - 1) {
-      currentY += lineHeight * 0.2;
-    }
-  });
-};
-var exportPageToPng = async (page, fileName) => {
-  const width = 1080;
-  const height = 1440;
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("\u65E0\u6CD5\u521B\u5EFA Canvas \u4E0A\u4E0B\u6587");
-  ctx.fillStyle = page.background?.color || "#0f172a";
-  ctx.fillRect(0, 0, width, height);
-  const backgroundElement = page.elements.find(
-    (element) => element.type === "image" && Boolean(element.isBackground)
-  );
-  const backgroundImageSrc = backgroundElement?.src || page.background?.image;
-  if (backgroundImageSrc) {
-    const image = await loadImage(backgroundImageSrc);
-    drawImageWithFit(ctx, image, 0, 0, width, height, "cover");
-  }
-  const foregroundElements = page.elements.filter((element) => !(element.type === "image" && element.isBackground));
-  for (const element of foregroundElements) {
-    const elementWidth = width * (element.width ?? 70) / 100;
-    const elementHeight = element.height ? height * element.height / 100 : void 0;
-    const centerX = width * element.x / 100;
-    const centerY = height * element.y / 100;
-    const left = centerX - elementWidth / 2;
-    if (element.type === "image") {
-      const image = await loadImage(element.src);
-      const drawHeight = elementHeight ?? elementWidth;
-      const boxTop = centerY - drawHeight / 2;
-      withRoundedClip(ctx, left, boxTop, elementWidth, drawHeight, element.borderRadius ?? 0, () => {
-        drawImageWithFit(ctx, image, left, boxTop, elementWidth, drawHeight, element.fit || "cover");
-      });
-      continue;
-    }
-    const fontSize = (element.fontSize || 18) * 1.5;
-    ctx.fillStyle = element.color || "#f8fafc";
-    ctx.font = `${element.fontWeight || 500} ${fontSize}px ${element.fontFamily || "sans-serif"}`;
-    ctx.textBaseline = "top";
-    ctx.textAlign = element.align || "left";
-    const textX = element.align === "center" ? centerX : element.align === "right" ? left + elementWidth : left;
-    drawMultilineText(ctx, element.content || "", textX, centerY - fontSize * 0.72, elementWidth, fontSize * 1.45);
-  }
-  const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
-  if (!blob) throw new Error("\u5BFC\u51FA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = fileName;
-  anchor.click();
-  URL.revokeObjectURL(url);
-};
-var FestivalCardBook3D = ({
-  config,
-  className,
-  editable = false,
-  enableExportImage = !editable,
-  currentPage: currentPageProp,
-  onCurrentPageChange,
-  selectedElementId = null,
-  onSelectedElementChange,
-  onElementChange
-}) => {
-  const [internalCurrentPage, setInternalCurrentPage] = useState(0);
-  const [exporting, setExporting] = useState(false);
-  const normalized = useMemo(() => normalizeFestivalCardConfig(config), [config]);
-  const pages = normalized.pages;
-  const currentPage = typeof currentPageProp === "number" ? currentPageProp : internalCurrentPage;
-  const setCurrentPage = (updater) => {
-    const prev = currentPage;
-    const nextValue = typeof updater === "function" ? updater(prev) : updater;
-    if (typeof currentPageProp === "number") {
-      onCurrentPageChange?.(nextValue);
-      return;
-    }
-    setInternalCurrentPage(nextValue);
-    onCurrentPageChange?.(nextValue);
-  };
-  const canPrev = currentPage > 0;
-  const canNext = currentPage < pages.length - 1;
-  const currentPageData = pages[currentPage];
-  const handleExportCurrentPage = async () => {
-    if (!currentPageData || exporting) return;
-    setExporting(true);
-    try {
-      const base = normalized.id || "festival-card";
-      const fileName = `${base}-page-${currentPage + 1}.png`;
-      await exportPageToPng(currentPageData, fileName);
-    } catch (error) {
-      window.alert(error.message || "\u5BFC\u51FA\u56FE\u7247\u5931\u8D25");
-    } finally {
-      setExporting(false);
-    }
-  };
-  return /* @__PURE__ */ React4.createElement("div", { className }, /* @__PURE__ */ React4.createElement("div", { className: "w-full min-h-screen px-0 py-4" }, /* @__PURE__ */ React4.createElement("div", { className: "mx-auto w-full text-center text-slate-100" }, /* @__PURE__ */ React4.createElement("h3", { className: "mb-3 text-lg font-semibold" }, normalized.coverTitle || "Festival Card")), /* @__PURE__ */ React4.createElement("div", { className: "mx-auto w-full" }, /* @__PURE__ */ React4.createElement("div", { className: "relative h-[calc(100vh-170px)] min-h-[460px]" }, pages.map((page, index) => /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      key: page.id,
-      className: "absolute inset-0 transition-opacity duration-500 ease-out",
-      style: {
-        opacity: index === currentPage ? 1 : 0,
-        pointerEvents: index === currentPage ? "auto" : "none"
-      }
-    },
-    /* @__PURE__ */ React4.createElement(
-      FestivalCardPageRenderer,
-      {
-        page,
-        editable: editable && index === currentPage,
-        selectedElementId,
-        onElementSelect: onSelectedElementChange,
-        onElementChange: (elementId, patch) => onElementChange?.(index, elementId, patch)
-      }
-    )
-  )))), /* @__PURE__ */ React4.createElement("div", { className: "mt-4 flex justify-center gap-3" }, /* @__PURE__ */ React4.createElement(
-    "button",
-    {
-      type: "button",
-      disabled: !canPrev,
-      onClick: () => setCurrentPage((p) => Math.max(0, p - 1)),
-      className: "rounded-full bg-white px-5 py-2 text-sm font-medium text-slate-900 disabled:cursor-not-allowed disabled:opacity-45"
-    },
-    "\u4E0A\u4E00\u9875"
-  ), /* @__PURE__ */ React4.createElement(
-    "button",
-    {
-      type: "button",
-      disabled: !canNext,
-      onClick: () => setCurrentPage((p) => Math.min(pages.length - 1, p + 1)),
-      className: "rounded-full bg-sky-300 px-5 py-2 text-sm font-medium text-slate-900 disabled:cursor-not-allowed disabled:opacity-45"
-    },
-    "\u4E0B\u4E00\u9875"
-  ))), normalized.backgroundMusic?.src ? /* @__PURE__ */ React4.createElement(
-    "audio",
-    {
-      src: normalized.backgroundMusic.src,
-      autoPlay: normalized.backgroundMusic.autoPlay,
-      loop: normalized.backgroundMusic.loop,
-      controls: true,
-      className: "mt-3 w-full"
-    }
-  ) : null, enableExportImage ? /* @__PURE__ */ React4.createElement(
-    FloatingMenu_default,
-    {
-      initialPosition: { x: 24, y: 120 },
-      trigger: /* @__PURE__ */ React4.createElement("div", { className: "text-lg leading-none text-slate-700", "aria-hidden": true }, "\u2301"),
-      menu: /* @__PURE__ */ React4.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React4.createElement("div", { className: "text-xs font-semibold tracking-wide text-slate-500" }, "\u8D3A\u5361\u5DE5\u5177"), /* @__PURE__ */ React4.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => void handleExportCurrentPage(),
-          disabled: exporting,
-          className: "rounded-lg bg-sky-600 px-3 py-2 text-left text-sm font-medium text-white disabled:opacity-60"
-        },
-        exporting ? "\u5BFC\u51FA\u4E2D..." : `\u5BFC\u51FA\u7B2C ${currentPage + 1} \u9875 PNG`
-      )),
-      triggerClassName: "bg-white/95 backdrop-blur",
-      menuClassName: "bg-white/95 backdrop-blur"
-    }
-  ) : null);
-};
-var createTextElement = (pageIndex) => ({
-  id: `text-${Date.now()}-${pageIndex}`,
-  type: "text",
-  x: 50,
-  y: 50,
-  width: 70,
-  content: "\u8BF7\u8F93\u5165\u6587\u5B57",
-  fontSize: 18,
-  fontWeight: 500,
-  align: "center",
-  color: "#ffffff",
-  fontFamily: "inherit"
-});
-var createImageElement = (pageIndex) => ({
-  id: `image-${Date.now()}-${pageIndex}`,
-  type: "image",
-  x: 50,
-  y: 50,
-  width: 60,
-  height: 40,
-  src: "https://images.unsplash.com/photo-1482517967863-00e15c9b44be?auto=format&fit=crop&w=1200&q=80",
-  fit: "cover",
-  borderRadius: 12
-});
-var FestivalCardConfigEditor = ({
-  value,
-  onChange,
-  activePageIndex: activePageIndexProp,
-  onActivePageIndexChange,
-  selectedElementId
-}) => {
-  const [internalActivePageIndex, setInternalActivePageIndex] = useState(0);
-  const activePageIndex = activePageIndexProp ?? internalActivePageIndex;
-  const setActivePageIndex = (index) => {
-    if (typeof activePageIndexProp === "number") {
-      onActivePageIndexChange?.(index);
-      return;
-    }
-    setInternalActivePageIndex(index);
-  };
-  const page = value.pages[activePageIndex];
-  const canEditPage = Boolean(page);
-  const pageOptions = useMemo(() => value.pages.map((_, index) => index), [value.pages]);
-  const handlePageCountChange = (nextRaw) => {
-    const next = Number.isFinite(nextRaw) ? Math.max(1, Math.min(12, Math.floor(nextRaw))) : value.pages.length;
-    const resized = resizeFestivalCardPages(value, next);
-    onChange(resized);
-    if (activePageIndex > resized.pages.length - 1) {
-      setActivePageIndex(resized.pages.length - 1);
-    }
-  };
-  const updateElement = (elementId, patch) => {
-    onChange({
-      ...value,
-      pages: value.pages.map(
-        (p, pIndex) => pIndex === activePageIndex ? {
-          ...p,
-          elements: p.elements.map((el) => el.id === elementId ? { ...el, ...patch } : el)
-        } : p
-      )
-    });
-  };
-  const removeElement = (elementId) => {
-    onChange({
-      ...value,
-      pages: value.pages.map(
-        (p, pIndex) => pIndex === activePageIndex ? {
-          ...p,
-          elements: p.elements.filter((el) => el.id !== elementId)
-        } : p
-      )
-    });
-  };
-  const updatePage = (patch) => {
-    onChange({
-      ...value,
-      pages: value.pages.map((p, index) => index === activePageIndex ? { ...p, ...patch } : p)
-    });
-  };
-  const numberFieldClassName = "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100";
-  return /* @__PURE__ */ React4.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 text-slate-900 shadow-sm" }, /* @__PURE__ */ React4.createElement("div", { className: "grid gap-3" }, /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u9875\u9762\u6570\u91CF"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      type: "number",
-      min: 1,
-      max: 12,
-      value: value.pages.length,
-      onChange: (event) => handlePageCountChange(Number(event.target.value)),
-      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-    }
-  )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u80CC\u666F\u97F3\u4E50 URL"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      type: "url",
-      value: value.backgroundMusic?.src || "",
-      onChange: (event) => onChange({
-        ...value,
-        backgroundMusic: {
-          ...value.backgroundMusic,
-          src: event.target.value
-        }
-      }),
-      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-    }
-  )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u9875\u9762\u6807\u9898"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      type: "text",
-      value: page?.title || "",
-      onChange: (event) => updatePage({ title: event.target.value }),
-      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-    }
-  )), /* @__PURE__ */ React4.createElement("div", { className: "grid gap-2 sm:grid-cols-2" }, /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u9875\u9762\u80CC\u666F\u8272"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      type: "color",
-      value: page?.background?.color || "#0f172a",
-      onChange: (event) => updatePage({
-        background: {
-          ...page?.background,
-          color: event.target.value
-        }
-      }),
-      className: "h-10 w-full rounded-lg border border-slate-300 bg-white p-1"
-    }
-  )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u9875\u9762\u80CC\u666F\u56FE URL"), /* @__PURE__ */ React4.createElement(
-    "input",
-    {
-      type: "url",
-      value: page?.background?.image || "",
-      onChange: (event) => updatePage({
-        background: {
-          ...page?.background,
-          image: event.target.value
-        }
-      }),
-      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-    }
-  ))), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u7F16\u8F91\u9875\u9762"), /* @__PURE__ */ React4.createElement(
-    "select",
-    {
-      value: activePageIndex,
-      onChange: (event) => setActivePageIndex(Number(event.target.value)),
-      className: "rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-    },
-    pageOptions.map((index) => /* @__PURE__ */ React4.createElement("option", { key: index, value: index }, "\u7B2C ", index + 1, " \u9875"))
-  ))), canEditPage ? /* @__PURE__ */ React4.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React4.createElement("div", { className: "mb-3 flex gap-2" }, /* @__PURE__ */ React4.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange({
-        ...value,
-        pages: value.pages.map(
-          (p, index) => index === activePageIndex ? { ...p, elements: [...p.elements, createTextElement(index)] } : p
-        )
-      }),
-      className: "rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white"
-    },
-    "+ \u6587\u5B57"
-  ), /* @__PURE__ */ React4.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange({
-        ...value,
-        pages: value.pages.map(
-          (p, index) => index === activePageIndex ? { ...p, elements: [...p.elements, createImageElement(index)] } : p
-        )
-      }),
-      className: "rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white"
-    },
-    "+ \u56FE\u7247"
-  )), /* @__PURE__ */ React4.createElement("div", { className: "grid max-h-[340px] gap-2.5 overflow-auto pr-1" }, (page?.elements ?? []).map((element) => /* @__PURE__ */ React4.createElement(
-    "div",
-    {
-      key: element.id,
-      className: `rounded-xl border bg-slate-50 p-3 ${selectedElementId === element.id ? "border-sky-400 ring-2 ring-sky-100" : "border-slate-200"}`
-    },
-    /* @__PURE__ */ React4.createElement("div", { className: "mb-2 flex items-center justify-between" }, /* @__PURE__ */ React4.createElement("div", { className: "text-xs font-semibold tracking-wide text-slate-500" }, element.type.toUpperCase()), /* @__PURE__ */ React4.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => removeElement(element.id),
-        className: "rounded-md border border-rose-300 bg-rose-50 px-2 py-1 text-xs font-medium text-rose-700"
-      },
-      "\u5220\u9664"
-    )),
-    element.type === "text" ? /* @__PURE__ */ React4.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React4.createElement(
-      "textarea",
-      {
-        value: element.content,
-        onChange: (event) => updateElement(element.id, { content: event.target.value }),
-        rows: 3,
-        className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-      }
-    ), /* @__PURE__ */ React4.createElement("div", { className: "grid gap-2 sm:grid-cols-2" }, /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "X(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.x,
-        onChange: (event) => updateElement(element.id, { x: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "Y(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.y,
-        onChange: (event) => updateElement(element.id, { y: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u5BBD\u5EA6(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.width ?? 70,
-        onChange: (event) => updateElement(element.id, { width: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u5B57\u53F7(px)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.fontSize ?? 18,
-        onChange: (event) => updateElement(element.id, { fontSize: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u5B57\u91CD", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        min: 100,
-        max: 900,
-        step: 100,
-        value: element.fontWeight ?? 500,
-        onChange: (event) => updateElement(element.id, { fontWeight: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u5BF9\u9F50", /* @__PURE__ */ React4.createElement(
-      "select",
-      {
-        value: element.align || "left",
-        onChange: (event) => updateElement(element.id, { align: event.target.value }),
-        className: numberFieldClassName
-      },
-      /* @__PURE__ */ React4.createElement("option", { value: "left" }, "left"),
-      /* @__PURE__ */ React4.createElement("option", { value: "center" }, "center"),
-      /* @__PURE__ */ React4.createElement("option", { value: "right" }, "right")
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600 sm:col-span-2" }, "\u5B57\u4F53", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "text",
-        value: element.fontFamily || "",
-        onChange: (event) => updateElement(element.id, { fontFamily: event.target.value }),
-        placeholder: "inherit / serif / sans-serif / PingFang SC",
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600 sm:col-span-2" }, "\u6587\u5B57\u989C\u8272", /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-[64px_1fr] gap-2" }, /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "color",
-        value: element.color || "#ffffff",
-        onChange: (event) => updateElement(element.id, { color: event.target.value }),
-        className: "h-10 rounded-lg border border-slate-300 bg-white p-1"
-      }
-    ), /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "text",
-        value: element.color || "#ffffff",
-        onChange: (event) => updateElement(element.id, { color: event.target.value }),
-        className: numberFieldClassName
-      }
-    ))))) : /* @__PURE__ */ React4.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "url",
-        value: element.src,
-        onChange: (event) => updateElement(element.id, { src: event.target.value }),
-        className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-      }
-    ), /* @__PURE__ */ React4.createElement("div", { className: "grid gap-2 sm:grid-cols-2" }, /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "X(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.x,
-        onChange: (event) => updateElement(element.id, { x: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "Y(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.y,
-        onChange: (event) => updateElement(element.id, { y: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u5BBD\u5EA6(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.width ?? 60,
-        onChange: (event) => updateElement(element.id, { width: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u9AD8\u5EA6(%)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.height ?? 40,
-        onChange: (event) => updateElement(element.id, { height: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u5706\u89D2(px)", /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "number",
-        value: element.borderRadius ?? 0,
-        onChange: (event) => updateElement(element.id, { borderRadius: Number(event.target.value) }),
-        className: numberFieldClassName
-      }
-    )), /* @__PURE__ */ React4.createElement("label", { className: "grid gap-1 text-xs text-slate-600" }, "\u586B\u5145", /* @__PURE__ */ React4.createElement(
-      "select",
-      {
-        value: element.fit || "cover",
-        onChange: (event) => updateElement(element.id, { fit: event.target.value }),
-        className: numberFieldClassName
-      },
-      /* @__PURE__ */ React4.createElement("option", { value: "cover" }, "cover"),
-      /* @__PURE__ */ React4.createElement("option", { value: "contain" }, "contain")
-    ))), /* @__PURE__ */ React4.createElement("label", { className: "inline-flex items-center gap-2 text-sm text-slate-700" }, /* @__PURE__ */ React4.createElement(
-      "input",
-      {
-        type: "checkbox",
-        checked: Boolean(element.isBackground),
-        onChange: (event) => updateElement(element.id, { isBackground: event.target.checked }),
-        className: "h-4 w-4 rounded border-slate-300 text-sky-600"
-      }
-    ), "\u4F5C\u4E3A\u672C\u9875\u80CC\u666F\u56FE"))
-  )))) : null);
-};
-
-// src/festivalCard/components/FestivalCardStudio.tsx
-var FestivalCardStudio = ({ initialConfig, fetchConfig, onSave }) => {
-  const { config, setConfig, loading, save, saving } = useFestivalCardConfig({
-    initialConfig: normalizeFestivalCardConfig(initialConfig),
-    fetchConfig,
-    onSave
-  });
-  const [activePageIndex, setActivePageIndex] = useState(0);
-  const [selectedElementId, setSelectedElementId] = useState(null);
-  useEffect(() => {
-    if (config.pages.length === 0) return;
-    if (activePageIndex <= config.pages.length - 1) return;
-    setActivePageIndex(config.pages.length - 1);
-  }, [activePageIndex, config.pages.length]);
-  const updateElementByPreview = (pageIndex, elementId, patch) => {
-    setConfig((prev) => ({
-      ...prev,
-      pages: prev.pages.map(
-        (page, index) => index === pageIndex ? {
-          ...page,
-          elements: page.elements.map(
-            (element) => element.id === elementId ? { ...element, ...patch } : element
-          )
-        } : page
-      )
-    }));
-  };
-  if (loading) return /* @__PURE__ */ React4.createElement("div", null, "\u52A0\u8F7D\u4E2D...");
-  return /* @__PURE__ */ React4.createElement("div", { className: "grid items-start gap-4 lg:grid-cols-[1.45fr_1fr]" }, /* @__PURE__ */ React4.createElement(
-    FestivalCardBook3D,
-    {
-      config,
-      className: "h-full",
-      editable: true,
-      currentPage: activePageIndex,
-      onCurrentPageChange: (index) => {
-        setActivePageIndex(index);
-        setSelectedElementId(null);
-      },
-      selectedElementId,
-      onSelectedElementChange: setSelectedElementId,
-      onElementChange: updateElementByPreview
-    }
-  ), /* @__PURE__ */ React4.createElement("div", { className: "lg:sticky lg:top-4" }, /* @__PURE__ */ React4.createElement(
-    FestivalCardConfigEditor,
-    {
-      value: config,
-      onChange: setConfig,
-      activePageIndex,
-      onActivePageIndexChange: (index) => {
-        setActivePageIndex(index);
-        setSelectedElementId(null);
-      },
-      selectedElementId
-    }
-  ), onSave ? /* @__PURE__ */ React4.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => void save(),
-      disabled: saving,
-      className: "mt-3 w-full rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-medium text-white disabled:opacity-60"
-    },
-    saving ? "\u4FDD\u5B58\u4E2D..." : "\u4FDD\u5B58\u914D\u7F6E"
-  ) : null));
-};
-
-// src/festivalCard/components/FestivalCardConfigPage.tsx
-var FestivalCardConfigPage = ({
-  apiBase = "/api/festivalCard",
-  cardId,
-  mainPagePath = "/festivalCard"
-}) => {
-  const [list, setList] = useState([]);
-  const [selectedId, setSelectedId] = useState(cardId || "default-festival-card");
-  const parseListResponse2 = (data) => {
-    if (!data || typeof data !== "object") return [];
-    const payload = data.data;
-    if (!Array.isArray(payload)) return [];
-    return payload.filter((item) => Boolean(item && typeof item === "object" && typeof item.id === "string")).map((item) => ({ id: item.id, name: item.name }));
-  };
-  const parseConfigResponse2 = (data) => {
-    if (!data || typeof data !== "object") return normalizeFestivalCardConfig();
-    const payload = data.data;
-    if (!payload || typeof payload !== "object") return normalizeFestivalCardConfig();
-    return normalizeFestivalCardConfig(payload);
-  };
-  const reloadList = useCallback(async () => {
-    try {
-      const response = await fetch(apiBase, { cache: "no-store" });
-      if (!response.ok) throw new Error(`\u52A0\u8F7D\u5361\u7247\u5217\u8868\u5931\u8D25: ${response.status}`);
-      const data = await response.json();
-      const items = parseListResponse2(data);
-      if (items.length === 0) {
-        const fallbackId = "default-festival-card";
-        const fallbackConfig = normalizeFestivalCardConfig({ id: fallbackId, name: "Holiday Card" });
-        await fetch(`${apiBase}/${encodeURIComponent(fallbackId)}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ config: fallbackConfig })
-        });
-        setList([{ id: fallbackId, name: fallbackConfig.name }]);
-        setSelectedId(fallbackId);
-        return;
-      }
-      setList(items);
-    } catch (error) {
-      window.alert(error.message || "\u52A0\u8F7D\u5361\u7247\u5217\u8868\u5931\u8D25");
-    }
-  }, [apiBase]);
-  useEffect(() => {
-    void reloadList();
-  }, [reloadList]);
-  const fetchConfig = async () => {
-    const response = await fetch(`${apiBase}/${encodeURIComponent(selectedId)}`, { cache: "no-store" });
-    if (!response.ok) {
-      const message = `\u52A0\u8F7D\u914D\u7F6E\u5931\u8D25: ${response.status}`;
-      window.alert(message);
-      throw new Error(message);
-    }
-    const data = await response.json();
-    return parseConfigResponse2(data);
-  };
-  const saveConfig = async (config) => {
-    try {
-      const response = await fetch(`${apiBase}/${encodeURIComponent(selectedId)}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ config })
-      });
-      if (!response.ok) throw new Error(`\u4FDD\u5B58\u5931\u8D25: ${response.status}`);
-      await reloadList();
-      window.alert("\u4FDD\u5B58\u6210\u529F");
-    } catch (error) {
-      window.alert(error.message || "\u4FDD\u5B58\u5931\u8D25");
-      throw error;
-    }
-  };
-  const createNew = async () => {
-    const name = window.prompt("\u8BF7\u8F93\u5165\u65B0\u5361\u7247\u540D\u79F0");
-    if (!name) return;
-    const id = `festival-${Date.now()}`;
-    const config = normalizeFestivalCardConfig({
-      id,
-      name
-    });
-    try {
-      const response = await fetch(`${apiBase}/${encodeURIComponent(id)}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ config })
-      });
-      if (!response.ok) throw new Error(`\u521B\u5EFA\u5931\u8D25: ${response.status}`);
-      setSelectedId(id);
-      await reloadList();
-      window.alert("\u65B0\u5361\u7247\u521B\u5EFA\u6210\u529F");
-    } catch (error) {
-      window.alert(error.message || "\u521B\u5EFA\u5931\u8D25");
-    }
-  };
-  const mainLink = useMemo(() => `${mainPagePath}?cardId=${encodeURIComponent(selectedId)}`, [mainPagePath, selectedId]);
-  return /* @__PURE__ */ React4.createElement("div", { className: "grid gap-4" }, /* @__PURE__ */ React4.createElement("div", { className: "flex flex-wrap items-center gap-2 rounded-xl border border-slate-800 bg-slate-900/50 p-3" }, /* @__PURE__ */ React4.createElement(
-    "select",
-    {
-      value: selectedId,
-      onChange: (event) => setSelectedId(event.target.value),
-      className: "min-w-[240px] rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
-    },
-    list.map((item) => /* @__PURE__ */ React4.createElement("option", { key: item.id, value: item.id }, item.name || item.id))
-  ), /* @__PURE__ */ React4.createElement("button", { type: "button", onClick: () => void createNew(), className: "rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white" }, "\u65B0\u5EFA\u5361\u7247"), /* @__PURE__ */ React4.createElement("a", { href: mainLink, className: "rounded-lg border border-sky-200 bg-sky-50 px-3 py-2 text-sm text-sky-700" }, "\u6253\u5F00\u4E3B\u9875\u9762")), /* @__PURE__ */ React4.createElement(FestivalCardStudio, { fetchConfig, onSave: saveConfig }));
-};
-var isSummary = (value) => {
-  if (!value || typeof value !== "object") return false;
-  return typeof value.id === "string";
-};
-var parseListResponse = (data) => {
-  if (!data || typeof data !== "object") return [];
-  const payload = data.data;
-  if (!Array.isArray(payload)) return [];
-  return payload.filter(isSummary).map((item) => ({ id: item.id, name: item.name }));
-};
-var parseConfigResponse = (data) => {
-  if (!data || typeof data !== "object") return null;
-  const payload = data.data;
-  if (!payload || typeof payload !== "object") return null;
-  if (!Array.isArray(payload.pages)) return null;
-  return payload;
-};
-var FestivalCardManagedPage = ({
-  apiBase = "/api/festivalCard",
-  cardId
-}) => {
-  const [currentCardId, setCurrentCardId] = useState(cardId || "");
-  const [config, setConfig] = useState(null);
-  const [loading, setLoading] = useState(true);
-  useEffect(() => {
-    const fetchList = async () => {
-      const response = await fetch(apiBase, { cache: "no-store" });
-      const data = await response.json();
-      const items = parseListResponse(data);
-      const first = items[0];
-      if (!currentCardId && first) {
-        setCurrentCardId(first.id);
-      }
-    };
-    void fetchList();
-  }, [apiBase, currentCardId]);
-  useEffect(() => {
-    if (!currentCardId) return;
-    setLoading(true);
-    void fetch(`${apiBase}/${encodeURIComponent(currentCardId)}`, { cache: "no-store" }).then((res) => res.json()).then((data) => setConfig(parseConfigResponse(data))).finally(() => setLoading(false));
-  }, [apiBase, currentCardId]);
-  return /* @__PURE__ */ React4.createElement("div", null, loading || !config ? /* @__PURE__ */ React4.createElement("div", { className: "py-12 text-center text-slate-400" }, "\u52A0\u8F7D\u4E2D...") : /* @__PURE__ */ React4.createElement(FestivalCardBook3D, { config }));
-};
-
-// src/festivalCard/server/db.ts
-var dbAdapter = null;
-var getFestivalCardDb = () => dbAdapter;
-
-// src/festivalCard/services/festivalCardService.ts
-var FestivalCardService = class {
-  constructor(options) {
-    this.db = options?.db || getFestivalCardDb();
-  }
-  async listConfigs() {
-    if (!this.db) {
-      return [{ id: DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card", name: DEFAULT_FESTIVAL_CARD_CONFIG.name }];
-    }
-    if (this.db.listConfigs) {
-      const list = await this.db.listConfigs();
-      return list.length > 0 ? list : [{ id: DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card", name: DEFAULT_FESTIVAL_CARD_CONFIG.name }];
-    }
-    return [{ id: DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card", name: DEFAULT_FESTIVAL_CARD_CONFIG.name }];
-  }
-  async getConfig(cardId = "default-festival-card") {
-    if (!this.db) return DEFAULT_FESTIVAL_CARD_CONFIG;
-    const config = await this.db.getConfig(cardId);
-    return normalizeFestivalCardConfig(config);
-  }
-  async saveConfig(cardId, config) {
-    const normalized = normalizeFestivalCardConfig(config);
-    if (!this.db) return normalized;
-    await this.db.saveConfig(cardId, normalized);
-    return normalized;
-  }
-  async deleteConfig(cardId) {
-    if (!this.db?.deleteConfig) return;
-    await this.db.deleteConfig(cardId);
-  }
-};
-var memoryStore = /* @__PURE__ */ new Map();
-var defaultId = DEFAULT_FESTIVAL_CARD_CONFIG.id || "default-festival-card";
-if (!memoryStore.has(defaultId)) {
-  memoryStore.set(defaultId, DEFAULT_FESTIVAL_CARD_CONFIG);
-}
-var createInMemoryFestivalCardDb = () => ({
-  listConfigs() {
-    return Promise.resolve(
-      Array.from(memoryStore.entries()).map(([id, config]) => ({
-        id,
-        name: config.name || id
-      }))
-    );
-  },
-  getConfig(id) {
-    return Promise.resolve(memoryStore.get(id) || null);
-  },
-  saveConfig(id, config) {
-    memoryStore.set(id, config);
-    return Promise.resolve();
-  },
-  deleteConfig(id) {
-    memoryStore.delete(id);
-    return Promise.resolve();
-  }
-});
-
-export { DEFAULT_FESTIVAL_CARD_CONFIG, FestivalCardBook3D, FestivalCardConfigEditor, FestivalCardConfigPage, FestivalCardManagedPage, FestivalCardPageRenderer, FestivalCardService, FestivalCardStudio, createInMemoryFestivalCardDb, normalizeFestivalCardConfig, resizeFestivalCardPages, useFestivalCardConfig };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map