sa2kit 2.0.0 → 2.0.2

package/dist/festivalCard/index.mjs

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