{}} pageSize={pageSize} scale={1} /> {/* Click-blocker to prevent inline editing in thumb */}

); } /* ───────── Slides Panel ───────── */ function SlidesPanel({ slides, globals, activeId, setActiveId, setSlides, pageSize }) { const [showAdd, setShowAdd] = useState(false); const [dragId, setDragId] = useState(null); const [dragOver, setDragOver] = useState({ id: null, where: null }); const onDragStart = (id, e) => { setDragId(id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', id); }; const onDragOverCard = (id, e) => { e.preventDefault(); if (dragId === id) return; const rect = e.currentTarget.getBoundingClientRect(); const where = (e.clientY - rect.top) > rect.height / 2 ? 'below' : 'above'; setDragOver({ id, where }); }; const onDrop = () => { if (!dragId || !dragOver.id || dragId === dragOver.id) { setDragId(null); setDragOver({ id: null, where: null }); return; } const next = [...slides]; const fromIdx = next.findIndex(s => s.id === dragId); const moved = next.splice(fromIdx, 1)[0]; let toIdx = next.findIndex(s => s.id === dragOver.id); if (dragOver.where === 'below') toIdx += 1; next.splice(toIdx, 0, moved); setSlides(next); setDragId(null); setDragOver({ id: null, where: null }); }; const duplicate = (s) => { const idx = slides.findIndex(x => x.id === s.id); const copy = { ...s, id: uid(), data: JSON.parse(JSON.stringify(s.data)) }; const next = [...slides]; next.splice(idx + 1, 0, copy); setSlides(next); setActiveId(copy.id); }; const remove = (s) => { if (slides.length <= 1) return; const idx = slides.findIndex(x => x.id === s.id); const next = slides.filter(x => x.id !== s.id); setSlides(next); if (activeId === s.id) { setActiveId(next[Math.min(idx, next.length - 1)].id); } }; return (

Slides

{slides.length}

{slides.map((s, i) => { const tpl = TEMPLATES[s.template]; const isActive = s.id === activeId; const isDragging = dragId === s.id; const isDropAbove = dragOver.id === s.id && dragOver.where === 'above'; const isDropBelow = dragOver.id === s.id && dragOver.where === 'below'; return (

setActiveId(s.id)} onDragStart={(e) => onDragStart(s.id, e)} onDragOver={(e) => onDragOverCard(s.id, e)} onDragEnd={() => { setDragId(null); setDragOver({ id: null, where: null }); }} onDrop={onDrop} >

{String(i + 1).padStart(2, '0')}

{tpl.name}

); })}

{showAdd && ( <>

setShowAdd(false)} />

Plantillas

{TEMPLATE_LIST.map(tpl => ( ))}

)}

); } /* ───────── Inspector (right panel) ───────── */ function Inspector({ slide, globals, setGlobals, onUpdateSlide }) { const [tab, setTab] = useState('slide'); // 'slide' | 'project' if (!slide) { return ( ); } const tpl = TEMPLATES[slide.template]; const update = (patch) => onUpdateSlide({ ...slide, data: { ...slide.data, ...patch } }); return ( ); } function SlideInspector({ slide, tpl, update }) { const d = slide.data; return ( <>

Plantilla

{tpl.name} {tpl.desc}

{tpl.id === 'cover' && <> update({ sectionLabel: v })} /> update({ itemTitle: v })} /> update({ assetMontaje: v })} label="Render de portada" /> } {tpl.id === 'montaje' && <> update({ label: v })} /> update({ assetMontaje: v })} label="Render de montaje" /> } {tpl.id === 'descriptivo' && <> update({ sectionLabel: v })} /> update({ itemTitle: v })} /> update({ descripcion: v })} multiline />

update({ cotaAncho: v })} compact /> update({ cotaAlto: v })} compact />

update({ assetVector: v })} label="Vector flat" /> update({ assetRender: v })} label="Render aislado" /> } {tpl.id === 'explosivo' && <> update({ sectionLabel: v })} /> update({ itemTitle: v })} /> update({ assetExplosivo: v })} label="Render explosivo" /> {d.annotations.map((a, i) => (

{ const next = [...d.annotations]; next[i] = { ...a, num: e.target.value }; update({ annotations: next }); }} style={{ width: 50, fontSize: 12, padding: '6px 8px', border: '1px solid var(--border-default)', borderRadius: 6, outline: 0, fontVariantNumeric: 'tabular-nums', textAlign: 'center', }} /> { const next = [...d.annotations]; next[i] = { ...a, label: e.target.value }; update({ annotations: next }); }} style={{ flex: 1, fontSize: 12, padding: '6px 8px', border: '1px solid var(--border-default)', borderRadius: 6, outline: 0, }} />

))}

