@bycrux/editor 0.4.7 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.4.7",
+  "version": "0.5.1",
   "private": false,
   "type": "module",
   "exports": {

package/src/carousel/CarouselEditor.tsx

@@ -197,6 +197,24 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
     return () => window.removeEventListener('keydown', onKey)
   }, [state])
 
+  // ── Keyboard shortcut: Delete / Backspace removes the selected element. ──
+  // Guarded against text inputs (so editing an overlay's text or a panel field
+  // never deletes the element) and against crop mode (Backspace there belongs to
+  // the crop UI). Deleting mutates project state, so the canvas + thumbnails
+  // re-render without the element immediately.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (isTypingTarget(e.target)) return
+      if (e.key !== 'Delete' && e.key !== 'Backspace') return
+      if (!selectedSlideId || !selectedElementId || cropElementId) return
+      e.preventDefault()
+      void state.removeElement(selectedSlideId, selectedElementId)
+      setSelectedElementId(null)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [state, selectedSlideId, selectedElementId, cropElementId])
+
   async function handleRender() {
     setRendering(true)
     try {

package/src/carousel/SlideCanvas.tsx

@@ -439,7 +439,12 @@ export default function SlideCanvas({
                 <img
                   src={resolveSrc(element)}
                   draggable={false}
-                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                  // Uncropped images use `contain` to mirror the renderer
+                  // (render/templates/slide.jsx: no-crop branch → objectFit
+                  // 'contain'). Logos/escudos placed in a fixed box must keep
+                  // their aspect (letterboxed) in BOTH paths; `cover` here would
+                  // crop them in the preview and diverge from the final PNG.
+                  style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
                   alt=""
                 />
               )

package/src/carousel/__tests__/CarouselEditor.test.tsx

@@ -290,4 +290,43 @@ describe('CarouselEditor — editor-core integration', () => {
       expect(lastSelection()).toBeNull()
     })
   })
+
+  // Delete / Backspace removes the selected element and persists the removal.
+  it('deletes the selected element on Delete keypress', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    render(<CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />)
+
+    const wrapper = await waitFor(() => findInteractiveWrapper('el-img'))
+    await act(async () => { fireEvent.click(wrapper) })
+
+    await act(async () => { fireEvent.keyDown(window, { key: 'Delete' }) })
+
+    // The removal is persisted: the latest saved project has no elements.
+    await waitFor(() => {
+      expect(adapter.saveCalls.length).toBeGreaterThan(0)
+      const saved = adapter.saveCalls[adapter.saveCalls.length - 1].project
+      expect(saved.slides![0].elements.find(e => e.id === 'el-img')).toBeUndefined()
+    })
+  })
+
+  // Guard: Delete/Backspace must not delete while typing (e.g. editing text or a
+  // panel field), or Backspace in a field would wipe the element.
+  it('does not delete the selected element while typing in an input', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    render(<CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />)
+
+    const wrapper = await waitFor(() => findInteractiveWrapper('el-img'))
+    await act(async () => { fireEvent.click(wrapper) })
+
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    input.focus()
+
+    const before = adapter.saveCalls.length
+    await act(async () => { fireEvent.keyDown(input, { key: 'Backspace' }) })
+    expect(adapter.saveCalls.length).toBe(before)
+    document.body.removeChild(input)
+  })
 })

package/src/carousel/__tests__/SlideCanvasCrop.test.tsx

@@ -61,7 +61,7 @@ describe('SlideCanvas crop display', () => {
     expect(wrapper.style.overflow).toBe('hidden')
   })
 
-  it('renders plain cover (no crop wrapper) when element.crop is absent', async () => {
+  it('renders plain contain (no crop wrapper) when element.crop is absent', async () => {
     const el: ImageElement = {
       id: 'el-img',
       type: 'image',
@@ -88,7 +88,9 @@ describe('SlideCanvas crop display', () => {
       if (!found) throw new Error('img not rendered')
       return found
     })
-    expect(img.style.objectFit).toBe('cover')
+    // Uncropped images use `contain` to mirror the renderer (no-crop branch in
+    // render/templates/slide.jsx) so logos/escudos keep aspect in both paths.
+    expect(img.style.objectFit).toBe('contain')
     expect(img.style.width).toBe('100%')
     expect(img.style.height).toBe('100%')
   })

package/src/video/VideoEditor.tsx

@@ -388,7 +388,9 @@ function ReviewSurface<P extends Project>({
   }
 
   return (
-    <div className="flex flex-1 overflow-hidden">
+    <div className="flex flex-col flex-1 overflow-hidden">
+      {/* Work area — editor body + version rail, side by side */}
+      <div className="flex flex-1 overflow-hidden min-h-0">
       {/* Main: preview + timeline */}
       <div className="flex flex-col flex-1 overflow-hidden">
         <div className="flex-1 flex items-center justify-center bg-black overflow-hidden p-2">
@@ -473,8 +475,8 @@ function ReviewSurface<P extends Project>({
         </div>
       </div>
 
-      {/* Right sidebar — version history + run history slot + host-supplied assets panel */}
-      {(adapter.listVersionHistory || slots?.assetsPanel || slots?.runHistory) && (
+      {/* Right rail — version history + run history slot */}
+      {(adapter.listVersionHistory || slots?.runHistory) && (
         <div className="w-48 shrink-0 border-l border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 flex flex-col overflow-hidden">
           {adapter.listVersionHistory && (
             <VersionPanel versions={versions} restoring={restoring} onRestore={handleRestoreVersion} />
@@ -483,7 +485,16 @@ function ReviewSurface<P extends Project>({
               RunSnapshot / project.history are host-only types — the package never
               reads them. When absent nothing is rendered. */}
           {slots?.runHistory}
-          {slots?.assetsPanel}
+        </div>
+      )}
+      </div>
+
+      {/* Project media / assets — full-width region stacked BELOW the editor,
+          mirroring CarouselEditor's layout (was previously crammed into the
+          narrow right rail). The host's panel manages its own scroll. */}
+      {slots?.assetsPanel && (
+        <div className="shrink-0 border-t border-gray-200 dark:border-gray-800 w-full flex flex-col max-h-[45%] overflow-hidden">
+          {slots.assetsPanel}
         </div>
       )}