@basementstudio/shader-lab 0.1.0

package/src/store/asset-store.ts

@@ -0,0 +1,193 @@
+import { create } from "zustand"
+import type { AssetKind, EditorAsset } from "@/types/editor"
+
+export interface AssetStoreState {
+  assets: EditorAsset[]
+}
+
+export interface AssetStoreActions {
+  getAssetById: (id: string) => EditorAsset | null
+  loadAsset: (file: File) => Promise<EditorAsset>
+  removeAsset: (id: string) => void
+  replaceAssets: (assets: EditorAsset[]) => void
+}
+
+export type AssetStore = AssetStoreState & AssetStoreActions
+
+const ACCEPTED_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif",
+  "video/mp4",
+  "video/webm",
+  "model/gltf-binary",
+  "model/gltf+json",
+  "model/obj",
+  "application/octet-stream",
+])
+
+const MAX_SIZE_BYTES = 100 * 1024 * 1024
+
+function inferAssetKind(file: File): AssetKind | null {
+  const mimeType = file.type.toLowerCase()
+  const fileName = file.name.toLowerCase()
+
+  if (mimeType.startsWith("image/")) {
+    return "image"
+  }
+
+  if (mimeType.startsWith("video/")) {
+    return "video"
+  }
+
+  if (
+    fileName.endsWith(".glb") ||
+    fileName.endsWith(".gltf") ||
+    fileName.endsWith(".obj") ||
+    mimeType === "model/gltf-binary" ||
+    mimeType === "model/gltf+json" ||
+    mimeType === "model/obj"
+  ) {
+    return "model"
+  }
+
+  return null
+}
+
+function validateFile(file: File): AssetKind {
+  const kind = inferAssetKind(file)
+
+  if (!kind || (!ACCEPTED_TYPES.has(file.type) && kind !== "model")) {
+    throw new Error(
+      `Unsupported file type "${file.type || "unknown"}". Accepted: PNG, JPG, WebP, GIF, MP4, WebM, GLB, GLTF, OBJ.`,
+    )
+  }
+
+  if (file.size > MAX_SIZE_BYTES) {
+    throw new Error(
+      `File is too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Maximum size is 100 MB.`,
+    )
+  }
+
+  return kind
+}
+
+function loadImageMetadata(url: string): Promise<{ height: number; width: number }> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+
+    image.onload = () => {
+      resolve({
+        height: image.naturalHeight,
+        width: image.naturalWidth,
+      })
+    }
+
+    image.onerror = () => {
+      reject(new Error("Failed to read image metadata."))
+    }
+
+    image.src = url
+  })
+}
+
+function loadVideoMetadata(
+  url: string,
+): Promise<{ duration: number; height: number; width: number }> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video")
+    video.preload = "metadata"
+
+    video.onloadedmetadata = () => {
+      resolve({
+        duration: video.duration,
+        height: video.videoHeight,
+        width: video.videoWidth,
+      })
+    }
+
+    video.onerror = () => {
+      reject(new Error("Failed to read video metadata."))
+    }
+
+    video.src = url
+  })
+}
+
+export const useAssetStore = create<AssetStore>((set, get) => ({
+  assets: [],
+
+  async loadAsset(file) {
+    const kind = validateFile(file)
+    const url = URL.createObjectURL(file)
+    const baseAsset = {
+      createdAt: new Date().toISOString(),
+      error: null,
+      fileName: file.name,
+      id: crypto.randomUUID(),
+      kind,
+      mimeType: file.type,
+      sizeBytes: file.size,
+      status: "ready" as const,
+      url,
+    }
+
+    let asset: EditorAsset
+
+    if (kind === "image") {
+      const metadata = await loadImageMetadata(url)
+
+      asset = {
+        ...baseAsset,
+        duration: null,
+        height: metadata.height,
+        width: metadata.width,
+      }
+    } else if (kind === "video") {
+      const metadata = await loadVideoMetadata(url)
+
+      asset = {
+        ...baseAsset,
+        duration: metadata.duration,
+        height: metadata.height,
+        width: metadata.width,
+      }
+    } else {
+      asset = {
+        ...baseAsset,
+        duration: null,
+        height: null,
+        width: null,
+      }
+    }
+
+    set((state) => ({
+      assets: [...state.assets, asset],
+    }))
+
+    return asset
+  },
+
+  removeAsset: (id) => {
+    const asset = get().assets.find((entry) => entry.id === id)
+
+    if (asset) {
+      URL.revokeObjectURL(asset.url)
+    }
+
+    set((state) => ({
+      assets: state.assets.filter((entry) => entry.id !== id),
+    }))
+  },
+
+  getAssetById: (id) => {
+    return get().assets.find((asset) => asset.id === id) ?? null
+  },
+
+  replaceAssets: (assets) => {
+    set({
+      assets: [...assets],
+    })
+  },
+}))

