@devbycrux/editor 0.1.0

package/src/carousel/SlidePropertyPanel.tsx

@@ -0,0 +1,349 @@
+import { useEffect, useState } from 'react'
+import { Crop } from 'lucide-react'
+import type {
+  Project,
+  Slide,
+  CarouselElement,
+  OverlayElement,
+  GlobalOverlay,
+  GlobalOverlayProp,
+  EditorAdapter,
+} from '../types'
+import { Button } from '../ui'
+import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
+
+function parseNumber(v: string): number | null {
+  const n = Number(v)
+  return Number.isFinite(n) ? n : null
+}
+
+interface Props {
+  project: Project
+  slide?: Slide
+  element?: CarouselElement
+  onSlideChange: (patch: Partial<Slide>) => void
+  onElementChange: (patch: Partial<CarouselElement>) => void
+  onDeleteSlide: (id: string) => void
+  onDuplicateSlide: (id: string) => void
+  onDeleteElement: (slideId: string, elementId: string) => void
+  onDuplicateElement: (slideId: string, elementId: string) => void
+  onReorderElement: (slideId: string, elementId: string, direction: 'forward' | 'backward') => void
+  // Crop entry: enabled only for unrotated image elements.
+  onEnterCrop?: (slideId: string, elementId: string) => void
+  // editor-core text mutator for the formatting toolbar.
+  updateOverlayProp?: (slideId: string, elementId: string, key: string, value: string) => Promise<void>
+  // Adapter supplies overlay-schema listing (global + profile-scoped).
+  adapter: EditorAdapter<Project>
+}
+
+function numInput(
+  label: string,
+  value: number,
+  onChange: (v: number) => void,
+  opts?: { min?: number; max?: number; step?: number }
+) {
+  return (
+    <label className="flex flex-col gap-0.5">
+      <span className="text-xs text-gray-500">{label}</span>
+      <input
+        type="number"
+        value={value}
+        min={opts?.min}
+        max={opts?.max}
+        step={opts?.step ?? 1}
+        onChange={e => {
+          const parsed = parseNumber(e.target.value)
+          if (parsed !== null) onChange(parsed)
+        }}
+        className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-gray-500 w-full"
+      />
+    </label>
+  )
+}
+
+function PropEditor({
+  prop,
+  value,
+  onChange,
+}: {
+  prop: GlobalOverlayProp
+  value: unknown
+  onChange: (v: unknown) => void
+}) {
+  const { name, type, description } = prop
+
+  if (type === 'bool') {
+    return (
+      <label className="flex items-center gap-2 cursor-pointer" title={description}>
+        <input
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={e => onChange(e.target.checked)}
+          className="accent-blue-500"
+        />
+        <span className="text-xs text-gray-300">{name}</span>
+      </label>
+    )
+  }
+
+  if (type === 'color') {
+    return (
+      <label className="flex flex-col gap-0.5" title={description}>
+        <span className="text-xs text-gray-500">{name}</span>
+        <input
+          type="color"
+          value={String(value ?? '#000000')}
+          onChange={e => onChange(e.target.value)}
+          className="w-full h-7 bg-gray-800 border border-gray-700 rounded cursor-pointer"
+        />
+      </label>
+    )
+  }
+
+  if (type === 'int' || type === 'float') {
+    return (
+      <label className="flex flex-col gap-0.5" title={description}>
+        <span className="text-xs text-gray-500">{name}</span>
+        <input
+          type="number"
+          value={Number(value ?? 0)}
+          step={type === 'float' ? 0.1 : 1}
+          onChange={e => {
+            const parsed = parseNumber(e.target.value)
+            if (parsed !== null) onChange(parsed)
+          }}
+          className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-gray-500 w-full"
+        />
+      </label>
+    )
+  }
+
+  // string fallback
+  return (
+    <label className="flex flex-col gap-0.5" title={description}>
+      <span className="text-xs text-gray-500">{name}</span>
+      <input
+        type="text"
+        value={String(value ?? '')}
+        onChange={e => onChange(e.target.value)}
+        className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-gray-500 w-full"
+      />
+    </label>
+  )
+}
+
+export default function SlidePropertyPanel({
+  project,
+  slide,
+  element,
+  onSlideChange,
+  onElementChange,
+  onDeleteSlide,
+  onDuplicateSlide,
+  onDeleteElement,
+  onDuplicateElement,
+  onReorderElement,
+  onEnterCrop,
+  updateOverlayProp,
+  adapter,
+}: Props) {
+  // Map of jsxPath → GlobalOverlay for overlay prop schemas
+  const [overlaySchemas, setOverlaySchemas] = useState<Map<string, GlobalOverlay>>(new Map())
+  const [schemasLoading, setSchemasLoading] = useState(false)
+
+  useEffect(() => {
+    setSchemasLoading(true)
+    const promises: Promise<GlobalOverlay[]>[] = [adapter.listGlobalOverlays()]
+    if (project.profile) {
+      promises.push(adapter.listProfileOverlays?.(project.profile) ?? Promise.resolve([]))
+    }
+    Promise.all(promises)
+      .then(results => {
+        const map = new Map<string, GlobalOverlay>()
+        for (const list of results) {
+          for (const o of list) {
+            map.set(o.jsxPath, o)
+          }
+        }
+        setOverlaySchemas(map)
+      })
+      .catch(() => {})
+      .finally(() => setSchemasLoading(false))
+  }, [project.profile])
+
+  if (!slide) {
+    return (
+      <div className="w-80 flex-shrink-0 flex items-center justify-center text-gray-600 text-xs p-4">
+        Select a slide
+      </div>
+    )
+  }
+
+  const overlayEl = element?.type === 'overlay' ? (element as OverlayElement) : null
+  const overlaySchema = overlayEl ? overlaySchemas.get(overlayEl.overlay.template) : null
+
+  return (
+    <div className="w-80 flex-shrink-0 border-l border-gray-800 flex flex-col overflow-y-auto bg-gray-950">
+      {/* Slide header */}
+      <div className="px-4 py-3 border-b border-gray-800">
+        <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Slide</div>
+        <div className="flex flex-col gap-2">
+          <label className="flex flex-col gap-0.5">
+            <span className="text-xs text-gray-500">Background color</span>
+            <input
+              type="color"
+              value={slide.base_color || '#ffffff'}
+              onChange={e => onSlideChange({ base_color: e.target.value })}
+              className="w-full h-7 bg-gray-800 border border-gray-700 rounded cursor-pointer"
+            />
+          </label>
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex-1 text-xs"
+              onClick={() => onDuplicateSlide(slide.id)}
+            >
+              Duplicate
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex-1 text-xs text-red-400 hover:text-red-300"
+              onClick={() => onDeleteSlide(slide.id)}
+            >
+              Delete
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Element section */}
+      {element && (
+        <div className="px-4 py-3 flex flex-col gap-3">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+              {element.type === 'image' ? 'Image' : 'Overlay'}
+            </span>
+            <div className="flex gap-1">
+              <button
+                onClick={() => onReorderElement(slide.id, element.id, 'forward')}
+                className="text-xs text-gray-500 hover:text-white px-1"
+                title="Bring forward"
+              >
+                ↑
+              </button>
+              <button
+                onClick={() => onReorderElement(slide.id, element.id, 'backward')}
+                className="text-xs text-gray-500 hover:text-white px-1"
+                title="Send backward"
+              >
+                ↓
+              </button>
+            </div>
+          </div>
+
+          {/* Transform */}
+          <div className="grid grid-cols-2 gap-2">
+            {numInput('X', element.x, v => onElementChange({ x: v }))}
+            {numInput('Y', element.y, v => onElementChange({ y: v }))}
+            {numInput('W', element.w, v => onElementChange({ w: v }), { min: 1 })}
+            {numInput('H', element.h, v => onElementChange({ h: v }), { min: 1 })}
+            {numInput('Rotation', element.rotation ?? 0, v => onElementChange({ rotation: v }), { min: -360, max: 360 })}
+          </div>
+
+          {/* Image-specific */}
+          {element.type === 'image' && (
+            <div className="flex flex-col gap-1.5">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-xs text-gray-500">Source</span>
+                <span className="text-xs text-gray-300 truncate" title={element.src}>
+                  {element.src.split('/').pop() || element.src}
+                </span>
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                className="text-xs flex items-center gap-1.5"
+                disabled={(element.rotation ?? 0) !== 0 || !onEnterCrop}
+                title={
+                  (element.rotation ?? 0) !== 0
+                    ? 'Reset rotation to 0 before cropping'
+                    : 'Crop image'
+                }
+                onClick={() => onEnterCrop?.(slide.id, element.id)}
+              >
+                <Crop className="h-3.5 w-3.5" />
+                Crop
+              </Button>
+            </div>
+          )}
+
+          {/* Overlay-specific */}
+          {overlayEl && (
+            <div className="flex flex-col gap-2">
+              {/* Rich-text formatting (bold/italic/case/color/align + font family
+                  & size pickers) for overlays exposing the standard text contract. */}
+              {updateOverlayProp && (
+                <TextFormattingToolbar
+                  slideId={slide.id}
+                  element={overlayEl}
+                  updateOverlayProp={updateOverlayProp}
+                />
+              )}
+
+              <div className="grid grid-cols-2 gap-2">
+                {numInput('Frame', overlayEl.frame, v => onElementChange({ frame: v }), { min: 0 })}
+              </div>
+
+              {schemasLoading && (
+                <div className="text-xs text-gray-500">Loading overlay props…</div>
+              )}
+
+              {!schemasLoading && overlaySchema && overlaySchema.props.length > 0 && (
+                <div className="flex flex-col gap-2">
+                  <span className="text-xs text-gray-500 font-medium">Props</span>
+                  {overlaySchema.props.map(prop => (
+                    <PropEditor
+                      key={prop.name}
+                      prop={prop}
+                      value={overlayEl.overlay.props[prop.name]}
+                      onChange={v => {
+                        onElementChange({
+                          overlay: {
+                            ...overlayEl.overlay,
+                            props: { ...overlayEl.overlay.props, [prop.name]: v },
+                          },
+                        } as Partial<CarouselElement>)
+                      }}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Element actions */}
+          <div className="flex gap-2 pt-1">
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex-1 text-xs"
+              onClick={() => onDuplicateElement(slide.id, element.id)}
+            >
+              Duplicate
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex-1 text-xs text-red-400 hover:text-red-300"
+              onClick={() => onDeleteElement(slide.id, element.id)}
+            >
+              Delete
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,235 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, act, waitFor, fireEvent } from '@testing-library/react'
+import type { EditorAdapter, ImageElement, Project, RenderEvent } from '../../types'
+import CarouselEditor from '../CarouselEditor'
+
+// ── Fake adapter (mirrors editor-core's use-project-state test pattern) ───────
+// The package owns the assembled editor now: no host (`@/`) modules are mocked.
+// A full fake `EditorAdapter` drives load/save/render and the overlay-list /
+// upload / fileUrl primitives the assembled editor consumes.
+
+function makeProject(overrides: Partial<Project> = {}): Project {
+  return {
+    version: '1',
+    id: 'proj-1',
+    name: 'Test',
+    workflow: 'carousel',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'carousel',
+    settings: { resolution: [1080, 1080] },
+    assets: [],
+    slides: [
+      {
+        id: 'slide-0',
+        base_color: '#ffffff',
+        elements: [
+          {
+            id: 'el-img',
+            type: 'image',
+            src: 'a.png',
+            x: 100,
+            y: 100,
+            w: 200,
+            h: 200,
+            rotation: 0,
+          },
+        ],
+      },
+    ],
+    ...overrides,
+  } as Project
+}
+
+interface FakeAdapter extends EditorAdapter<Project> {
+  saveCalls: Array<{ id: string; project: Project }>
+}
+
+function makeFakeAdapter(): FakeAdapter {
+  const saveCalls: Array<{ id: string; project: Project }> = []
+  return {
+    loadProject: vi.fn(async () => makeProject()),
+    saveProject: vi.fn(async (id: string, project: Project) => { saveCalls.push({ id, project }) }),
+    subscribe: () => () => {},
+    render: async function* (): AsyncIterable<RenderEvent> {
+      yield { type: 'done', outputPath: '/out.png' }
+    },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    saveCalls,
+  }
+}
+
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  // ResizeObserver isn't in jsdom.
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+// The element id appears twice in the DOM: once in the left-rail thumbnail
+// (non-interactive SlideCanvas) and once in the main interactive canvas. The
+// interactive canvas renders last, so take the final match.
+function findInteractiveWrapper(elementId: string): HTMLElement {
+  const els = document.querySelectorAll(`[data-element-id="${elementId}"]`)
+  if (els.length === 0) throw new Error(`element wrapper ${elementId} not found`)
+  return els[els.length - 1] as HTMLElement
+}
+
+describe('CarouselEditor — editor-core integration', () => {
+  it('renders the host-supplied assetsPanel slot', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const { getByTestId } = render(
+      <CarouselEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ assetsPanel: <div data-testid="assets" /> }}
+      />,
+    )
+    await waitFor(() => getByTestId('assets'))
+  })
+
+  // Regression: SlideGrid thumbnails must receive `compileOverlay` so overlay
+  // elements render in the left rail. Before the fix the thumbnail used a
+  // noopCompiler that always rejected → a red "overlay error" badge on every
+  // overlay; adapter.compileOverlay was called ONCE (main canvas only). With the
+  // fix the thumbnail (non-interactive SlideCanvas) routes through
+  // adapter.compileOverlay too, so the SAME overlay is compiled twice
+  // (thumbnail + main). We assert the compiler is threaded to the thumbnail
+  // (call count ≥ 2) — the precise fix. (We don't assert the rendered overlay
+  // output: the fake factory can't render in jsdom, which is orthogonal to this
+  // bug; the real render is verified in the browser.)
+  it('threads compileOverlay into slide thumbnails (compiles overlay for thumbnail + main)', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject({
+      slides: [
+        {
+          id: 'slide-ov',
+          base_color: '#ffffff',
+          elements: [
+            {
+              id: 'el-ov',
+              type: 'overlay',
+              overlay: { template: '/overlays/lp-text.jsx', props: { text: 'Puerta' } },
+              frame: 0,
+              x: 100, y: 800, w: 880, h: 160, rotation: 0,
+            },
+          ],
+        },
+      ],
+    })
+    render(<CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />)
+    // ≥2 calls proves the thumbnail uses adapter.compileOverlay (not noopCompiler).
+    // Under the bug this is exactly 1 (main canvas only) and this times out.
+    await waitFor(() =>
+      expect((adapter.compileOverlay as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(2),
+    )
+  })
+
+  it('renders the host-supplied pendingStatus slot in the pending view', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject({ status: 'pending', slides: [] })
+    const { getByTestId, queryByText } = render(
+      <CarouselEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ pendingStatus: <div data-testid="pending-status">Agent is working: → step 2</div> }}
+      />,
+    )
+    await waitFor(() => getByTestId('pending-status'))
+    // The slot replaces the default empty-state copy.
+    expect(queryByText('Message your agent to start')).toBeNull()
+  })
+
+  it('shows the default empty-state copy when pendingStatus slot is absent', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject({ status: 'pending', slides: [] })
+    const { getByText } = render(
+      <CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />,
+    )
+    await waitFor(() => getByText('Message your agent to start'))
+  })
+
+  it('selecting an element, moving it, then undo reverts the position', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+
+    render(
+      <CarouselEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ assetsPanel: <div data-testid="assets" /> }}
+      />,
+    )
+
+    // The interactive slide canvas renders the image element wrapper.
+    const wrapper = await waitFor(() => findInteractiveWrapper('el-img'))
+
+    // Select the element (click).
+    await act(async () => { fireEvent.click(wrapper) })
+
+    // Perform a drag: pointer-down on the wrapper, move on window, up on window.
+    await act(async () => {
+      fireEvent.pointerDown(wrapper, { clientX: 150, clientY: 150 })
+      fireEvent.pointerMove(window, { clientX: 250, clientY: 250 })
+      fireEvent.pointerUp(window)
+    })
+
+    // The move + commit persisted a new position via the adapter.
+    await waitFor(() => {
+      expect(adapter.saveCalls.length).toBeGreaterThan(0)
+    })
+    const movedSave = adapter.saveCalls[adapter.saveCalls.length - 1].project
+    const movedEl = movedSave.slides![0].elements[0]
+    expect(movedEl.x).not.toBe(100)
+
+    const savesBeforeUndo = adapter.saveCalls.length
+
+    // Undo via keyboard shortcut (Cmd/Ctrl+Z). Guarded paths require the target
+    // not be a text input — fire on document.body.
+    await act(async () => {
+      fireEvent.keyDown(window, { key: 'z', ctrlKey: true })
+    })
+
+    // Undo enqueues a save that restores the original position.
+    await waitFor(() => {
+      expect(adapter.saveCalls.length).toBeGreaterThan(savesBeforeUndo)
+    })
+    const undoneSave = adapter.saveCalls[adapter.saveCalls.length - 1].project
+    const undoneEl = undoneSave.slides![0].elements[0]
+    expect(undoneEl.x).toBe(100)
+    expect(undoneEl.y).toBe(100)
+  })
+
+  it('does not fire undo while typing in an input', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    render(<CarouselEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />)
+
+    await waitFor(() => findInteractiveWrapper('el-img'))
+
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    input.focus()
+
+    const before = adapter.saveCalls.length
+    await act(async () => {
+      fireEvent.keyDown(input, { key: 'z', ctrlKey: true })
+    })
+    // No undo save should have been enqueued.
+    expect(adapter.saveCalls.length).toBe(before)
+    document.body.removeChild(input)
+  })
+})