@basementstudio/shader-lab 0.1.0 → 1.0.2

package/src/store/asset-store.ts

@@ -1,193 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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"