package/src/store/editor-store.ts

@@ -0,0 +1,223 @@
+import { create } from "zustand"
+import type {
+  EditorStateSnapshot,
+  RenderScale,
+  WebGPUStatus,
+} from "@/types/editor"
+import { DEFAULT_CANVAS_SIZE } from "@/lib/editor/layers"
+
+export interface EditorStoreState extends EditorStateSnapshot {
+  startupPreviewDismissed: boolean
+}
+
+export interface EditorStoreActions {
+  closeTimelinePanel: () => void
+  dismissStartupPreview: () => void
+  enterImmersiveCanvas: () => void
+  exitImmersiveCanvas: () => void
+  openTimelinePanel: () => void
+  resetView: () => void
+  setCanvasSize: (width: number, height: number) => void
+  setFps: (fps: number) => void
+  setImmersiveCanvas: (immersiveCanvas: boolean) => void
+  setOutputSize: (width: number, height: number) => void
+  setPan: (x: number, y: number) => void
+  setRenderScale: (scale: RenderScale) => void
+  setSidebarOpen: (side: "left" | "right", open: boolean) => void
+  setTheme: (theme: "dark" | "light") => void
+  setTimelinePanelOpen: (open: boolean) => void
+  setWebGPUStatus: (status: WebGPUStatus, error?: string | null) => void
+  setZoom: (zoom: number) => void
+  toggleTimelinePanel: () => void
+  toggleSidebar: (side: "left" | "right") => void
+}
+
+export type EditorStore = EditorStoreState & EditorStoreActions
+
+const ZOOM_MIN = 0.125
+const ZOOM_MAX = 6
+
+function clampCanvasDimension(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 1
+  }
+
+  return Math.max(1, Math.round(value))
+}
+
+export const useEditorStore = create<EditorStore>((set) => ({
+  canvasSize: DEFAULT_CANVAS_SIZE,
+  fps: 0,
+  immersiveCanvas: false,
+  outputSize: DEFAULT_CANVAS_SIZE,
+  panOffset: { x: 0, y: 0 },
+  renderScale: 1,
+  sidebars: {
+    left: true,
+    right: true,
+  },
+  theme: "dark",
+  timelinePanelOpen: false,
+  webgpuError: null,
+  webgpuStatus: "idle",
+  zoom: 1,
+  startupPreviewDismissed: false,
+
+  dismissStartupPreview: () => {
+    set((state) =>
+      state.startupPreviewDismissed
+        ? state
+        : {
+            startupPreviewDismissed: true,
+          }
+    )
+  },
+
+  setZoom: (zoom) => {
+    set({
+      zoom: Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoom)),
+    })
+  },
+
+  setPan: (x, y) => {
+    set({
+      panOffset: { x, y },
+    })
+  },
+
+  resetView: () => {
+    set({
+      panOffset: { x: 0, y: 0 },
+      zoom: 1,
+    })
+  },
+
+  setCanvasSize: (width, height) => {
+    set((state) => {
+      const nextSize = {
+        height: clampCanvasDimension(height),
+        width: clampCanvasDimension(width),
+      }
+
+      if (
+        state.canvasSize.width === nextSize.width &&
+        state.canvasSize.height === nextSize.height
+      ) {
+        return state
+      }
+
+      return {
+        canvasSize: nextSize,
+      }
+    })
+  },
+
+  setOutputSize: (width, height) => {
+    set({
+      outputSize: {
+        height: clampCanvasDimension(height),
+        width: clampCanvasDimension(width),
+      },
+    })
+  },
+
+  setRenderScale: (renderScale) => {
+    set({
+      renderScale,
+    })
+  },
+
+  setImmersiveCanvas: (immersiveCanvas) => {
+    set((state) => ({
+      immersiveCanvas,
+      timelinePanelOpen: immersiveCanvas ? false : state.timelinePanelOpen,
+    }))
+  },
+
+  setTimelinePanelOpen: (timelinePanelOpen) => {
+    set({
+      timelinePanelOpen,
+    })
+  },
+
+  openTimelinePanel: () => {
+    set({
+      timelinePanelOpen: true,
+    })
+  },
+
+  closeTimelinePanel: () => {
+    set({
+      timelinePanelOpen: false,
+    })
+  },
+
+  toggleTimelinePanel: () => {
+    set((state) => ({
+      timelinePanelOpen: !state.timelinePanelOpen,
+    }))
+  },
+
+  enterImmersiveCanvas: () => {
+    set((state) => ({
+      immersiveCanvas: true,
+      sidebars: {
+        ...state.sidebars,
+        left: false,
+        right: false,
+      },
+      timelinePanelOpen: false,
+    }))
+  },
+
+  exitImmersiveCanvas: () => {
+    set((state) => ({
+      immersiveCanvas: false,
+      sidebars: {
+        ...state.sidebars,
+        left: true,
+        right: true,
+      },
+      timelinePanelOpen: false,
+    }))
+  },
+
+  setSidebarOpen: (side, open) => {
+    set((state) => ({
+      immersiveCanvas: open ? false : state.immersiveCanvas,
+      sidebars: {
+        ...state.sidebars,
+        [side]: open,
+      },
+    }))
+  },
+
+  toggleSidebar: (side) => {
+    set((state) => ({
+      immersiveCanvas: state.sidebars[side] ? state.immersiveCanvas : false,
+      sidebars: {
+        ...state.sidebars,
+        [side]: !state.sidebars[side],
+      },
+    }))
+  },
+
+  setTheme: (theme) => {
+    set({
+      theme,
+    })
+  },
+
+  setFps: (fps) => {
+    set({
+      fps,
+    })
+  },
+
+  setWebGPUStatus: (webgpuStatus, webgpuError = null) => {
+    set({
+      webgpuError,
+      webgpuStatus,
+    })
+  },
+}))

