@devbycrux/editor 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devbycrux/editor",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "exports": {

package/src/carousel/CarouselEditor.tsx

@@ -151,7 +151,7 @@ function isTypingTarget(t: EventTarget | null): boolean {
 
 // ── CarouselEditor ────────────────────────────────────────────────────────────
 
-export default function CarouselEditor<P extends Project = Project>({ project: initialProject, adapter, onProjectChange, theme, slots }: Props<P>) {
+export default function CarouselEditor<P extends Project = Project>({ project: initialProject, adapter, onProjectChange, theme, slots, hiddenElementIds, onToggleElementVisibility, onSelectionChange }: Props<P>) {
   const state = useProjectState(adapter, initialProject.id, initialProject)
   const project = state.project
   const slides = project.slides ?? []
@@ -339,6 +339,12 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
   const selectedSlide = slides.find(s => s.id === selectedSlideId)
   const selectedElement = selectedSlide?.elements.find(el => el.id === selectedElementId)
 
+  // Notify the host of selection changes so it can drive selection-aware chrome
+  // (e.g. a regen action in a toolbar slot). Fires with the element or null.
+  useEffect(() => {
+    onSelectionChange?.(selectedElement ?? null)
+  }, [selectedElement, onSelectionChange])
+
   const [w, h] = project.settings.resolution
   const canvasContainerRef = useRef<HTMLDivElement>(null)
   const [canvasContainerSize, setCanvasContainerSize] = useState<{ w: number; h: number }>({ w: 600, h: 700 })
@@ -387,21 +393,24 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           <span className="text-xs font-medium">Refresh</span>
         </button>
 
-        <button
-          onClick={handleRender}
-          disabled={rendering || project.status === 'pending' || slides.length === 0}
-          className="absolute top-3 right-3 z-30 flex items-center gap-2 px-3 py-2 rounded-md border border-blue-500/50 bg-blue-600/80 text-white hover:bg-blue-600 hover:border-blue-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          title={
-            project.status === 'pending'
-              ? 'Wait for the agent to finish before rendering'
-              : slides.length === 0
-              ? 'Add slides before rendering'
-              : 'Render all slides as PNGs'
-          }
-        >
-          <Download size={18} />
-          <span className="text-xs font-medium">{rendering ? 'Starting…' : 'Render'}</span>
-        </button>
+        <div className="absolute top-3 right-3 z-30 flex items-center gap-2">
+          {slots?.toolbarActions}
+          <button
+            onClick={handleRender}
+            disabled={rendering || project.status === 'pending' || slides.length === 0}
+            className="flex items-center gap-2 px-3 py-2 rounded-md border border-blue-500/50 bg-blue-600/80 text-white hover:bg-blue-600 hover:border-blue-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            title={
+              project.status === 'pending'
+                ? 'Wait for the agent to finish before rendering'
+                : slides.length === 0
+                ? 'Add slides before rendering'
+                : 'Render all slides as PNGs'
+            }
+          >
+            <Download size={18} />
+            <span className="text-xs font-medium">{rendering ? 'Starting…' : 'Render'}</span>
+          </button>
+        </div>
 
         {project.status === 'pending' ? (
           <div className="flex flex-col items-center gap-6 text-center max-w-lg w-full">
@@ -461,6 +470,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 updateImageCrop={state.updateImageCrop}
                 cropElementId={cropElementId}
                 onExitCrop={() => setCropElementId(null)}
+                hiddenElementIds={hiddenElementIds}
               />
             </div>
             <p className="flex-shrink-0 text-xs text-gray-500 text-center max-w-md">
@@ -505,6 +515,8 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           onReorderElement={handleReorderElement}
           onEnterCrop={(_slideId, elementId) => { setSelectedElementId(elementId); setCropElementId(elementId) }}
           updateOverlayProp={state.updateOverlayProp}
+          hiddenElementIds={hiddenElementIds}
+          onToggleElementVisibility={onToggleElementVisibility}
         />
         {slots?.assetsPanel && (
           <div className="border-t border-gray-800 flex flex-col overflow-hidden" style={{ minHeight: 180 }}>

package/src/carousel/SlideCanvas.tsx

@@ -106,6 +106,13 @@ interface Props {
   // Crop mode is owned here but the entry trigger lives in the property panel.
   cropElementId?: string | null
   onExitCrop?: () => void
+
+  /**
+   * Editor-only element ids to omit from this canvas (non-persisted). Used by
+   * the host's visibility toggle to hide a scrim/background while positioning
+   * overlays beneath it. Absent → all elements render.
+   */
+  hiddenElementIds?: string[]
 }
 
 export default function SlideCanvas({
@@ -128,9 +135,11 @@ export default function SlideCanvas({
   updateImageCrop,
   cropElementId,
   onExitCrop,
+  hiddenElementIds,
 }: Props) {
   const sid = slideId ?? slide.id
   const resolveSrc = resolveImageSrc ?? ((el: ImageElement) => resolveAssetDefault(el.src))
+  const hiddenSet = hiddenElementIds && hiddenElementIds.length ? new Set(hiddenElementIds) : null
 
   // Refs to each element wrapper so gesture previews can mutate DOM directly.
   const wrapperRefs = useRef<Map<string, HTMLDivElement>>(new Map())
@@ -295,6 +304,7 @@ export default function SlideCanvas({
 
   return (
     <div
+      data-interactive={interactive ? 'true' : undefined}
       style={{
         width: displayW,
         height: displayH,
@@ -353,6 +363,8 @@ export default function SlideCanvas({
         )}
 
         {slide.elements.map((element) => {
+          // Editor-only visibility: omit hidden elements from this canvas.
+          if (hiddenSet?.has(element.id)) return null
           const isSelected = selectedElementId === element.id
           const inCrop = cropState?.elementId === element.id
           const isRotated = (element.rotation ?? 0) !== 0

package/src/carousel/SlidePropertyPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Crop } from 'lucide-react'
+import { Crop, Eye, EyeOff } from 'lucide-react'
 import type {
   Project,
   Slide,
@@ -34,6 +34,37 @@ interface Props {
   updateOverlayProp?: (slideId: string, elementId: string, key: string, value: string) => Promise<void>
   // Adapter supplies overlay-schema listing (global + profile-scoped).
   adapter: EditorAdapter<Project>
+  // Editor-only element visibility (host-owned, non-persisted). When
+  // `onToggleElementVisibility` is supplied, an eye toggle is shown for the
+  // selected element; `hiddenElementIds` reflects the current hidden set.
+  hiddenElementIds?: string[]
+  onToggleElementVisibility?: (elementId: string) => void
+}
+
+// Small eye toggle to hide/show the selected element in the editor preview only
+// (never persisted). Absent host callback → not rendered.
+function HideToggle({
+  elementId,
+  isHidden,
+  onToggle,
+}: {
+  elementId: string
+  isHidden: boolean
+  onToggle?: (elementId: string) => void
+}) {
+  if (!onToggle) return null
+  return (
+    <button
+      type="button"
+      onClick={e => { e.stopPropagation(); onToggle(elementId) }}
+      title={isHidden ? 'Show in editor' : 'Hide from editor'}
+      aria-label={isHidden ? 'Show in editor' : 'Hide from editor'}
+      aria-pressed={isHidden}
+      className="text-gray-500 hover:text-white px-1"
+    >
+      {isHidden ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+    </button>
+  )
 }
 
 function numInput(
@@ -146,6 +177,8 @@ export default function SlidePropertyPanel({
   onEnterCrop,
   updateOverlayProp,
   adapter,
+  hiddenElementIds,
+  onToggleElementVisibility,
 }: Props) {
   // Map of jsxPath → GlobalOverlay for overlay prop schemas
   const [overlaySchemas, setOverlaySchemas] = useState<Map<string, GlobalOverlay>>(new Map())
@@ -225,7 +258,12 @@ export default function SlidePropertyPanel({
             <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
               {element.type === 'image' ? 'Image' : 'Overlay'}
             </span>
-            <div className="flex gap-1">
+            <div className="flex items-center gap-1">
+              <HideToggle
+                elementId={element.id}
+                isHidden={hiddenElementIds?.includes(element.id) ?? false}
+                onToggle={onToggleElementVisibility}
+              />
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'forward')}
                 className="text-xs text-gray-500 hover:text-white px-1"

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

@@ -232,4 +232,56 @@ describe('CarouselEditor — editor-core integration', () => {
     expect(adapter.saveCalls.length).toBe(before)
     document.body.removeChild(input)
   })
+
+  // Visibility toggle: ids in `hiddenElementIds` are omitted from the interactive
+  // canvas (editor-only; the thumbnail and `saveProject` are untouched).
+  it('omits hidden elements from the interactive canvas', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject({
+      slides: [
+        {
+          id: 'slide-0',
+          base_color: '#ffffff',
+          elements: [
+            { id: 'el-a', type: 'image', src: 'a.png', x: 0, y: 0, w: 100, h: 100, rotation: 0 },
+            { id: 'el-b', type: 'image', src: 'b.png', x: 10, y: 10, w: 100, h: 100, rotation: 0 },
+          ],
+        },
+      ],
+    })
+    const { container } = render(
+      <CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} hiddenElementIds={['el-b']} />,
+    )
+    // Visible element renders in the interactive canvas; hidden one does not.
+    await waitFor(() => expect(container.querySelector('[data-interactive] [data-element-id="el-a"]')).not.toBeNull())
+    expect(container.querySelector('[data-interactive] [data-element-id="el-b"]')).toBeNull()
+  })
+
+  // onSelectionChange fires with the selected element, and with null on deselect.
+  it('fires onSelectionChange on select and deselect', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const onSelectionChange = vi.fn()
+    const { container } = render(
+      <CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} onSelectionChange={onSelectionChange} />,
+    )
+
+    const lastSelection = () => {
+      const calls = onSelectionChange.mock.calls
+      return calls[calls.length - 1]?.[0]
+    }
+
+    const wrapper = await waitFor(() => findInteractiveWrapper('el-img'))
+    await act(async () => { fireEvent.click(wrapper) })
+    await waitFor(() => {
+      expect(lastSelection()?.id).toBe('el-img')
+    })
+
+    // Click the interactive canvas background to clear selection.
+    const root = container.querySelector('[data-interactive]') as HTMLElement
+    await act(async () => { fireEvent.click(root) })
+    await waitFor(() => {
+      expect(lastSelection()).toBeNull()
+    })
+  })
 })

package/src/types.ts

@@ -406,6 +406,26 @@ export interface CarouselEditorProps<P extends Project = Project> {
   theme?: EditorTheme
   slots?: EditorSlots
   readOnly?: boolean
+  /**
+   * Editor-only set of element ids to hide from the interactive canvas. The host
+   * owns this state; the package never persists it (hidden elements are omitted
+   * from the canvas render only, never from `saveProject`). Lets a host
+   * temporarily hide a scrim/background to position overlays beneath it.
+   */
+  hiddenElementIds?: string[]
+  /**
+   * Invoked when the user toggles the selected element's editor-visibility via
+   * the property-panel eye button. The host updates its hidden-set and reflects
+   * it back through `hiddenElementIds`. Absent → no eye toggle is rendered.
+   */
+  onToggleElementVisibility?: (elementId: string) => void
+  /**
+   * Invoked whenever the selected element changes — with the element, or `null`
+   * when selection clears. Lets a host drive selection-aware chrome (e.g. a
+   * "regenerate image" action in a toolbar slot that targets the current
+   * selection). The package keeps owning selection state.
+   */
+  onSelectionChange?: (element: CarouselElement | null) => void
 }
 
 /**