@bycrux/editor 0.4.2 → 0.4.4

package/package.json

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

package/src/carousel/CarouselEditor.tsx

@@ -84,7 +84,7 @@ function SlideGrid({
             onDrop={() => handleDrop(idx)}
             onDragEnd={handleDragEnd}
             onClick={() => onSelect(slide.id)}
-            className={`group relative cursor-pointer rounded overflow-hidden border transition-colors ${
+            className={`group relative flex-shrink-0 cursor-pointer rounded overflow-hidden border transition-colors ${
               selectedSlideId === slide.id
                 ? 'border-[var(--editor-accent)]'
                 : dragOverIdx === idx
@@ -357,16 +357,18 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
     obs.observe(el)
     return () => obs.disconnect()
   }, [])
-  const PADDING = 48
-  const HINT_RESERVE = 36
+  const PADDING = 32
+  const HINT_RESERVE = 28
   const availW = Math.max(0, canvasContainerSize.w - PADDING)
   const availH = Math.max(0, canvasContainerSize.h - PADDING - HINT_RESERVE)
   const canvasScale = Math.min(availW / w, availH / h, 1)
 
   return (
-    <div ref={containerRef} className="flex flex-col h-full overflow-hidden bg-[var(--editor-bg)]">
-      {/* TOP: slide rail + canvas, fills remaining height */}
-      <div className="flex flex-1 min-h-0 overflow-hidden">
+    <div ref={containerRef} className="flex flex-col h-full overflow-y-auto bg-[var(--editor-bg)]">
+      {/* TOP: slide rail | canvas | editing panel (right). Given a generous
+          viewport-relative height so the slide renders large; the project-media
+          region flows beneath and the whole editor scrolls vertically. */}
+      <div className="flex flex-shrink-0 min-h-[62vh] overflow-hidden">
       <SlideGrid
         project={project}
         slides={slides}
@@ -380,7 +382,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
         compileOverlay={(t) => adapter.compileOverlay(t)}
       />
 
-      <div ref={canvasContainerRef} className="relative flex-1 flex flex-col items-center justify-center gap-4 overflow-hidden p-6">
+      <div ref={canvasContainerRef} className="relative flex-1 flex flex-col items-center justify-center gap-4 overflow-hidden p-4">
         <button
           onClick={handleRefresh}
           disabled={refreshing}
@@ -491,52 +493,50 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           </div>
         )}
         </div>
-      </div>
 
-      {/* BELOW: the panels, full width under the canvas. Bounded height with
-          internal scrolling so it never crushes the canvas above. */}
-      <div className="flex-shrink-0 border-t border-[var(--editor-border)] bg-[var(--editor-bg)] overflow-hidden flex flex-col" style={{ maxHeight: '40%' }}>
-        {selectedSlide && project.status !== 'pending' && (
-          <div className="px-4 py-2 border-b border-[var(--editor-border)] bg-[var(--editor-bg)]">
-            <AddElementMenu
-              project={project}
-              selectedSlideId={selectedSlideId}
-              adapter={adapter}
-              onAddElement={handleAddElement}
-            />
-          </div>
-        )}
-        <div className="flex flex-1 min-h-0 overflow-hidden">
-          <div className="w-80 flex-shrink-0 overflow-y-auto border-r border-[var(--editor-border)]">
-            <SlidePropertyPanel
-              project={project}
-              slide={selectedSlide}
-              element={selectedElement}
-              adapter={adapter}
-              onSlideChange={handleSlideChange}
-              onElementChange={handlePanelElementChange}
-              onDeleteSlide={handleDeleteSlide}
-              onDuplicateSlide={handleDuplicateSlide}
-              onDeleteElement={handleDeleteElement}
-              onDuplicateElement={handleDuplicateElement}
-              onReorderElement={handleReorderElement}
-              onEnterCrop={(_slideId, elementId) => { setSelectedElementId(elementId); setCropElementId(elementId) }}
-              updateOverlayProp={state.updateOverlayProp}
-              hiddenElementIds={hiddenElementIds}
-              onToggleElementVisibility={onToggleElementVisibility}
-            />
-          </div>
-          {slots?.assetsPanel && (
-            // Below the canvas the assets slot fills the remaining width (no longer
-            // capped to a 320px sidebar) and scrolls vertically within the bounded
-            // below-canvas region.
-            <div className="flex-1 min-w-0 flex flex-col overflow-y-auto overflow-x-hidden">
-              {slots.assetsPanel}
+        {/* RIGHT: the slide editor (add-element toolbar + property panel),
+            beside the canvas with its own vertical scroll. */}
+        <div className="w-[24rem] flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto bg-[var(--editor-bg)]">
+          {selectedSlide && project.status !== 'pending' && (
+            <div className="px-4 py-2 border-b border-[var(--editor-border)]">
+              <AddElementMenu
+                project={project}
+                selectedSlideId={selectedSlideId}
+                adapter={adapter}
+                onAddElement={handleAddElement}
+              />
             </div>
           )}
+          <SlidePropertyPanel
+            project={project}
+            slide={selectedSlide}
+            element={selectedElement}
+            adapter={adapter}
+            onSlideChange={handleSlideChange}
+            onElementChange={handlePanelElementChange}
+            onDeleteSlide={handleDeleteSlide}
+            onDuplicateSlide={handleDuplicateSlide}
+            onDeleteElement={handleDeleteElement}
+            onDuplicateElement={handleDuplicateElement}
+            onReorderElement={handleReorderElement}
+            onEnterCrop={(_slideId, elementId) => { setSelectedElementId(elementId); setCropElementId(elementId) }}
+            updateOverlayProp={state.updateOverlayProp}
+            hiddenElementIds={hiddenElementIds}
+            onToggleElementVisibility={onToggleElementVisibility}
+            // Fills the right column (drop the default w-80 width + left border).
+            className="w-full border-l-0"
+          />
         </div>
       </div>
 
+      {/* BELOW: Project media, full width at the bottom. Flows beneath the top
+          region and scrolls with the page (the root is overflow-y-auto). */}
+      {slots?.assetsPanel && (
+        <div className="flex-shrink-0 border-t border-[var(--editor-border)] w-full flex flex-col">
+          {slots.assetsPanel}
+        </div>
+      )}
+
       {renderOpen && (
         <CarouselRenderModal
           projectId={project.id}

package/src/carousel/SlidePropertyPanel.tsx

@@ -9,7 +9,7 @@ import type {
   GlobalOverlayProp,
   EditorAdapter,
 } from '../types'
-import { Button } from '../ui'
+import { Button, cn } from '../ui'
 import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
 
 function parseNumber(v: string): number | null {
@@ -39,6 +39,10 @@ interface Props {
   // selected element; `hiddenElementIds` reflects the current hidden set.
   hiddenElementIds?: string[]
   onToggleElementVisibility?: (elementId: string) => void
+  // Override the panel's root container classes. Hosts that stack the panel
+  // full-width (e.g. below the canvas) pass this to drop the default `w-80`
+  // sidebar constraint.
+  className?: string
 }
 
 // Small eye toggle to hide/show the selected element in the editor preview only
@@ -179,6 +183,7 @@ export default function SlidePropertyPanel({
   adapter,
   hiddenElementIds,
   onToggleElementVisibility,
+  className,
 }: Props) {
   // Map of jsxPath → GlobalOverlay for overlay prop schemas
   const [overlaySchemas, setOverlaySchemas] = useState<Map<string, GlobalOverlay>>(new Map())
@@ -206,7 +211,7 @@ export default function SlidePropertyPanel({
 
   if (!slide) {
     return (
-      <div className="w-80 flex-shrink-0 flex items-center justify-center text-[var(--editor-text)]/40 text-xs p-4">
+      <div className={cn('w-80 flex-shrink-0 flex items-center justify-center text-[var(--editor-text)]/40 text-xs p-4', className)}>
         Select a slide
       </div>
     )
@@ -216,7 +221,7 @@ export default function SlidePropertyPanel({
   const overlaySchema = overlayEl ? overlaySchemas.get(overlayEl.overlay.template) : null
 
   return (
-    <div className="w-80 flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto bg-[var(--editor-bg)]">
+    <div className={cn('w-80 flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto bg-[var(--editor-bg)]', className)}>
       {/* Slide header */}
       <div className="px-4 py-3 border-b border-[var(--editor-border)]">
         <div className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider mb-2">Slide</div>

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

@@ -97,11 +97,11 @@ describe('CarouselEditor — editor-core integration', () => {
       />,
     )
     await waitFor(() => getByTestId('assets'))
-    // The assets slot now lives in the below-canvas region and fills the remaining
-    // width (flex-1) rather than being capped to a 320px sidebar — so a wide host
-    // panel uses its full share of the row without crushing the canvas above.
+    // The assets slot lives in the below-canvas region, full-width at the very
+    // bottom (no longer capped to a 320px sidebar) so the host panel spans the
+    // editor width beneath the top canvas/editing region.
     const wrapper = getByTestId('assets').parentElement
-    expect(wrapper?.className).toContain('flex-1')
+    expect(wrapper?.className).toContain('w-full')
     expect(wrapper?.className).not.toContain('w-80')
   })
 

package/src/ui/button.tsx

@@ -7,10 +7,10 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:   'bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90',
-        secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)] dark:hover:opacity-90',
-        ghost:     'text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-[var(--editor-text)]/60 dark:hover:bg-[var(--editor-surface)] dark:hover:text-[var(--editor-text)]',
+        secondary: 'bg-[var(--editor-surface)] text-[var(--editor-text)] border border-[var(--editor-border)] hover:border-[var(--editor-accent)]',
+        ghost:     'text-[var(--editor-text)] hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]',
         danger:    'bg-red-600 text-white hover:bg-red-700',
-        outline:   'border border-gray-300 dark:border-[var(--editor-border)] text-gray-700 dark:text-[var(--editor-text)] hover:bg-gray-100 dark:hover:bg-[var(--editor-surface)]',
+        outline:   'bg-[var(--editor-surface)] text-[var(--editor-text)] border border-[var(--editor-border)] hover:border-[var(--editor-accent)]',
       },
       size: {
         default: 'h-9 px-4 py-2',