package/src/store/history-store.ts

@@ -0,0 +1,172 @@
+import { create } from "zustand"
+import type { EditorHistorySnapshot, HistoryEntry } from "@/types/editor"
+
+export interface HistoryStoreState {
+  future: HistoryEntry[]
+  past: HistoryEntry[]
+  pendingTimer: ReturnType<typeof setTimeout> | null
+}
+
+export interface HistoryStoreActions {
+  canRedo: () => boolean
+  canUndo: () => boolean
+  clearHistory: () => void
+  pushSnapshot: (
+    label: string,
+    snapshot: EditorHistorySnapshot,
+    options?: { debounce?: boolean },
+  ) => void
+  redo: (currentSnapshot: EditorHistorySnapshot) => EditorHistorySnapshot | null
+  undo: (currentSnapshot: EditorHistorySnapshot) => EditorHistorySnapshot | null
+}
+
+export type HistoryStore = HistoryStoreState & HistoryStoreActions
+
+const MAX_HISTORY = 50
+const DEBOUNCE_MS = 250
+
+function createHistoryEntry(
+  label: string,
+  snapshot: EditorHistorySnapshot,
+): HistoryEntry {
+  return {
+    id: crypto.randomUUID(),
+    label,
+    snapshot,
+    timestamp: Date.now(),
+  }
+}
+
+function pushPastEntry(past: HistoryEntry[], entry: HistoryEntry): HistoryEntry[] {
+  const nextPast = [...past, entry]
+
+  if (nextPast.length <= MAX_HISTORY) {
+    return nextPast
+  }
+
+  return nextPast.slice(nextPast.length - MAX_HISTORY)
+}
+
+export const useHistoryStore = create<HistoryStore>((set, get) => ({
+  future: [],
+  past: [],
+  pendingTimer: null,
+
+  pushSnapshot: (label, snapshot, options) => {
+    const entry = createHistoryEntry(label, snapshot)
+    const shouldDebounce = options?.debounce ?? false
+
+    if (!shouldDebounce) {
+      const timer = get().pendingTimer
+
+      if (timer) {
+        clearTimeout(timer)
+      }
+
+      set((state) => ({
+        future: [],
+        past: pushPastEntry(state.past, entry),
+        pendingTimer: null,
+      }))
+      return
+    }
+
+    const timer = get().pendingTimer
+
+    if (timer) {
+      clearTimeout(timer)
+    }
+
+    const nextTimer = setTimeout(() => {
+      set((state) => ({
+        future: [],
+        past: pushPastEntry(state.past, entry),
+        pendingTimer: null,
+      }))
+    }, DEBOUNCE_MS)
+
+    set({
+      pendingTimer: nextTimer,
+    })
+  },
+
+  undo: (currentSnapshot) => {
+    const state = get()
+    const previous = state.past[state.past.length - 1]
+
+    if (!previous) {
+      return null
+    }
+
+    set({
+      future: [createHistoryEntry("Redo state", currentSnapshot), ...state.future],
+      past: state.past.slice(0, -1),
+    })
+
+    return previous.snapshot
+  },
+
+  redo: (currentSnapshot) => {
+    const state = get()
+    const [next, ...future] = state.future
+
+    if (!next) {
+      return null
+    }
+
+    set({
+      future,
+      past: pushPastEntry(state.past, createHistoryEntry("Undo state", currentSnapshot)),
+    })
+
+    return next.snapshot
+  },
+
+  canUndo: () => get().past.length > 0,
+  canRedo: () => get().future.length > 0,
+
+  clearHistory: () => {
+    const timer = get().pendingTimer
+
+    if (timer) {
+      clearTimeout(timer)
+    }
+
+    set({
+      future: [],
+      past: [],
+      pendingTimer: null,
+    })
+  },
+}))
+
+export function registerHistoryShortcuts(
+  onUndo: () => void,
+  onRedo: () => void,
+): () => void {
+  function handleKeyDown(event: KeyboardEvent) {
+    const isMac = navigator.platform.toLowerCase().includes("mac")
+    const ctrlOrMeta = isMac ? event.metaKey : event.ctrlKey
+
+    if (!ctrlOrMeta) {
+      return
+    }
+
+    if (event.key === "z" && !event.shiftKey) {
+      event.preventDefault()
+      onUndo()
+      return
+    }
+
+    if ((event.key === "z" && event.shiftKey) || event.key === "y") {
+      event.preventDefault()
+      onRedo()
+    }
+  }
+
+  window.addEventListener("keydown", handleKeyDown)
+
+  return () => {
+    window.removeEventListener("keydown", handleKeyDown)
+  }
+}

package/src/store/index.ts

@@ -0,0 +1,31 @@
+export {
+  useAssetStore,
+  type AssetStore,
+  type AssetStoreActions,
+  type AssetStoreState,
+} from "./asset-store"
+export {
+  useEditorStore,
+  type EditorStore,
+  type EditorStoreActions,
+  type EditorStoreState,
+} from "./editor-store"
+export {
+  useHistoryStore,
+  registerHistoryShortcuts,
+  type HistoryStore,
+  type HistoryStoreActions,
+  type HistoryStoreState,
+} from "./history-store"
+export {
+  useLayerStore,
+  type LayerStore,
+  type LayerStoreActions,
+  type LayerStoreState,
+} from "./layer-store"
+export {
+  useTimelineStore,
+  type TimelineStore,
+  type TimelineStoreActions,
+  type TimelineStoreState,
+} from "./timeline-store"