Tras agregarlo, haz clic en la imagen para colocarlo. Puedes arrastrarlo para reposicionarlo.

} {tpl.id === 'planos' && <> update({ sectionLabel: v })} /> update({ itemTitle: v })} /> update({ assetPlano: v })} label="Plano técnico" /> {d.cotas.map((c, i) => (

{ const next = [...d.cotas]; next[i] = { ...c, label: e.target.value }; update({ cotas: next }); }} style={{ flex: 1, fontSize: 12, padding: '6px 8px', border: '1px solid var(--border-default)', borderRadius: 6, outline: 0, }} /> { const next = [...d.cotas]; next[i] = { ...c, value: e.target.value }; update({ cotas: next }); }} style={{ width: 80, fontSize: 12, padding: '6px 8px', border: '1px solid var(--border-default)', borderRadius: 6, outline: 0, fontVariantNumeric: 'tabular-nums', }} />

))} } {tpl.id === 'materiales' && <> update({ sectionLabel: v })} /> update({ itemTitle: v })} /> {d.materiales.map((m, i) => (

Material {i + 1}

{ const next = [...d.materiales]; next[i] = { ...m, tipo: v }; update({ materiales: next }); }} /> { const next = [...d.materiales]; next[i] = { ...m, material: v }; update({ materiales: next }); }} /> { const next = [...d.materiales]; next[i] = { ...m, acabado: v }; update({ materiales: next }); }} />

{ const next = [...d.materiales]; next[i] = { ...m, showPantone: e.target.checked }; update({ materiales: next }); }} style={{ margin: 0 }} /> Pantone { const next = [...d.materiales]; next[i] = { ...m, pantone: e.target.value }; update({ materiales: next }); }} style={{ flex: 1, fontSize: 12, padding: '6px 8px', border: '1px solid var(--border-default)', borderRadius: 6, outline: 0, opacity: m.showPantone === false ? 0.4 : 1, }} />

))} }

También puedes editar texto haciendo clic directamente sobre el lienzo.

); } function ProjectInspector({ globals, setGlobals }) { const fileRef = useRef(null); const handleLogo = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = (e) => setGlobals({ ...globals, logoData: e.target.result }); reader.readAsDataURL(file); }; return ( <>

Datos del proyecto

setGlobals({ ...globals, title: v })} /> setGlobals({ ...globals, suffix: v })} placeholder="BP, BV, etc." /> setGlobals({ ...globals, property: v })} /> setGlobals({ ...globals, dept: v })} /> setGlobals({ ...globals, corp: v })} />

Logotipo del proyecto

{globals.logoData ? (

) : (

fileRef.current?.click()}> Subir logotipo PNG / SVG · aparece en cabecera handleLogo(e.target.files[0])} />

)}

Estos datos aparecen automáticamente en el header y footer de todas las slides.

); } function FieldGroup({ title, children }) { return (

{title}

{children}

); } function Field({ label, value, onChange, multiline, placeholder, compact }) { return (

{label} {multiline ? (

onChange(e.target.value)} placeholder={placeholder} rows={4}/>
      ) : (
        <input value={value || ''} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}/>
      )}
    </div>
  );
}
function CompactField({ label, value, onChange }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ fontSize: 10.5, color: 'var(--fg-weak)', minWidth: 64 }}>{label}</span>
      <input
        value={value || ''}
        onChange={(e) => onChange(e.target.value)}
        style={{
          flex: 1, fontSize: 12, padding: '6px 8px',
          border: '1px solid var(--border-default)', borderRadius: 6, outline: 0,
        }}
      />
    </div>
  );
}
function AssetField({ value, onChange, label }) {
  const ref = useRef(null);
  const handleFile = (file) => {
    if (!file || !file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = (e) => onChange(e.target.result);
    reader.readAsDataURL(file);
  };
  return value ? (
    <div className="asset-preview" style={{ marginBottom: 10 }}>
      <img src={value} alt={label} />
      <button className="asset-preview__remove" onClick={() => onChange(null)}>×</button>
    </div>
  ) : (
    <div
      className="asset-drop"
      onClick={() => ref.current?.click()}
      onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('is-over'); }}
      onDragLeave={(e) => e.currentTarget.classList.remove('is-over')}
      onDrop={(e) => {
        e.preventDefault();
        e.currentTarget.classList.remove('is-over');
        handleFile(e.dataTransfer.files[0]);
      }}
      style={{ marginBottom: 10 }}
    >
      <i className="ti ti-cloud-upload"></i>
      <span className="asset-drop__title">{label}</span>
      <span className="asset-drop__hint">Arrastra, pega (Ctrl+V) o haz clic</span>
      <input ref={ref} type="file" accept="image/*" style={{ display: 'none' }}
        onChange={(e) => handleFile(e.target.files[0])}/>
    </div>
  );
}

window.SlideRenderer = SlideRenderer;
window.SlidesPanel = SlidesPanel;
window.Inspector = Inspector;
window.PageChrome = PageChrome;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;