html2pptx-local-mcp 1.1.19 → 1.1.21

package/local-editor-app/components/studio/edit-property-panel.jsx

@@ -0,0 +1,1061 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+} from 'lucide-react';
+import {
+  getExpandedBorderBoxMetric,
+  normalizeEditPanelInputValue,
+  normalizeStyleValue,
+} from '../../lib/edit-panel-value-normalizer';
+
+const TEXT_LEAF_TAGS = new Set([
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'p', 'span', 'a', 'em', 'strong', 'b', 'i',
+  'li', 'td', 'th', 'caption', 'figcaption',
+  'button', 'label', 'small', 'code',
+]);
+
+const TEXT_BLOCK_TAGS = new Set([
+  'div', 'section', 'article', 'blockquote', 'header', 'footer',
+]);
+
+const PHRASING_TEXT_TAGS = new Set([...TEXT_LEAF_TAGS, 'br', 'wbr']);
+
+const DEFAULT_LABELS = {
+  edit: 'Edit',
+  closeEditPanel: 'Close edit panel',
+  textContent: 'Text content',
+  textRun: 'Text',
+  layout: 'Layout',
+  xShort: 'X',
+  yShort: 'Y',
+  typography: 'Typography',
+  size: 'Size',
+  weight: 'Weight',
+  color: 'Color',
+  align: 'Align',
+  lineHeight: 'Line height',
+  widthShort: 'W',
+  heightShort: 'H',
+  minWidth: 'Min W',
+  minHeight: 'Min H',
+  box: 'Box',
+  appearance: 'Appearance',
+  fill: 'Fill',
+  spacing: 'Spacing',
+  background: 'Background',
+  padding: 'Padding',
+  margin: 'Margin',
+  all: 'All',
+  mixed: 'mixed',
+  top: 'Top',
+  left: 'Left',
+  right: 'Right',
+  bottom: 'Bottom',
+  corners: 'Corners',
+  cornerRadius: 'Corner radius',
+  opacity: 'Opacity',
+  border: 'Border',
+  style: 'Style',
+  width: 'Width',
+  hint: 'Edits apply as inline styles & textContent. Toggle Edit off to commit them back to the HTML editor.',
+  className: 'class',
+  image: 'Assets',
+  replaceImage: 'Replace image',
+  replaceVideo: 'Replace video',
+  insertImage: 'Insert asset',
+  chooseImage: 'Choose asset…',
+  applyBackground: 'Use as background',
+  dragAssetHint: 'Drag onto the slide to place it',
+  uploading: 'Uploading…',
+  saveTo: 'Save to',
+  assetScopeProject: 'This deck',
+  assetScopeGlobal: 'Global',
+  savedAssets: 'Saved assets',
+  noSavedAssets: 'No saved assets yet.',
+  assetNeedsFile: 'Save this file locally first to add assets.',
+};
+
+function assetKindFromName(value) {
+  const path = String(value || '').split(/[?#]/)[0].toLowerCase();
+  if (/\.(mp4|webm|mov|m4v|ogv)$/.test(path)) return 'video';
+  if (/\.(png|jpe?g|gif|webp|svg|avif)$/.test(path)) return 'image';
+  return 'file';
+}
+
+function isTextElement(el) {
+  if (!el) return false;
+  const tag = el.tagName.toLowerCase();
+  if (!el.textContent?.trim()) return false;
+  if (TEXT_LEAF_TAGS.has(tag)) return true;
+  if (!TEXT_BLOCK_TAGS.has(tag)) return false;
+  if (el.classList?.contains('slide') || el.classList?.contains('canvas')) return false;
+  const hasDirectText = Array.from(el.childNodes).some((node) => (
+    node.nodeType === 3 && node.nodeValue?.trim()
+  ));
+  if (!hasDirectText) return false;
+  return Array.from(el.children).every((child) => (
+    PHRASING_TEXT_TAGS.has(child.tagName.toLowerCase())
+  ));
+}
+
+function collectTextRuns(el) {
+  if (!isTextElement(el)) return [];
+  const doc = el.ownerDocument;
+  const win = doc.defaultView;
+  if (!doc.createTreeWalker || !win?.NodeFilter) return [];
+
+  const walker = doc.createTreeWalker(
+    el,
+    win.NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        return node.nodeValue?.trim()
+          ? win.NodeFilter.FILTER_ACCEPT
+          : win.NodeFilter.FILTER_REJECT;
+      },
+    },
+  );
+
+  const runs = [];
+  let node = walker.nextNode();
+  while (node) {
+    const parent = node.parentElement;
+    const parentTag = parent?.tagName?.toLowerCase() || 'text';
+    runs.push({
+      node,
+      label: parent === el ? `Text ${runs.length + 1}` : parentTag,
+      value: node.nodeValue || '',
+    });
+    node = walker.nextNode();
+  }
+  return runs;
+}
+
+function readTextEdit(el) {
+  if (!el) return { mode: 'none', value: '', runs: [] };
+  if (!isTextElement(el)) return { mode: 'none', value: '', runs: [] };
+
+  const runs = collectTextRuns(el);
+  if (runs.length === 0) return { mode: 'none', value: '', runs: [] };
+
+  for (const child of el.children) {
+    if (child.nodeType === 1) {
+      return { mode: 'runs', value: el.textContent || '', runs };
+    }
+  }
+  return { mode: 'plain', value: el.textContent || '', runs };
+}
+
+function toHex(color) {
+  if (!color) return '';
+  if (color.startsWith('#')) return color.length === 4
+    ? '#' + color.slice(1).split('').map((c) => c + c).join('')
+    : color.slice(0, 7);
+  const alpha = color.match(/rgba\([^)]*,\s*([0-9.]+)\s*\)/);
+  if (alpha && Number(alpha[1]) === 0) return '';
+  const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (!m) return '';
+  const hex = (n) => Number(n).toString(16).padStart(2, '0');
+  return `#${hex(m[1])}${hex(m[2])}${hex(m[3])}`;
+}
+
+function stripPx(value) {
+  return String(value || '').replace(/(-?\d+(?:\.\d+)?)px\b/g, '$1');
+}
+
+function inputValue(value) {
+  return value == null ? '' : String(value);
+}
+
+function textRows(value) {
+  const raw = String(value ?? '');
+  const lines = raw.split('\n').length;
+  const estimatedWraps = Math.ceil(raw.length / 44);
+  return Math.max(2, Math.min(5, lines + estimatedWraps - 1));
+}
+
+function readBoxValue(get, prop) {
+  return stripPx(get(prop));
+}
+
+function readCssNumber(computedStyle, prop) {
+  const value = parseFloat(computedStyle?.getPropertyValue(prop));
+  return Number.isFinite(value) ? value : null;
+}
+
+function readStyles(el) {
+  const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+  const get = (prop) => (cs ? cs.getPropertyValue(prop).trim() : '');
+  return {
+    width: stripPx(get('width')),
+    height: stripPx(get('height')),
+    minWidth: stripPx(get('min-width')),
+    minHeight: stripPx(get('min-height')),
+    left: stripPx(get('left')),
+    top: stripPx(get('top')),
+    fontFamily: get('font-family').split(',')[0]?.replace(/^["']|["']$/g, '') || '',
+    fontSize: stripPx(get('font-size')),
+    fontWeight: get('font-weight'),
+    color: toHex(get('color')),
+    backgroundColor: toHex(get('background-color')),
+    textAlign: get('text-align'),
+    lineHeight: stripPx(get('line-height')),
+    paddingTop: readBoxValue(get, 'padding-top'),
+    paddingRight: readBoxValue(get, 'padding-right'),
+    paddingBottom: readBoxValue(get, 'padding-bottom'),
+    paddingLeft: readBoxValue(get, 'padding-left'),
+    marginTop: readBoxValue(get, 'margin-top'),
+    marginRight: readBoxValue(get, 'margin-right'),
+    marginBottom: readBoxValue(get, 'margin-bottom'),
+    marginLeft: readBoxValue(get, 'margin-left'),
+    borderRadius: stripPx(get('border-top-left-radius')),
+    borderTopLeftRadius: readBoxValue(get, 'border-top-left-radius'),
+    borderTopRightRadius: readBoxValue(get, 'border-top-right-radius'),
+    borderBottomRightRadius: readBoxValue(get, 'border-bottom-right-radius'),
+    borderBottomLeftRadius: readBoxValue(get, 'border-bottom-left-radius'),
+    opacity: get('opacity'),
+    borderStyle: get('border-top-style'),
+    borderWidth: stripPx(get('border-top-width')),
+    borderColor: toHex(get('border-top-color')),
+  };
+}
+
+export default function EditPropertyPanel({
+  selector,
+  element,
+  onClose,
+  onChange,
+  labels = DEFAULT_LABELS,
+  assetTools = null,
+}) {
+  const ui = { ...DEFAULT_LABELS, ...labels };
+  const [styles, setStyles] = useState(() => readStyles(element));
+  const [textEdit, setTextEdit] = useState(() => readTextEdit(element));
+
+  useEffect(() => {
+    setStyles(readStyles(element));
+    setTextEdit(readTextEdit(element));
+  }, [element]);
+
+  const apply = (key, value) => {
+    const input = normalizeEditPanelInputValue(key, value);
+    setStyles((prev) => ({ ...prev, [key]: input }));
+    const cssValue = normalizeStyleValue(key, input);
+    if (['width', 'height', 'minWidth', 'minHeight'].includes(key)) {
+      const display = element.ownerDocument.defaultView?.getComputedStyle(element).display;
+      if (display === 'inline') element.style.display = 'inline-block';
+    }
+    if (['left', 'top', 'right', 'bottom'].includes(key)) {
+      const position = element.ownerDocument.defaultView?.getComputedStyle(element).position;
+      if (position === 'static') element.style.position = 'relative';
+    }
+    if (key === 'borderStyle') element.style.borderStyle = cssValue;
+    else if (key === 'borderWidth') element.style.borderWidth = cssValue;
+    else if (key === 'borderColor') element.style.borderColor = cssValue;
+    else if (key === 'borderRadius') element.style.borderRadius = cssValue;
+    else element.style[key] = cssValue;
+    onChange?.();
+  };
+
+  const applyText = (value) => {
+    element.textContent = value;
+    setTextEdit(readTextEdit(element));
+    onChange?.();
+  };
+
+  const applyTextRun = (index, value) => {
+    const run = textEdit.runs[index];
+    if (!run?.node) return;
+    run.node.nodeValue = value;
+    setTextEdit(readTextEdit(element));
+    onChange?.();
+  };
+
+  const addTextSpan = () => {
+    if (!isTextElement(element)) return;
+    const doc = element.ownerDocument;
+    if (textEdit.mode === 'plain') {
+      const currentText = element.textContent || '';
+      element.textContent = '';
+      if (currentText) element.appendChild(doc.createTextNode(currentText));
+    }
+    if (element.childNodes.length > 0) element.appendChild(doc.createTextNode(' '));
+    const span = doc.createElement('span');
+    span.textContent = 'New span';
+    element.appendChild(span);
+    setTextEdit(readTextEdit(element));
+    onChange?.();
+  };
+
+  const styleTextRun = (index) => {
+    const run = textEdit.runs[index];
+    const parent = run?.node?.parentElement;
+    if (!parent) return;
+    parent.style.fontWeight = parent.style.fontWeight === '700' ? '' : '700';
+    setTextEdit(readTextEdit(element));
+    onChange?.();
+  };
+
+  const applyPadding = (side, value) => {
+    const key = `padding${side}`;
+    const win = element.ownerDocument.defaultView;
+    const beforeStyles = win?.getComputedStyle(element);
+    const previousPaddingPx = readCssNumber(beforeStyles, `padding-${side.toLowerCase()}`);
+    const currentWidthPx = readCssNumber(beforeStyles, 'width');
+    const currentHeightPx = readCssNumber(beforeStyles, 'height');
+    const input = normalizeEditPanelInputValue(key, value);
+    element.style[key] = normalizeStyleValue(key, input);
+    const afterStyles = win?.getComputedStyle(element);
+    const nextPaddingPx = readCssNumber(afterStyles, `padding-${side.toLowerCase()}`);
+    const expandedMetric = getExpandedBorderBoxMetric({
+      boxSizing: beforeStyles?.boxSizing,
+      side,
+      previousPaddingPx,
+      nextPaddingPx,
+      currentMetricPx: side === 'Left' || side === 'Right' ? currentWidthPx : currentHeightPx,
+    });
+    const expandedValue = expandedMetric ? String(Number(expandedMetric.value.toFixed(2))) : null;
+    if (expandedMetric && expandedValue != null) {
+      element.style[expandedMetric.dimension] = `${expandedValue}px`;
+    }
+
+    setStyles((prev) => {
+      const nextStyles = { ...prev, [key]: input };
+      if (expandedMetric && expandedValue != null) {
+        nextStyles[expandedMetric.dimension] = expandedValue;
+      }
+      return nextStyles;
+    });
+    onChange?.();
+  };
+
+  const applyMargin = (side, value) => {
+    const key = `margin${side}`;
+    const input = normalizeEditPanelInputValue(key, value);
+    setStyles((prev) => ({ ...prev, [key]: input }));
+    element.style[key] = normalizeStyleValue(key, input);
+    onChange?.();
+  };
+
+  const applyRadius = (corner, value) => {
+    const key = `border${corner}Radius`;
+    const input = normalizeEditPanelInputValue(key, value);
+    setStyles((prev) => ({ ...prev, [key]: input }));
+    element.style[key] = normalizeStyleValue(key, input);
+    onChange?.();
+  };
+
+  const hasTextControls = textEdit.mode !== 'none';
+  const opacityPercent = String(Math.round(Math.max(0, Math.min(1, Number(styles.opacity) || 1)) * 100));
+
+  return (
+    <aside className="edit-panel edit-panel--lumina">
+      <div className="ppt-lumina-panel-actions">
+        <span>{selector || element.tagName.toLowerCase()}</span>
+        <button type="button" onClick={onClose} aria-label={ui.closeEditPanel}>
+          <span aria-hidden="true">x</span>
+        </button>
+      </div>
+
+      {assetTools && (
+        <ImageAssetSection element={element} ui={ui} assetTools={assetTools} onChange={onChange} />
+      )}
+
+      {hasTextControls && (
+        <section className="ppt-lumina-section">
+          <div className="ppt-lumina-section__head">
+            <h3>Content</h3>
+          </div>
+          {textEdit.mode === 'plain' ? (
+            <textarea
+              className="ppt-lumina-textarea"
+              value={inputValue(textEdit.value)}
+              rows={textRows(textEdit.value)}
+              onChange={(e) => applyText(e.target.value)}
+              spellCheck={false}
+            />
+          ) : (
+            <div className="ppt-lumina-nested">
+              <h4>Multiple text runs</h4>
+              {textEdit.runs.map((run, index) => (
+                <div className="ppt-lumina-run" key={`${run.label}-${index}`}>
+                  <textarea
+                    value={inputValue(run.value)}
+                    rows={textRows(run.value)}
+                    onChange={(e) => applyTextRun(index, e.target.value)}
+                    spellCheck={false}
+                  />
+                  <button type="button" onClick={() => styleTextRun(index)}>Edit Styling</button>
+                </div>
+              ))}
+            </div>
+          )}
+          <button type="button" className="ppt-lumina-add" onClick={addTextSpan}>
+            + Add Span
+          </button>
+        </section>
+      )}
+
+      <section className="ppt-lumina-section">
+        <div className="ppt-lumina-section__head">
+          <h3>Layout &amp; Position</h3>
+        </div>
+        <div className="ppt-lumina-metrics">
+          <LuminaMetric label={ui.xShort} value={styles.left} onChange={(value) => apply('left', value)} placeholder="auto" />
+          <LuminaMetric label={ui.yShort} value={styles.top} onChange={(value) => apply('top', value)} placeholder="auto" />
+          <LuminaMetric label={ui.widthShort} value={styles.width} onChange={(value) => apply('width', value)} placeholder="auto" />
+          <LuminaMetric label={ui.heightShort} value={styles.height} onChange={(value) => apply('height', value)} placeholder="auto" />
+          <LuminaMetric label={ui.minWidth} value={styles.minWidth} onChange={(value) => apply('minWidth', value)} placeholder="0" />
+          <LuminaMetric label={ui.minHeight} value={styles.minHeight} onChange={(value) => apply('minHeight', value)} placeholder="0" />
+        </div>
+      </section>
+
+      <section className="ppt-lumina-section">
+        <div className="ppt-lumina-section__head">
+          <h3>Typography</h3>
+        </div>
+        <label className="ppt-lumina-select">
+          <span>Font Family</span>
+          <input
+            type="text"
+            value={inputValue(styles.fontFamily)}
+            onChange={(e) => apply('fontFamily', e.target.value)}
+            placeholder="Inter"
+          />
+        </label>
+        <div className="ppt-lumina-triple">
+          <label className="ppt-lumina-field">
+            <span>{ui.size}</span>
+            <input
+              type="text"
+              value={inputValue(styles.fontSize)}
+              onChange={(e) => apply('fontSize', e.target.value)}
+              placeholder="16"
+            />
+          </label>
+          <label className="ppt-lumina-field">
+            <span>{ui.weight}</span>
+            <select
+              value={inputValue(styles.fontWeight)}
+              onChange={(e) => apply('fontWeight', e.target.value)}
+            >
+              {['100', '200', '300', '400', '500', '600', '700', '800', '900'].map((w) => (
+                <option key={w} value={w}>{w}</option>
+              ))}
+            </select>
+          </label>
+          <label className="ppt-lumina-field">
+            <span>Line</span>
+            <input
+              type="text"
+              value={inputValue(styles.lineHeight)}
+              onChange={(e) => apply('lineHeight', e.target.value)}
+              placeholder="1.5 / 48"
+            />
+          </label>
+        </div>
+        <label className="ppt-lumina-color">
+          <input
+            className="ppt-lumina-color__picker"
+            type="color"
+            value={styles.color || '#000000'}
+            onChange={(e) => apply('color', e.target.value)}
+          />
+          <input
+            type="text"
+            value={inputValue(styles.color)}
+            onChange={(e) => apply('color', e.target.value)}
+            placeholder="#000000"
+          />
+        </label>
+        <LuminaAlign value={styles.textAlign} onChange={(value) => apply('textAlign', value)} />
+      </section>
+
+      <section className="ppt-lumina-section">
+        <div className="ppt-lumina-section__head">
+          <h3>Appearance</h3>
+        </div>
+        <label className="ppt-lumina-color">
+          <input
+            className="ppt-lumina-color__picker"
+            type="color"
+            value={styles.backgroundColor || '#ffffff'}
+            onChange={(e) => apply('backgroundColor', e.target.value)}
+          />
+          <input
+            type="text"
+            value={inputValue(styles.backgroundColor)}
+            onChange={(e) => apply('backgroundColor', e.target.value)}
+            placeholder="#ffffff"
+          />
+          <span>Fill</span>
+        </label>
+        <div className="ppt-lumina-opacity">
+          <label className="ppt-lumina-row-field">
+            <span>{ui.opacity}</span>
+            <input
+              type="text"
+              value={opacityPercent}
+              onChange={(e) => apply('opacity', String((Number(e.target.value) || 0) / 100))}
+              placeholder="100"
+            />
+          </label>
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            value={String(Math.max(0, Math.min(1, Number(styles.opacity) || 1)))}
+            onChange={(e) => apply('opacity', e.target.value)}
+          />
+        </div>
+      </section>
+
+      <section className="ppt-lumina-section">
+        <div className="ppt-lumina-section__head">
+          <h3>Border</h3>
+        </div>
+        <div className="ppt-lumina-border-grid">
+          <label>
+            <span>{ui.style}</span>
+            <select value={inputValue(styles.borderStyle)} onChange={(e) => apply('borderStyle', e.target.value)}>
+              {['none', 'solid', 'dashed', 'dotted'].map((style) => (
+                <option key={style} value={style}>{style}</option>
+              ))}
+            </select>
+          </label>
+          <label>
+            <span>W</span>
+            <input value={inputValue(styles.borderWidth)} onChange={(e) => apply('borderWidth', e.target.value)} placeholder="1" />
+          </label>
+          <label>
+            <input
+              className="ppt-lumina-color__picker"
+              type="color"
+              value={styles.borderColor || '#000000'}
+              onChange={(e) => apply('borderColor', e.target.value)}
+            />
+            <input value={inputValue(styles.borderColor)} onChange={(e) => apply('borderColor', e.target.value)} placeholder="#000000" />
+          </label>
+        </div>
+      </section>
+
+      <section className="ppt-lumina-section">
+        <div className="ppt-lumina-section__head">
+          <h3>Radius</h3>
+          <button type="button" onClick={() => apply('borderRadius', styles.borderTopLeftRadius || '0')}>Link</button>
+        </div>
+        <div className="ppt-lumina-radius">
+          <LuminaCorner label="TL" value={styles.borderTopLeftRadius} onChange={(value) => applyRadius('TopLeft', value)} />
+          <LuminaCorner label="TR" value={styles.borderTopRightRadius} onChange={(value) => applyRadius('TopRight', value)} />
+          <LuminaCorner label="BR" value={styles.borderBottomRightRadius} onChange={(value) => applyRadius('BottomRight', value)} />
+          <LuminaCorner label="BL" value={styles.borderBottomLeftRadius} onChange={(value) => applyRadius('BottomLeft', value)} />
+        </div>
+      </section>
+
+      <section className="ppt-lumina-section">
+        <div className="ppt-lumina-section__head">
+          <h3>Spacing</h3>
+        </div>
+        <SpacingBoxEditor
+          labels={ui}
+          values={styles}
+          onMarginChange={applyMargin}
+          onPaddingChange={applyPadding}
+        />
+      </section>
+    </aside>
+  );
+}
+
+function ImageAssetSection({ element, ui, assetTools, onChange }) {
+  const tagName = element?.tagName?.toLowerCase();
+  const isImg = tagName === 'img';
+  const isVideo = tagName === 'video';
+  const fileInputRef = useRef(null);
+  const [assets, setAssets] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const scope = assetTools?.scope === 'global' ? 'global' : 'project';
+  const enabled = Boolean(assetTools?.enabled);
+
+  const loadAssets = useCallback(async () => {
+    if (!enabled || typeof assetTools?.listAssets !== 'function') {
+      setAssets([]);
+      return;
+    }
+    const list = await assetTools.listAssets(scope);
+    setAssets(Array.isArray(list) ? list : []);
+  }, [assetTools, enabled, scope]);
+
+  useEffect(() => {
+    loadAssets();
+  }, [loadAssets]);
+
+  const applyAssetSrc = useCallback(
+    (srcRel, kindHint) => {
+      if (!element || !srcRel) return;
+      const kind = kindHint || assetKindFromName(srcRel);
+      const preview = assetTools?.resolveAssetUrl?.(srcRel) || srcRel;
+      if (isImg && kind === 'image') {
+        element.setAttribute('src', preview);
+        element.removeAttribute('srcset');
+        onChange?.();
+        return;
+      }
+      if (isVideo && kind === 'video') {
+        element.setAttribute('src', preview);
+        element.setAttribute('controls', '');
+        onChange?.();
+      }
+    },
+    [assetTools, element, isImg, isVideo, onChange],
+  );
+
+  const applyAssetBackground = useCallback(
+    (srcRel, kindHint) => {
+      if (!element || !srcRel) return;
+      const kind = kindHint || assetKindFromName(srcRel);
+      if (kind !== 'image') return;
+      const preview = assetTools?.resolveAssetUrl?.(srcRel) || srcRel;
+      element.style.backgroundImage = `url("${preview}")`;
+      element.style.backgroundSize = element.style.backgroundSize || 'cover';
+      element.style.backgroundPosition = element.style.backgroundPosition || 'center';
+      element.style.backgroundRepeat = element.style.backgroundRepeat || 'no-repeat';
+      onChange?.();
+    },
+    [assetTools, element, onChange],
+  );
+
+  const handleFile = useCallback(
+    async (file) => {
+      if (!file || typeof assetTools?.uploadAsset !== 'function') return;
+      setBusy(true);
+      setError('');
+      try {
+        const data = await assetTools.uploadAsset(file, scope);
+        applyAssetSrc(data.src, data.kind);
+        loadAssets();
+      } catch (e) {
+        setError(e?.message || 'Upload failed');
+      } finally {
+        setBusy(false);
+      }
+    },
+    [applyAssetSrc, assetTools, loadAssets, scope],
+  );
+
+  const currentSrc = isImg || isVideo ? element.getAttribute('src') : '';
+  const currentKind = isVideo ? 'video' : 'image';
+
+  return (
+    <section className="ppt-lumina-section">
+      <div className="ppt-lumina-section__head">
+        <h3>{ui.image}</h3>
+      </div>
+      {!enabled ? (
+        <p style={{ margin: 0, fontSize: 11.5, color: '#9a9a9a' }}>{ui.assetNeedsFile}</p>
+      ) : (
+        <>
+          {(isImg || isVideo) && currentSrc ? (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 8,
+                marginBottom: 8,
+                border: '1px solid #ececec',
+                borderRadius: 8,
+                background: '#fafafa',
+                maxHeight: 120,
+                overflow: 'hidden',
+              }}
+            >
+              {currentKind === 'video' ? (
+                <video src={currentSrc} muted playsInline style={{ maxWidth: '100%', maxHeight: 104, objectFit: 'contain' }} />
+              ) : (
+                <img src={currentSrc} alt="" style={{ maxWidth: '100%', maxHeight: 104, objectFit: 'contain' }} />
+              )}
+            </div>
+          ) : null}
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
+            <span style={{ fontSize: 11, color: '#9a9a9a' }}>{ui.saveTo}</span>
+            {[
+              ['project', ui.assetScopeProject],
+              ['global', ui.assetScopeGlobal],
+            ].map(([value, label]) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => assetTools.setScope?.(value)}
+                style={{
+                  flex: 1,
+                  height: 26,
+                  fontSize: 11.5,
+                  fontWeight: 600,
+                  cursor: 'pointer',
+                  borderRadius: 6,
+                  border: '1px solid ' + (scope === value ? '#0D99FF' : '#e0e0e0'),
+                  background: scope === value ? 'rgba(13,153,255,0.12)' : '#fff',
+                  color: scope === value ? '#0D78CC' : '#666',
+                }}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          <button type="button" className="ppt-lumina-add" disabled={busy} onClick={() => fileInputRef.current?.click()}>
+            {busy ? ui.uploading : isImg ? ui.replaceImage : isVideo ? ui.replaceVideo : ui.insertImage}
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*,video/mp4,video/webm,video/quicktime,video/ogg,.m4v"
+            hidden
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              e.target.value = '';
+              handleFile(file);
+            }}
+          />
+          {error ? (
+            <p style={{ margin: '6px 0 0', fontSize: 11, color: '#d23' }}>{error}</p>
+          ) : null}
+
+          <div style={{ marginTop: 12 }}>
+            <h4 style={{ margin: '0 0 6px', fontSize: 11, fontWeight: 600, color: '#9a9a9a' }}>{ui.savedAssets}</h4>
+            {assets.length === 0 ? (
+              <p style={{ margin: 0, fontSize: 11.5, color: '#b0b0b0' }}>{ui.noSavedAssets}</p>
+            ) : (
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
+                {assets.map((asset) => {
+                  const kind = asset.kind || assetKindFromName(asset.src || asset.name);
+                  const preview = assetTools.resolveAssetUrl?.(asset.src) || '';
+                  const payload = JSON.stringify({ src: asset.src, name: asset.name, kind });
+                  return (
+                    <div key={asset.src} style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
+                      <button
+                        type="button"
+                        title={`${asset.name} - ${ui.dragAssetHint}`}
+                        draggable
+                        onDragStart={(event) => {
+                          event.dataTransfer.effectAllowed = 'copy';
+                          event.dataTransfer.setData('application/x-edit-slide-asset', payload);
+                          event.dataTransfer.setData('text/plain', asset.src);
+                        }}
+                        onClick={() => applyAssetSrc(asset.src, kind)}
+                        style={{
+                          padding: 0,
+                          aspectRatio: '1 / 1',
+                          cursor: 'grab',
+                          borderRadius: 6,
+                          border: '1px solid #e6e6e6',
+                          background: '#fafafa',
+                          overflow: 'hidden',
+                        }}
+                      >
+                        {kind === 'video' ? (
+                          <video src={preview} muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        ) : (
+                          <img src={preview} alt={asset.name} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => applyAssetBackground(asset.src, kind)}
+                        disabled={kind !== 'image'}
+                        title={kind === 'image' ? ui.applyBackground : 'Video cannot be used as a CSS background'}
+                        style={{
+                          border: '1px solid #e6e6e6',
+                          borderRadius: 5,
+                          background: '#fff',
+                          color: kind === 'image' ? '#444' : '#aaa',
+                          cursor: kind === 'image' ? 'pointer' : 'not-allowed',
+                          fontSize: 9,
+                          padding: '3px 2px',
+                          lineHeight: 1.1,
+                        }}
+                      >
+                        {ui.applyBackground}
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
+
+function LuminaMetric({ label, value, onChange, placeholder }) {
+  return (
+    <label className="ppt-lumina-metric">
+      <span>{label}</span>
+      <input
+        type="text"
+        value={inputValue(value)}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+      />
+    </label>
+  );
+}
+
+function LuminaCorner({ label, value, onChange }) {
+  return (
+    <label>
+      <span>{label}</span>
+      <input
+        type="text"
+        value={inputValue(value)}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="0"
+      />
+    </label>
+  );
+}
+
+/**
+ * Visual, draggable box-model spacing editor (DevTools/Figma style).
+ * The outer band is margin, the inner band is padding, the centre is content.
+ * Each side shows a numeric chip that you can either type into or drag to
+ * scrub the value — dragging a chip toward the centre increases that side.
+ */
+function SpacingBoxEditor({ labels, values, onMarginChange, onPaddingChange }) {
+  const marginLabel = labels.margin || 'Margin';
+  const paddingLabel = labels.padding || 'Padding';
+  const sides = [
+    { side: 'Top', label: labels.top || 'Top' },
+    { side: 'Right', label: labels.right || 'Right' },
+    { side: 'Bottom', label: labels.bottom || 'Bottom' },
+    { side: 'Left', label: labels.left || 'Left' },
+  ];
+  return (
+    <div className="cv-spacingbox" style={{ userSelect: 'none', WebkitUserSelect: 'none' }}>
+      <SpacingRegion
+        cornerLabel={marginLabel}
+        bandColor="rgba(247, 181, 99, 0.16)"
+        edgeColor="#c07d22"
+        borderColor="rgba(214, 142, 53, 0.34)"
+        prefix="margin"
+        sides={sides}
+        values={values}
+        allowNegative
+        onChange={onMarginChange}
+      >
+        <SpacingRegion
+          cornerLabel={paddingLabel}
+          bandColor="rgba(120, 190, 120, 0.18)"
+          edgeColor="#3a8f3a"
+          borderColor="rgba(60, 150, 60, 0.34)"
+          prefix="padding"
+          sides={sides}
+          values={values}
+          onChange={onPaddingChange}
+        >
+          <div
+            style={{
+              minHeight: 30,
+              minWidth: 52,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgba(120, 160, 235, 0.14)',
+              border: '1px dashed rgba(70, 110, 200, 0.32)',
+              borderRadius: 6,
+              fontSize: 9,
+              letterSpacing: '.06em',
+              textTransform: 'uppercase',
+              color: '#7f8aa6',
+              fontWeight: 600,
+            }}
+          >
+            Content
+          </div>
+        </SpacingRegion>
+      </SpacingRegion>
+    </div>
+  );
+}
+
+function SpacingRegion({
+  cornerLabel,
+  bandColor,
+  edgeColor,
+  borderColor,
+  prefix,
+  sides,
+  values,
+  onChange,
+  allowNegative = false,
+  children,
+}) {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        background: bandColor,
+        border: `1px dashed ${borderColor}`,
+        borderRadius: 9,
+        padding: '24px 34px',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          top: 3,
+          left: 7,
+          fontSize: 9,
+          letterSpacing: '.06em',
+          textTransform: 'uppercase',
+          color: edgeColor,
+          fontWeight: 600,
+          pointerEvents: 'none',
+        }}
+      >
+        {cornerLabel}
+      </span>
+      {sides.map(({ side, label }) => (
+        <ScrubEdge
+          key={side}
+          side={side}
+          ariaLabel={`${cornerLabel} ${label}`}
+          color={edgeColor}
+          value={values[`${prefix}${side}`]}
+          allowNegative={allowNegative}
+          onChange={(value) => onChange(side, value)}
+        />
+      ))}
+      {children}
+    </div>
+  );
+}
+
+const SPACING_EDGE_POS = {
+  Top: { top: 2, left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' },
+  Bottom: { bottom: 2, left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' },
+  Left: { left: 2, top: '50%', transform: 'translateY(-50%)', cursor: 'ew-resize' },
+  Right: { right: 2, top: '50%', transform: 'translateY(-50%)', cursor: 'ew-resize' },
+};
+
+/** A numeric chip sitting on one edge: type a value, or drag to scrub it. */
+function ScrubEdge({ side, value, onChange, color, ariaLabel, allowNegative }) {
+  const inputRef = useRef(null);
+  const drag = useRef(null);
+  const axis = side === 'Left' || side === 'Right' ? 'x' : 'y';
+  // Drag toward the centre grows the gap: Top/Left follow +delta, Bottom/Right invert.
+  const sign = side === 'Top' || side === 'Left' ? 1 : -1;
+
+  const handlePointerDown = (e) => {
+    if (e.button !== 0) return;
+    drag.current = {
+      origin: axis === 'x' ? e.clientX : e.clientY,
+      startVal: parseFloat(value) || 0,
+      moved: false,
+    };
+    try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
+  };
+
+  const handlePointerMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    const delta = (axis === 'x' ? e.clientX : e.clientY) - d.origin;
+    if (!d.moved && Math.abs(delta) < 3) return;
+    d.moved = true;
+    e.preventDefault();
+    let next = Math.round(d.startVal + sign * delta);
+    if (!allowNegative && next < 0) next = 0;
+    onChange(String(next));
+  };
+
+  const handlePointerUp = (e) => {
+    const d = drag.current;
+    drag.current = null;
+    try { e.currentTarget.releasePointerCapture(e.pointerId); } catch {}
+    if (d && !d.moved) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      inputMode="numeric"
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      value={inputValue(value)}
+      placeholder="0"
+      onChange={(e) => onChange(e.target.value)}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onFocus={(e) => {
+        e.target.style.background = '#fff';
+        e.target.style.boxShadow = `0 0 0 1px ${color}`;
+      }}
+      onBlur={(e) => {
+        e.target.style.background = 'transparent';
+        e.target.style.boxShadow = 'none';
+      }}
+      style={{
+        position: 'absolute',
+        width: 34,
+        textAlign: 'center',
+        border: 'none',
+        background: 'transparent',
+        color,
+        fontSize: 11,
+        fontWeight: 600,
+        fontVariantNumeric: 'tabular-nums',
+        padding: '2px 0',
+        borderRadius: 5,
+        outline: 'none',
+        touchAction: 'none',
+        ...SPACING_EDGE_POS[side],
+      }}
+    />
+  );
+}
+
+function LuminaAlign({ value, onChange }) {
+  const current = inputValue(value);
+  const normalizedCurrent = current === 'left' ? 'start' : current;
+  const options = [
+    ['start', 'Left', AlignLeft],
+    ['center', 'Center', AlignCenter],
+    ['right', 'Right', AlignRight],
+    ['justify', 'Justify', AlignJustify],
+  ];
+  return (
+    <div className="ppt-lumina-align" role="group" aria-label="Alignment">
+      {options.map(([optionValue, label, Icon]) => (
+        <button
+          key={optionValue}
+          type="button"
+          className={normalizedCurrent === optionValue ? 'is-active' : ''}
+          onClick={() => onChange(optionValue)}
+          title={optionValue}
+          aria-label={label}
+          aria-pressed={normalizedCurrent === optionValue}
+        >
+          <Icon aria-hidden="true" size={15} strokeWidth={2.2} />
+        </button>
+      ))}
+    </div>
+  );
+}