@lemonppt/renderer 0.1.8 → 0.2.1

package/dist/render.js

@@ -1,72 +1,56 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { normalizeDeckGoal } from '@lemonppt/core';
-import { renderSlide } from '@lemonppt/templates';
+import { renderSlide, generateThemeCssVariablesWithDark, generateTheme02CssVariablesWithSchemes, generateTheme03CssVariablesWithSchemes, generateTheme04CssVariablesWithTonesAndAppearance, generateTheme05CssVariablesWithSchemesAndAppearance, generateTheme06CssVariablesWithSchemesAndAppearance, } from '@lemonppt/templates';
 import ReactDOMServer from 'react-dom/server';
-import { editorScript } from './editor-script.js';
 export function renderDeck(goal, options = {}) {
     goal = normalizeDeckGoal(goal);
-    const { width = 1280, height = 720, editable = false } = options;
+    const { width = 1280, height = 720 } = options;
     const slideCount = goal.slides.length;
     const slideElements = goal.slides.map((slide, index) => {
-        const element = renderSlide(slide, { slideIdx: index, editable, theme: goal.theme });
+        const element = renderSlide(slide, { slideIdx: index, editable: false, theme: goal.theme });
         const stateClass = index === 0 ? 'active' : '';
-        return (_jsx("div", { className: `lp-slide-wrapper ${stateClass}`, "data-slide-index": index, "data-layout": slide.layout, style: {
+        return (_jsx("div", { className: `lp-slide-wrapper ${stateClass}`, "data-slide-index": index, "data-layout": slide.layout, "data-lp-transition": String(slide.props.transition || 'none'), style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 boxSizing: 'border-box',
             }, children: element ?? (_jsxs("div", { className: "lp-error", children: ["\u672A\u627E\u5230\u7248\u5F0F: ", slide.layout] })) }, index));
     });
-    const slidesMarkup = ReactDOMServer.renderToStaticMarkup(_jsx("div", { className: "lp-deck", "data-theme": goal.theme, "data-editable": editable ? 'true' : undefined, style: {
+    const slidesMarkup = ReactDOMServer.renderToStaticMarkup(_jsx("div", { className: "lp-deck", "data-theme": goal.theme, "data-lp-transition": "none", style: {
             width: `${width}px`,
             height: `${height}px`,
         }, children: slideElements }));
-    const slideHtmls = goal.slides.map((slide, index) => {
-        const element = renderSlide(slide, { slideIdx: index, editable, theme: goal.theme });
-        return ReactDOMServer.renderToStaticMarkup(_jsx("div", { style: {
-                width: `${width}px`,
-                height: `${height}px`,
-                boxSizing: 'border-box',
-            }, children: element ?? (_jsxs("div", { className: "lp-error", children: ["\u672A\u627E\u5230\u7248\u5F0F: ", slide.layout] })) }));
-    });
     const navMarkup = buildNavMarkup(slideCount);
-    const scriptMarkup = editable ? buildEditorScriptMarkup(goal) : buildScriptMarkup();
-    const editorBarMarkup = editable ? buildEditorBarMarkup() : '';
-    const leftPanelMarkup = editable ? buildLeftPanelMarkup(goal, slideHtmls, width, height) : '';
-    const rightPanelMarkup = editable ? buildRightPanelMarkup() : '';
-    const bodyClass = editable ? 'lp-editor-body' : '';
-    const bodyMarkup = editable
-        ? `<div class="lp-editor-root">
-${editorBarMarkup}
-<div class="lp-editor-workspace">
-${leftPanelMarkup}
-<main class="lp-editor-stage">
-  <div class="lp-editor-stage-scaler">
-    ${slidesMarkup}
-    <div class="lp-editor-page-counter"><span id="lp-current">1</span> / ${slideCount}</div>
-  </div>
-  <div class="lp-editor-zoom-bar">
-    <button id="lp-zoom-out" title="缩小">－</button>
-    <input type="range" id="lp-zoom-slider" min="35" max="150" value="100">
-    <button id="lp-zoom-in" title="放大">＋</button>
-    <button id="lp-zoom-fit" title="适应画布">适应</button>
-    <span id="lp-zoom-value">100%</span>
-  </div>
-</main>
-${rightPanelMarkup}
-</div>
-${scriptMarkup}
-</div>`
-        : `${slidesMarkup}${navMarkup}${scriptMarkup}`;
+    const scriptMarkup = buildScriptMarkup();
+    const bodyMarkup = `${slidesMarkup}${navMarkup}${scriptMarkup}`;
+    const theme = goal.theme || 'theme01';
+    const colorScheme = goal.colorScheme || (theme === 'theme02' || theme === 'theme03' ? 'scheme-a' : theme === 'theme04' ? 'green' : theme === 'theme05' ? 'coral' : theme === 'theme06' ? 'volt' : 'light');
+    const appearance = goal.appearance || (theme === 'theme03' || theme === 'theme04' || theme === 'theme05' || theme === 'theme06' ? 'dark' : undefined);
+    const appearanceAttr = appearance ? ` data-appearance="${appearance}"` : '';
+    const themeCssVars = theme === 'theme01'
+        ? generateThemeCssVariablesWithDark()
+        : theme === 'theme02'
+            ? generateTheme02CssVariablesWithSchemes()
+            : theme === 'theme03'
+                ? generateTheme03CssVariablesWithSchemes()
+                : theme === 'theme04'
+                    ? generateTheme04CssVariablesWithTonesAndAppearance()
+                    : theme === 'theme05'
+                        ? generateTheme05CssVariablesWithSchemesAndAppearance()
+                        : theme === 'theme06'
+                            ? generateTheme06CssVariablesWithSchemesAndAppearance()
+                            : '';
     const html = `<!DOCTYPE html>
-<html lang="${goal.language ?? 'zh'}">
+<html lang="${goal.language ?? 'zh'}" data-theme="${colorScheme}"${appearanceAttr}>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=${width}, initial-scale=1.0">
   <title>${escapeHtml(goal.title)}</title>
   <link rel="stylesheet" href="./assets/fonts/fonts.css">
-  <link rel="stylesheet" href="./assets/${goal.theme || 'base'}.css">
+  <link rel="stylesheet" href="./assets/${theme}.css">
+  <script src="./assets/jquery.min.js"></script>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
+${themeCssVars}
     html, body {
       width: 100%;
       height: 100%;
@@ -110,6 +94,8 @@ ${scriptMarkup}
       left: auto !important;
       transform: none !important;
       width: 100% !important;
+      height: 64px !important;
+      box-sizing: border-box !important;
       border-radius: 0 !important;
       border-bottom: 1px solid #333 !important;
       background: #1e1e1e !important;
@@ -118,20 +104,149 @@ ${scriptMarkup}
       display: flex !important;
       align-items: center !important;
       gap: 12px !important;
+      z-index: 100;
     }
     .lp-editor-root .lp-editor-title {
       margin-right: auto;
     }
+    .lp-editor-root .lp-appearance-switcher {
+      display: inline-flex;
+      align-items: center;
+      background: #2a2a2a;
+      border: 1px solid #444;
+      border-radius: 999px;
+      padding: 3px;
+      gap: 3px;
+    }
+    .lp-editor-root .lp-appearance-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      background: transparent;
+      color: #aaa;
+      border: none;
+      border-radius: 999px;
+      padding: 5px 10px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+    .lp-editor-root .lp-appearance-btn:hover {
+      color: #e5e5e5;
+    }
+    .lp-editor-root .lp-appearance-active {
+      background: #3a3a3a;
+      color: #fff;
+      font-weight: 500;
+    }
     .lp-editor-root .lp-editor-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
       background: #2a2a2a;
       color: #e5e5e5;
       border: 1px solid #444;
+      border-radius: 8px;
+      padding: 7px 12px;
+      font-size: 13px;
+      line-height: 1.4;
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
     }
     .lp-editor-root .lp-editor-btn:hover:not(:disabled) {
       background: #333;
+      border-color: #555;
     }
     .lp-editor-root .lp-editor-btn:disabled {
       opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .lp-editor-root .lp-editor-btn-primary {
+      background: #34d399 !important;
+      border-color: #34d399 !important;
+      color: #111 !important;
+      font-weight: 600;
+    }
+    .lp-editor-root .lp-editor-btn-primary:hover:not(:disabled) {
+      background: #10b981 !important;
+      border-color: #10b981 !important;
+    }
+    .lp-editor-root .lp-editor-select {
+      background: #2a2a2a;
+      color: #e5e5e5;
+      border: 1px solid #444;
+      border-radius: 6px;
+      padding: 6px 10px;
+      font-size: 13px;
+      outline: none;
+      max-width: 120px;
+    }
+    .lp-editor-root .lp-editor-select:focus {
+      border-color: #5b8cff;
+    }
+    .lp-editor-export {
+      position: relative;
+    }
+    .lp-editor-export-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .lp-editor-caret {
+      font-size: 10px;
+      line-height: 1;
+      transform: translateY(1px);
+    }
+    .lp-editor-export-menu {
+      position: absolute;
+      top: calc(100% + 6px);
+      right: 0;
+      min-width: 220px;
+      background: #2a2a2a;
+      border: 1px solid #444;
+      border-radius: 8px;
+      padding: 6px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .lp-editor-export-menu[hidden] {
+      display: none !important;
+    }
+    .lp-editor-export-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 8px 10px;
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      color: #e5e5e5;
+      font-size: 14px;
+      cursor: pointer;
+      text-align: left;
+    }
+    .lp-editor-export-item:hover {
+      background: #3a3a3a;
+    }
+    .lp-editor-export-icon {
+      width: 20px;
+      text-align: center;
+      color: #aaa;
+      font-size: 14px;
+    }
+    .lp-editor-export-label {
+      flex: 1;
+    }
+    .lp-editor-export-tag {
+      font-size: 11px;
+      color: #999;
+      background: #3a3a3a;
+      padding: 2px 6px;
+      border-radius: 4px;
     }
     .lp-editor-workspace {
       display: flex;
@@ -139,15 +254,16 @@ ${scriptMarkup}
       min-height: 0;
     }
     .lp-editor-left-panel {
-      width: 240px;
+      width: 180px;
       flex: none;
       background: #1e1e1e;
       border-right: 1px solid #333;
       overflow-y: auto;
       padding: 12px;
+      position: relative;
     }
     .lp-editor-right-panel {
-      width: 280px;
+      width: 400px;
       flex: none;
       background: #1e1e1e;
       border-left: 1px solid #333;
@@ -161,6 +277,10 @@ ${scriptMarkup}
       justify-content: center;
       overflow: hidden;
       position: relative;
+      background-color: #1a1a1a;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
+      background-size: 28px 28px;
+      background-position: center center;
     }
     .lp-editor-stage-scaler {
       transform-origin: center center;
@@ -187,24 +307,37 @@ ${scriptMarkup}
       border: 2px solid transparent;
       border-radius: 6px;
       background: #2a2a2a;
-      cursor: pointer;
+      cursor: grab;
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 10px;
       text-align: left;
       color: #bbb;
-      transition: border-color 0.15s, background 0.15s;
+      transition: border-color 0.15s, background 0.15s, opacity 0.15s;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      position: relative;
+      user-select: none;
+      -webkit-user-select: none;
+      outline: none;
+      content-visibility: auto;
+      contain-intrinsic-size: auto 180px;
     }
     .lp-thumbnail:hover {
       background: #333;
     }
+    .lp-thumbnail:focus-visible {
+      border-color: #5b8cff;
+    }
     .lp-thumbnail.active {
       border-color: #3b82f6;
       background: #26354f;
       color: #fff;
     }
+    .lp-thumbnail.dragging,
+    .lp-thumbnail:active {
+      cursor: grabbing;
+    }
     .lp-thumbnail-index {
       font-size: 11px;
       color: #888;
@@ -225,6 +358,119 @@ ${scriptMarkup}
       color: #666;
       margin-top: 4px;
     }
+    .lp-thumbnail-drag-handle {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      width: 20px;
+      height: 24px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      opacity: 0.45;
+      z-index: 4;
+      color: #888;
+      transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
+      line-height: 1;
+      font-size: 10px;
+      user-select: none;
+      -webkit-user-select: none;
+      pointer-events: none;
+      border-radius: 4px;
+      padding: 2px;
+    }
+    .lp-thumbnail:hover .lp-thumbnail-drag-handle,
+    .lp-thumbnail-drag-handle:hover {
+      opacity: 0.9;
+      color: #bbb;
+      background: rgba(255, 255, 255, 0.08);
+    }
+    .lp-thumbnail.dragging .lp-thumbnail-drag-handle {
+      opacity: 1;
+      color: #fff;
+      background: rgba(255, 255, 255, 0.15);
+    }
+    .lp-thumbnail.dragging {
+      opacity: 0.45;
+      border: 2px dashed #3b82f6;
+      background: #1f2937;
+    }
+    .lp-thumbnail.drag-over {
+      border-color: #10b981;
+      background: #1f3d32;
+    }
+    .lp-thumbnail-drop-indicator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: #3b82f6;
+      border-radius: 2px;
+      pointer-events: none;
+      z-index: 10;
+      opacity: 0;
+      transition: opacity 0.1s ease;
+      box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
+    }
+    .lp-thumbnail-drop-indicator.visible {
+      opacity: 1;
+    }
+    .lp-editor-thumbnails {
+      position: relative;
+    }
+    .lp-delete-confirm-toast {
+      position: fixed;
+      z-index: 1000;
+      width: 180px;
+      background: #262626;
+      border: 1px solid #444;
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      margin: 0;
+    }
+    .lp-delete-confirm-toast[hidden] {
+      display: none;
+    }
+    .lp-delete-confirm-text {
+      font-size: 13px;
+      color: #e5e5e5;
+      line-height: 1.4;
+      margin-bottom: 10px;
+    }
+    .lp-delete-confirm-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+    .lp-delete-confirm-cancel,
+    .lp-delete-confirm-confirm {
+      padding: 5px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+      border: 1px solid #555;
+      background: #333;
+      color: #e5e5e5;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .lp-delete-confirm-cancel:hover {
+      background: #3a3a3a;
+      border-color: #666;
+    }
+    .lp-delete-confirm-confirm {
+      background: #dc2626;
+      border-color: #dc2626;
+      color: #fff;
+    }
+    .lp-delete-confirm-confirm:hover {
+      background: #b91c1c;
+      border-color: #b91c1c;
+    }
     .lp-property-header {
       font-size: 14px;
       font-weight: 600;
@@ -266,8 +512,9 @@ ${scriptMarkup}
       resize: vertical;
     }
     .lp-selected {
-      outline: 2px solid #3b82f6 !important;
+      outline: 2px solid var(--lp-accent, #3b82f6) !important;
       outline-offset: 2px !important;
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-accent, #3b82f6) 20%, transparent);
     }
     .lp-editor-root .lp-nav,
     .lp-editor-root .lp-page-counter,
@@ -280,6 +527,8 @@ ${scriptMarkup}
       padding: 0;
       justify-content: flex-end;
       background: var(--lp-bg, #222);
+      content-visibility: auto;
+      contain-intrinsic-size: auto 120px;
     }
     .lp-thumbnail-render {
       position: absolute;
@@ -332,6 +581,33 @@ ${scriptMarkup}
     .lp-thumbnail.active .lp-thumbnail-scrim {
       background: linear-gradient(to bottom, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.45) 100%);
     }
+    .lp-thumbnail-delete {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      z-index: 3;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      background: rgba(239, 68, 68, 0.85);
+      color: #fff;
+      font-size: 14px;
+      line-height: 1;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.15s, background 0.15s;
+      pointer-events: auto;
+    }
+    .lp-thumbnail:hover .lp-thumbnail-delete,
+    .lp-thumbnail:focus-within .lp-thumbnail-delete {
+      opacity: 1;
+    }
+    .lp-thumbnail-delete:hover {
+      background: rgba(220, 38, 38, 1);
+    }
     .lp-editor-zoom-bar {
       position: absolute;
       bottom: 16px;
@@ -378,6 +654,15 @@ ${scriptMarkup}
       text-transform: uppercase;
       letter-spacing: 0.05em;
     }
+    .lp-property-section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+    .lp-property-section-header .lp-property-section-title {
+      margin-bottom: 0;
+    }
     .lp-property-help {
       font-size: 12px;
       color: #888;
@@ -417,28 +702,30 @@ ${scriptMarkup}
       cursor: pointer;
     }
     .lp-property-toggle-track {
-      width: 38px;
-      height: 20px;
+      width: 46px;
+      height: 24px;
       background: #444;
-      border-radius: 10px;
+      border-radius: 12px;
       position: relative;
-      transition: background 0.2s;
+      transition: background 0.25s ease;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
     }
     .lp-property-toggle input:checked + .lp-property-toggle-track {
-      background: #3b82f6;
+      background: #34d399;
     }
     .lp-property-toggle-thumb {
       position: absolute;
       top: 2px;
       left: 2px;
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
       background: #fff;
       border-radius: 50%;
-      transition: transform 0.2s;
+      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
     }
     .lp-property-toggle input:checked + .lp-property-toggle-track .lp-property-toggle-thumb {
-      transform: translateX(18px);
+      transform: translateX(22px);
     }
     .lp-property-toggle input {
       position: absolute;
@@ -488,24 +775,193 @@ ${scriptMarkup}
     .lp-property-range {
       width: 100%;
     }
+    .lp-property-slider-wrap {
+      margin-bottom: 16px;
+    }
+    .lp-property-slider-label {
+      font-size: 12px;
+      color: #bbb;
+    }
+    .lp-property-slider-value {
+      font-size: 13px;
+      font-weight: 700;
+      color: #fff;
+      min-width: 26px;
+      text-align: center;
+      padding: 2px 8px;
+      background: linear-gradient(135deg, rgba(91,155,213,0.9), rgba(139,92,246,0.9));
+      border-radius: 999px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    }
+    .lp-property-slider-ruler {
+      position: relative;
+      padding: 18px 18px 10px;
+      background: rgba(255, 255, 255, 0.04);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 14px;
+      cursor: pointer;
+      transition: background 0.2s ease, border-color 0.2s ease;
+    }
+    .lp-property-slider-ruler:hover {
+      background: rgba(255, 255, 255, 0.07);
+      border-color: rgba(255, 255, 255, 0.14);
+    }
+    .lp-property-slider-ruler::before {
+      content: '';
+      position: absolute;
+      top: 22px;
+      left: 18px;
+      right: 18px;
+      height: 2px;
+      background: rgba(255, 255, 255, 0.12);
+      border-radius: 1px;
+      pointer-events: none;
+    }
+    .lp-property-slider {
+      width: 100%;
+      -webkit-appearance: none;
+      appearance: none;
+      height: 8px;
+      background: rgba(255, 255, 255, 0.14);
+      border-radius: 4px;
+      outline: none;
+      display: block;
+      margin: 0;
+      cursor: pointer;
+      transition: box-shadow 0.2s ease;
+    }
+    .lp-property-slider:hover {
+      box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.12);
+    }
+    .lp-property-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 24px;
+      height: 24px;
+      background: #fff;
+      border-radius: 50%;
+      cursor: grab;
+      border: 4px solid #5b9bd5;
+      box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.2), 0 4px 12px rgba(0, 0, 0, 0.35);
+      margin-top: -8px;
+      transition: transform 0.15s ease, box-shadow 0.2s ease;
+    }
+    .lp-property-slider::-webkit-slider-thumb:hover {
+      transform: scale(1.12);
+      box-shadow: 0 0 0 6px rgba(91, 155, 213, 0.28), 0 6px 16px rgba(0, 0, 0, 0.4);
+    }
+    .lp-property-slider:active::-webkit-slider-thumb {
+      cursor: grabbing;
+      transform: scale(1.05);
+      border-color: #8b5cf6;
+    }
+    .lp-property-slider::-webkit-slider-runnable-track {
+      height: 8px;
+      border-radius: 4px;
+    }
+    .lp-property-slider::-moz-range-thumb {
+      width: 24px;
+      height: 24px;
+      background: #fff;
+      border-radius: 50%;
+      cursor: grab;
+      border: 4px solid #5b9bd5;
+      box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.2), 0 4px 12px rgba(0, 0, 0, 0.35);
+      transition: transform 0.15s ease, box-shadow 0.2s ease;
+    }
+    .lp-property-slider::-moz-range-thumb:hover {
+      transform: scale(1.12);
+      box-shadow: 0 0 0 6px rgba(91, 155, 213, 0.28), 0 6px 16px rgba(0, 0, 0, 0.4);
+    }
+    .lp-property-slider:active::-moz-range-thumb {
+      cursor: grabbing;
+      transform: scale(1.05);
+      border-color: #8b5cf6;
+    }
+    .lp-property-slider::-moz-range-track {
+      height: 8px;
+      border-radius: 4px;
+    }
+    .lp-property-slider-scale {
+      position: relative;
+      height: 34px;
+      margin-top: 10px;
+      margin-left: 0;
+      margin-right: 0;
+    }
+    .lp-property-slider-tick {
+      position: absolute;
+      top: 0;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      padding: 0 6px;
+      transition: transform 0.15s ease;
+      min-width: 20px;
+    }
+    .lp-property-slider-tick:hover {
+      transform: translateX(-50%) scale(1.15);
+    }
+    .lp-property-slider-tick::before {
+      content: '';
+      width: 2px;
+      height: 12px;
+      background: rgba(255, 255, 255, 0.65);
+      border-radius: 1px;
+      transition: background 0.2s ease, height 0.15s ease;
+    }
+    .lp-property-slider-tick:hover::before {
+      background: #fff;
+      height: 16px;
+    }
+    .lp-property-slider-tick-label {
+      font-size: 12px;
+      font-weight: 700;
+      color: rgba(255, 255, 255, 0.85);
+      line-height: 1;
+      transition: color 0.2s ease;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+      white-space: nowrap;
+    }
+    .lp-property-slider-tick:hover .lp-property-slider-tick-label {
+      color: #fff;
+    }
     .lp-property-array {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 8px;
     }
     .lp-property-array-item {
       background: #252525;
-      border: 1px solid #383838;
+      border-bottom: 1px solid #383838;
       border-radius: 8px;
-      padding: 10px;
+      padding: 10px 10px 20px 10px;
     }
-    .lp-property-array-header {
+    .lp-property-array-item-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      font-family: var(--lp-font-mono, ui-monospace, monospace);
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--lp-accent, #888);
       margin-bottom: 8px;
+      letter-spacing: 0.04em;
+    }
+    .lp-property-array-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       font-size: 12px;
       color: #aaa;
+      line-height: 1;
+    }
+    .lp-property-array-header .lp-property-btn-sm {
+      width: auto;
+      margin-left: auto;
     }
     .lp-property-btn {
       width: 100%;
@@ -520,20 +976,34 @@ ${scriptMarkup}
     .lp-property-btn:hover {
       background: #333;
     }
+    .lp-property-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
     .lp-property-btn-primary {
       background: #3b82f6;
       border-color: #3b82f6;
       color: #fff;
     }
-    .lp-property-btn-primary:hover {
+    .lp-property-btn-primary:hover:not(:disabled) {
       background: #2563eb;
     }
     .lp-property-btn-danger {
-      border-color: #7f1d1d;
-      color: #fca5a5;
+      border-color: transparent;
+      background: transparent;
+      color: #ef4444;
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      font-size: 16px;
+      line-height: 1;
     }
-    .lp-property-btn-danger:hover {
-      background: #450a0a;
+    .lp-property-btn-danger:hover:not(:disabled) {
+      background: rgba(239, 68, 68, 0.12);
     }
     .lp-property-btn-sm {
       padding: 4px 8px;
@@ -546,6 +1016,61 @@ ${scriptMarkup}
       text-align: center;
       padding: 20px 0;
     }
+    /* 可编辑图片占位区：固定区域、点击直接上传、深色主题可见 */
+    .lp-editable-image-placeholder {
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      background: color-mix(in srgb, var(--lp-ink, #111) 6%, transparent);
+      border: 2px dashed color-mix(in srgb, var(--lp-ink, #111) 22%, transparent);
+      border-radius: 12px;
+      color: var(--lp-ink3, #6b7280);
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s, color 0.15s;
+      user-select: none;
+    }
+    .lp-editable-image-placeholder:hover {
+      background: color-mix(in srgb, var(--lp-accent, #3b82f6) 10%, transparent);
+      border-color: var(--lp-accent, #3b82f6);
+      color: var(--lp-accent, #3b82f6);
+    }
+    .lp-editable-image-placeholder-icon {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--lp-ink, #111) 10%, transparent);
+      font-size: 20px;
+      line-height: 1;
+      transition: background 0.15s, transform 0.15s;
+    }
+    .lp-editable-image-placeholder:hover .lp-editable-image-placeholder-icon {
+      background: color-mix(in srgb, var(--lp-accent, #3b82f6) 16%, transparent);
+      transform: scale(1.08);
+    }
+    .lp-editable-image-placeholder-text {
+      font-size: 13px;
+      font-weight: 500;
+    }
+    /* 画布空编辑元素占位提示：新增数组项或清空标题时仍可定位和编辑 */
+    [data-lp-editable="true"]:empty::before {
+      content: '点击编辑';
+      opacity: 0.35;
+      pointer-events: none;
+    }
+    [data-lp-editable="true"]:empty {
+      min-width: 3em;
+      outline: 1px dashed color-mix(in srgb, var(--lp-accent, #3b82f6) 40%, transparent);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
     @media print {
       html, body {
         display: block;
@@ -594,16 +1119,288 @@ ${scriptMarkup}
         break-after: auto;
       }
     }
+
+    /* ---- 编辑器演示模式 ---- */
+    .lp-editor-presentation-mode .lp-editor-bar,
+    .lp-editor-presentation-mode .lp-editor-left-panel,
+    .lp-editor-presentation-mode .lp-editor-right-panel,
+    .lp-editor-presentation-mode .lp-editor-zoom-bar,
+    .lp-editor-presentation-mode .lp-editor-page-counter {
+      display: none !important;
+    }
+    .lp-editor-presentation-mode .lp-editor-workspace {
+      display: block;
+    }
+    .lp-editor-presentation-mode .lp-editor-stage {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      background: #000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    .lp-editor-presentation-mode .lp-editor-stage-scaler {
+      transform: scale(var(--lp-presentation-scale, 1)) !important;
+      width: ${width}px !important;
+      height: ${height}px !important;
+      max-width: none;
+      max-height: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .lp-editor-presentation-mode .lp-deck {
+      width: ${width}px !important;
+      height: ${height}px !important;
+      border-radius: 0;
+    }
+    .lp-editor-root:fullscreen {
+      background: #000;
+    }
+    .lp-editor-root:-webkit-full-screen {
+      background: #000;
+    }
+    .lp-editor-presentation-exit {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 1001;
+      background: rgba(255, 255, 255, 0.12);
+      color: #fff;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 6px;
+      padding: 8px 12px;
+      font-size: 13px;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 200ms ease;
+    }
+    .lp-editor-presentation-mode:hover .lp-editor-presentation-exit,
+    .lp-editor-presentation-exit:focus {
+      opacity: 1;
+    }
+
+    /* 添加幻灯片弹窗 */
+    .lp-add-slide-modal {
+      position: fixed;
+      inset: 0;
+      z-index: 2000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .lp-add-slide-modal[hidden] {
+      display: none;
+    }
+    .lp-add-slide-modal-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.72);
+      backdrop-filter: blur(4px);
+    }
+    .lp-add-slide-modal-content {
+      position: relative;
+      width: min(1080px, calc(100vw - 48px));
+      max-height: calc(100vh - 64px);
+      background: #1e1e1e;
+      border-radius: 16px;
+      padding: 28px 32px 32px;
+      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
+      display: flex;
+      flex-direction: column;
+      color: #fff;
+    }
+    .lp-add-slide-modal-close {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: transparent;
+      color: rgba(255, 255, 255, 0.6);
+      font-size: 26px;
+      line-height: 1;
+      cursor: pointer;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 150ms ease, color 150ms ease;
+    }
+    .lp-add-slide-modal-close:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+    }
+    .lp-add-slide-modal-title {
+      font-size: 18px;
+      font-weight: 500;
+      margin: 0 0 24px;
+      color: #fff;
+    }
+    .lp-add-slide-grid {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: 14px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-right: 4px;
+      margin-bottom: 28px;
+    }
+    .lp-add-slide-option {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 8px;
+      background: #2a2a2a;
+      border: 2px solid transparent;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
+    }
+    .lp-add-slide-option:hover {
+      background: #333;
+    }
+    .lp-add-slide-option.selected {
+      border-color: #34d399;
+      background: #243a30;
+    }
+    .lp-add-slide-icon {
+      width: 44px;
+      height: 44px;
+      border-radius: 8px;
+      background: #3f3f3f;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: rgba(255, 255, 255, 0.75);
+      transition: background 150ms ease, color 150ms ease;
+    }
+    .lp-add-slide-option:hover .lp-add-slide-icon {
+      background: #4a4a4a;
+      color: #fff;
+    }
+    .lp-add-slide-option.selected .lp-add-slide-icon {
+      background: #34d399;
+      color: #1e1e1e;
+    }
+    .lp-add-slide-icon svg {
+      width: 22px;
+      height: 22px;
+    }
+    .lp-add-slide-label {
+      font-size: 13px;
+      color: rgba(255, 255, 255, 0.85);
+      text-align: center;
+      line-height: 1.25;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+    .lp-add-slide-option.selected .lp-add-slide-label {
+      color: #34d399;
+    }
+    .lp-add-slide-modal-btn {
+      align-self: center;
+      padding: 12px 32px;
+      border-radius: 999px;
+      border: none;
+      font-size: 15px;
+      font-weight: 500;
+      cursor: pointer;
+      background: #34d399;
+      color: #111;
+      transition: background 150ms ease, opacity 150ms ease, transform 120ms ease;
+    }
+    .lp-add-slide-modal-btn:hover:not(:disabled) {
+      background: #2cb886;
+    }
+    .lp-add-slide-modal-btn:disabled {
+      background: #4a4a4a;
+      color: rgba(255, 255, 255, 0.4);
+      cursor: not-allowed;
+    }
+    @media (max-width: 860px) {
+      .lp-add-slide-grid {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+    @media (max-width: 560px) {
+      .lp-add-slide-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+      .lp-add-slide-modal-content {
+        padding: 24px 20px 28px;
+      }
+    }
+
+    /* jQuery 自定义滚动条样式（基于 WebKit + Firefox 标准属性） */
+    .lp-editor-left-panel.lp-custom-scrollbar::-webkit-scrollbar,
+    .lp-editor-right-panel.lp-custom-scrollbar::-webkit-scrollbar,
+    .lp-add-slide-grid.lp-custom-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    .lp-editor-left-panel.lp-custom-scrollbar::-webkit-scrollbar-track,
+    .lp-editor-right-panel.lp-custom-scrollbar::-webkit-scrollbar-track,
+    .lp-add-slide-grid.lp-custom-scrollbar::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+    .lp-editor-left-panel.lp-custom-scrollbar::-webkit-scrollbar-thumb,
+    .lp-editor-right-panel.lp-custom-scrollbar::-webkit-scrollbar-thumb,
+    .lp-add-slide-grid.lp-custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.35);
+      border-radius: 4px;
+    }
+    .lp-editor-left-panel.lp-custom-scrollbar::-webkit-scrollbar-thumb:hover,
+    .lp-editor-right-panel.lp-custom-scrollbar::-webkit-scrollbar-thumb:hover,
+    .lp-add-slide-grid.lp-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.55);
+    }
+    .lp-editor-left-panel.lp-custom-scrollbar,
+    .lp-editor-right-panel.lp-custom-scrollbar,
+    .lp-add-slide-grid.lp-custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.1);
+    }
+
+    .lp-filmstrip-v1-track.lp-custom-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    .lp-filmstrip-v1-track.lp-custom-scrollbar::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.08);
+      border-radius: 4px;
+    }
+    .lp-filmstrip-v1-track.lp-custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.35);
+      border-radius: 4px;
+    }
+    .lp-filmstrip-v1-track.lp-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.55);
+    }
+    .lp-filmstrip-v1-track.lp-custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.08);
+    }
   </style>
 </head>
-<body class="${bodyClass}">
+<body>
 ${bodyMarkup}
 </body>
 </html>`;
-    const theme = goal.theme || 'base';
     return {
         html,
-        assets: ['./assets/fonts/fonts.css', `./assets/${theme}.css`],
+        assets: [
+            './assets/fonts/fonts.css',
+            `./assets/${theme}.css`,
+            './assets/jquery.min.js',
+        ],
     };
 }
 function buildNavMarkup(slideCount) {
@@ -618,80 +1415,6 @@ function buildNavMarkup(slideCount) {
 <div class="lp-page-counter"><span id="lp-current">1</span> / ${slideCount}</div>
 <div class="lp-hint">← → 翻页</div>`;
 }
-function buildEditorBarMarkup() {
-    return `<div class="lp-editor-bar">
-  <span class="lp-editor-title">lemonPPT 编辑器</span>
-  <label class="lp-theme-switcher-label">
-    主题
-    <select id="lp-theme-switcher">
-      <option value="base">极简白</option>
-      <option value="dark-tech">深色科技</option>
-      <option value="warm-business">暖色商务</option>
-    </select>
-  </label>
-  <button class="lp-editor-btn" id="lp-play" title="播放演示">▶ 播放</button>
-  <button class="lp-editor-btn" id="lp-undo" title="撤销 (Ctrl+Z)">↩ 撤销</button>
-  <button class="lp-editor-btn" id="lp-redo" title="重做 (Ctrl+Y)">↪ 重做</button>
-  <button class="lp-editor-btn" id="lp-download-goal" title="下载 goal.json">下载 goal.json</button>
-  <button class="lp-editor-btn" id="lp-export-pptx" title="导出 PPTX">导出 PPTX</button>
-  <button class="lp-editor-btn" id="lp-export-pdf" title="导出 PDF">导出 PDF</button>
-</div>`;
-}
-function buildLeftPanelMarkup(goal, slideHtmls, slideWidth, slideHeight) {
-    const thumbInnerWidth = 216;
-    const scale = thumbInnerWidth / slideWidth;
-    const buttons = goal.slides.map((slide, index) => {
-        const label = getSlideLabel(slide);
-        const activeClass = index === 0 ? 'active' : '';
-        const slideHtml = slideHtmls[index] || '';
-        return `<button class="lp-thumbnail ${activeClass}" data-index="${index}" type="button">
-  <div class="lp-thumbnail-render">
-    <div class="lp-thumbnail-scaler" style="width:${slideWidth}px;height:${slideHeight}px;transform:scale(${scale});transform-origin:top left;">
-      ${slideHtml}
-    </div>
-  </div>
-  <div class="lp-thumbnail-scrim"></div>
-  <div class="lp-thumbnail-content">
-    <div class="lp-thumbnail-index">${index + 1} / ${goal.slides.length}</div>
-    <div class="lp-thumbnail-title">${escapeHtml(label)}</div>
-    <div class="lp-thumbnail-layout">${escapeHtml(slide.layout)}</div>
-  </div>
-</button>`;
-    }).join('');
-    return `<aside class="lp-editor-left-panel" aria-label="幻灯片缩略图">
-  <div class="lp-editor-thumbnails">
-    ${buttons}
-  </div>
-</aside>`;
-}
-function getSlideLabel(slide) {
-    const props = slide.props;
-    if (!props)
-        return slide.layout;
-    const candidates = [
-        props.title,
-        props.name,
-        props.kicker,
-        props.quote,
-        props.heading,
-        (props.items && Array.isArray(props.items) ? props.items[0] : undefined),
-        (props.features && Array.isArray(props.features) ? props.features[0]?.title : undefined),
-        (props.members && Array.isArray(props.members) ? props.members[0]?.name : undefined),
-    ];
-    for (const value of candidates) {
-        if (value != null && String(value).trim())
-            return String(value).trim();
-    }
-    return slide.layout;
-}
-function buildRightPanelMarkup() {
-    return `<aside class="lp-editor-right-panel" aria-label="属性面板">
-  <div class="lp-property-header">属性</div>
-  <div id="lp-property-content">
-    <div class="lp-property-empty">点击幻灯片中的文本或图片以编辑属性</div>
-  </div>
-</aside>`;
-}
 function buildScriptMarkup() {
     return `<script>
 (function () {
@@ -700,26 +1423,86 @@ function buildScriptMarkup() {
   const prevBtn = document.getElementById('lp-prev');
   const nextBtn = document.getElementById('lp-next');
   const currentLabel = document.getElementById('lp-current');
+  const deck = document.querySelector('.lp-deck');
   let current = 0;
+  let isTransitioning = false;
+  let cleanupTimer = null;
+
+  function updateUI() {
+    dots.forEach((dot, index) => {
+      dot.classList.toggle('active', index === current);
+    });
+    if (currentLabel) currentLabel.textContent = String(current + 1);
+    if (prevBtn) prevBtn.disabled = current === 0 || isTransitioning;
+    if (nextBtn) nextBtn.disabled = current === slides.length - 1 || isTransitioning;
+  }
+
+  function resetTransitionState() {
+    slides.forEach((slide) => slide.classList.remove('enter', 'leave'));
+    if (deck) {
+      deck.setAttribute('data-lp-transition', 'none');
+      deck.removeAttribute('data-lp-direction');
+    }
+    isTransitioning = false;
+    updateClasses();
+  }
 
   function updateClasses() {
     slides.forEach((slide, index) => {
-      slide.classList.remove('active', 'prev');
+      slide.classList.remove('active', 'prev', 'enter', 'leave');
       if (index === current) slide.classList.add('active');
       else if (index < current) slide.classList.add('prev');
     });
-    dots.forEach((dot, index) => {
-      dot.classList.toggle('active', index === current);
-    });
-    if (currentLabel) currentLabel.textContent = String(current + 1);
-    if (prevBtn) prevBtn.disabled = current === 0;
-    if (nextBtn) nextBtn.disabled = current === slides.length - 1;
+    updateUI();
   }
 
   function goTo(index) {
-    if (index < 0 || index >= slides.length) return;
+    if (index === current || index < 0 || index >= slides.length || isTransitioning) return;
+    const leaving = slides[current];
+    const entering = slides[index];
+    const transition = entering.dataset.lpTransition || 'none';
+    const direction = index > current ? 'next' : 'prev';
+
+    if (transition === 'none') {
+      current = index;
+      if (deck) {
+        deck.setAttribute('data-lp-transition', 'none');
+        deck.removeAttribute('data-lp-direction');
+      }
+      leaving.classList.remove('active');
+      entering.classList.add('active');
+      updateClasses();
+      return;
+    }
+
+    isTransitioning = true;
     current = index;
-    updateClasses();
+    updateUI();
+
+    if (deck) {
+      deck.setAttribute('data-lp-transition', transition);
+      deck.setAttribute('data-lp-direction', direction);
+    }
+
+    leaving.classList.add('leave');
+    entering.classList.add('enter');
+    // 先禁用 transition，让 leave/enter 的初始状态直接落位，
+    // 避免从上一状态的 translateX 插值；随后恢复 transition 再切换 active。
+    leaving.style.transition = 'none';
+    entering.style.transition = 'none';
+    void entering.offsetWidth;
+    leaving.style.transition = '';
+    entering.style.transition = '';
+    leaving.classList.remove('active');
+    entering.classList.add('active');
+
+    function finish() {
+      entering.removeEventListener('transitionend', finish);
+      clearTimeout(cleanupTimer);
+      resetTransitionState();
+    }
+    entering.addEventListener('transitionend', finish);
+    cleanupTimer = setTimeout(finish, 600);
   }
 
   if (prevBtn) prevBtn.addEventListener('click', () => goTo(current - 1));
@@ -728,6 +1511,7 @@ function buildScriptMarkup() {
     dot.addEventListener('click', () => goTo(Number(dot.dataset.index)));
   });
   document.addEventListener('keydown', (e) => {
+    if (isTransitioning) return;
     if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') goTo(current + 1);
     if (e.key === 'ArrowLeft' || e.key === 'PageUp') goTo(current - 1);
     if (e.key === 'Home') goTo(0);
@@ -736,13 +1520,15 @@ function buildScriptMarkup() {
 
   updateClasses();
 })();
-</script>`;
-}
-function buildEditorScriptMarkup(goal) {
-    const goalJson = JSON.stringify(goal, null, 2).replace(/</g, '\\u003c');
-    return `<script>
-window.__lemonPPT_goal = ${goalJson};
-${editorScript}
+</script>
+<script src="./assets/client-render.js"></script>
+<script src="./assets/theme-echarts.js"></script>
+<script>
+(function () {
+  if (typeof window.__lemonPPT_initECharts === 'function') {
+    window.__lemonPPT_initECharts();
+  }
+})();
 </script>`;
 }
 function escapeHtml(text) {