@bycrux/editor 0.7.0 → 0.7.2

package/package.json

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

package/src/lib/__tests__/google-fonts.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { ensureGoogleFontsLoaded } from '../google-fonts'
+
+// Each test injects fonts that have not been requested by any prior test so the
+// module-level dedupe Set never short-circuits the <link> append we assert on.
+function injectedHrefs(): string[] {
+  return Array.from(document.head.querySelectorAll('link[rel="stylesheet"]')).map(
+    (l) => (l as HTMLLinkElement).href,
+  )
+}
+
+beforeEach(() => {
+  document.head.querySelectorAll('link[rel="stylesheet"]').forEach((l) => l.remove())
+})
+
+describe('ensureGoogleFontsLoaded', () => {
+  it('accepts a proper string[] and appends one <link> with each family', () => {
+    ensureGoogleFontsLoaded(['Syne:wght@800', 'Inter:wght@400'])
+    const hrefs = injectedHrefs()
+    expect(hrefs).toHaveLength(1)
+    expect(hrefs[0]).toContain('family=Syne:wght@800')
+    expect(hrefs[0]).toContain('family=Inter:wght@400')
+  })
+
+  it('does NOT throw and loads family=Anton when given a bare string "Anton"', () => {
+    // Regression: a non-empty string used to pass the `.length` guard and then
+    // `.map` threw "n.map is not a function", breaking the overlay layer.
+    expect(() => ensureGoogleFontsLoaded('Anton' as unknown as string[])).not.toThrow()
+    const hrefs = injectedHrefs()
+    expect(hrefs).toHaveLength(1)
+    expect(hrefs[0]).toContain('family=Anton')
+  })
+
+  it('splits a comma-separated string into multiple families', () => {
+    ensureGoogleFontsLoaded('Anton,Inter:wght@400' as unknown as string[])
+    const hrefs = injectedHrefs()
+    expect(hrefs).toHaveLength(1)
+    expect(hrefs[0]).toContain('family=Anton')
+    expect(hrefs[0]).toContain('family=Inter:wght@400')
+  })
+
+  it('is a no-op for empty string, undefined, and []', () => {
+    ensureGoogleFontsLoaded('' as unknown as string[])
+    ensureGoogleFontsLoaded(undefined)
+    ensureGoogleFontsLoaded([])
+    expect(injectedHrefs()).toHaveLength(0)
+  })
+
+  it('trims whitespace and drops empty entries from a comma string', () => {
+    ensureGoogleFontsLoaded(' Anton , , Inter ' as unknown as string[])
+    const hrefs = injectedHrefs()
+    expect(hrefs).toHaveLength(1)
+    expect(hrefs[0]).toContain('family=Anton')
+    expect(hrefs[0]).toContain('family=Inter')
+  })
+})

package/src/lib/google-fonts.ts

@@ -13,11 +13,22 @@
 // document.head across long editing sessions.
 const __injectedFontUrls = new Set<string>()
 
-export function ensureGoogleFontsLoaded(googleFonts: string[] | undefined): void {
-  if (!googleFonts?.length) return
+export function ensureGoogleFontsLoaded(googleFonts: string[] | string | undefined): void {
+  // Defensive coercion: persisted project items have occasionally stored the
+  // `googleFonts` field as a bare string (e.g. "Anton") instead of the typed
+  // string[] (["Anton"]). A non-empty string passes a naive `.length` guard and
+  // then `.map` throws "n.map is not a function", which surfaces in the editor
+  // as a cryptic "overlay error: <file>.jsx" and breaks the whole overlay layer.
+  // Coerce a string into a family list (supporting comma-separated values) and
+  // bail on anything that isn't a non-empty array.
+  const families =
+    typeof googleFonts === 'string'
+      ? googleFonts.split(',').map((s) => s.trim()).filter(Boolean)
+      : googleFonts
+  if (!Array.isArray(families) || !families.length) return
   // Match the format bundle.js uses for the render pipeline so preview and
   // render fetch identical CSS (and identical glyphs / metrics).
-  const url = `https://fonts.googleapis.com/css2?${googleFonts.map((f) => `family=${f}`).join('&')}&display=swap`
+  const url = `https://fonts.googleapis.com/css2?${families.map((f) => `family=${f}`).join('&')}&display=swap`
   if (__injectedFontUrls.has(url)) return
   __injectedFontUrls.add(url)
   if (typeof document === 'undefined') return

package/src/video/preview/useVideoPlayback.ts

@@ -702,7 +702,13 @@ export function useVideoPlayback(
       }
     }
 
-    if (video.currentTime >= outPoint) {
+    // A normalized cache can encode a few ms SHORTER than its computed window
+    // (outPoint − inPoint), so the <video> reaches its natural end (`ended`)
+    // before currentTime ever reaches outPoint. Treat EOF as reaching the
+    // boundary too — otherwise the clip switch never fires and playback stalls
+    // at that clip's end (raw full-length sources never hit this; trimmed
+    // window caches can).
+    if (video.currentTime >= outPoint || video.ended) {
       if (clip.loop) {
         const projectT = clip.start + loopOffsetRef.current + (video.currentTime - clipInPoint)
         if (projectT < clip.end) {

package/src/video/timeline/Timeline.tsx

@@ -131,7 +131,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
   const [subcutClipId, setSubcutClipId]       = useState<string | null>(null)
 
-  const { zoom, zoomRef, scrollRef, zoomTo, handleTimelineWheel } = useTimelineZoom(totalDuration)
+  const { zoom, zoomRef, scrollRef, zoomTo } = useTimelineZoom(totalDuration)
 
   useEffect(() => {
     if (totalDuration === 0) return
@@ -245,7 +245,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
       )}
 
       {/* Scroll container for zoomed tracks */}
-      <div ref={scrollRef} className="overflow-x-auto" onWheel={handleTimelineWheel}>
+      <div ref={scrollRef} className="overflow-x-auto">
       <div style={{ width: zoom > 1 ? `${zoom * 100}%` : '100%' }} className="min-w-full">
 
       {/* Scrubber + tracks wrapped in a relative container so the hover indicator spans the full height */}

package/src/video/timeline/useTimelineZoom.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 export function useTimelineZoom(totalDuration: number) {
   const [zoom, setZoom] = useState(1)
@@ -31,7 +31,14 @@ export function useTimelineZoom(totalDuration: number) {
     setZoom(clamped)
   }
 
-  function handleTimelineWheel(e: React.WheelEvent) {
+  // ⌘/Ctrl + wheel = zoom; Alt + wheel = horizontal scroll. Both call
+  // preventDefault, so the listener MUST be non-passive. React's onWheel prop is
+  // registered passive at the root, which makes preventDefault a no-op and spams
+  // "Unable to preventDefault inside passive event listener" — so attach a native
+  // listener with { passive: false } instead. A ref to the latest handler keeps
+  // it current without re-binding on every render.
+  const wheelHandlerRef = useRef<(e: WheelEvent) => void>(() => {})
+  wheelHandlerRef.current = (e: WheelEvent) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault()
       // Multiplicative step so perceived speed is consistent across zoom levels.
@@ -44,5 +51,13 @@ export function useTimelineZoom(totalDuration: number) {
     }
   }
 
-  return { zoom, zoomRef, scrollRef, pendingScrollRef, zoomTo, handleTimelineWheel }
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const onWheel = (e: WheelEvent) => wheelHandlerRef.current(e)
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => el.removeEventListener('wheel', onWheel)
+  }, [])
+
+  return { zoom, zoomRef, scrollRef, pendingScrollRef, zoomTo }
 }