@basementstudio/shader-lab 0.1.0 → 1.0.2

package/src/store/timeline-store.ts

@@ -1,572 +0,0 @@
-import { create } from "zustand"
-import { advanceProjectTimeline } from "@/renderer/project-clock"
-import type {
-  AnimatedPropertyBinding,
-  AnimatableValueType,
-  EditorLayer,
-  LayerAnimatableProperty,
-  ParameterType,
-  ParameterValue,
-  TimelineInterpolation,
-  TimelineKeyframe,
-  TimelineStateSnapshot,
-  TimelineTrack,
-} from "@/types/editor"
-import {
-  cloneParameterValue,
-  getParameterDefinition,
-} from "@/lib/editor/parameter-schema"
-import { getLayerDefinition } from "@/lib/editor/config/layer-registry"
-
-export interface TimelineStoreState extends TimelineStateSnapshot {}
-
-interface ToggleKeyframeInput {
-  binding: AnimatedPropertyBinding
-  layerId: string
-  time?: number
-  value: ParameterValue
-}
-
-interface UpsertKeyframeInput extends ToggleKeyframeInput {}
-
-export interface TimelineStoreActions {
-  advance: (delta: number) => void
-  clearLayerTracks: (layerId: string) => void
-  getTrackForBinding: (
-    layerId: string,
-    binding: AnimatedPropertyBinding,
-  ) => TimelineTrack | null
-  pruneTracks: (layers: EditorLayer[]) => void
-  replaceState: (
-    nextState: Pick<
-      TimelineStateSnapshot,
-      "currentTime" | "duration" | "isPlaying" | "loop" | "selectedKeyframeId" | "selectedTrackId" | "tracks"
-    >,
-  ) => void
-  removeKeyframe: (trackId: string, keyframeId: string) => void
-  setCurrentTime: (time: number) => void
-  setDuration: (duration: number) => void
-  setLoop: (loop: boolean) => void
-  setPlaying: (playing: boolean) => void
-  setSelected: (trackId: string | null, keyframeId?: string | null) => void
-  setTrackEnabled: (trackId: string, enabled: boolean) => void
-  setTrackInterpolation: (trackId: string, interpolation: TimelineInterpolation) => void
-  setKeyframeTime: (trackId: string, keyframeId: string, time: number) => void
-  stop: () => void
-  toggleKeyframe: (input: ToggleKeyframeInput) => void
-  togglePlaying: () => void
-  upsertKeyframe: (input: UpsertKeyframeInput) => void
-}
-
-export type TimelineStore = TimelineStoreState & TimelineStoreActions
-
-const DEFAULT_DURATION = 6
-const MIN_DURATION = 0.25
-const MAX_DURATION = 120
-const TIME_EPSILON = 1 / 240
-
-function clampDuration(duration: number): number {
-  if (!Number.isFinite(duration)) {
-    return DEFAULT_DURATION
-  }
-
-  return Math.min(MAX_DURATION, Math.max(MIN_DURATION, duration))
-}
-
-function clampTime(time: number, duration: number): number {
-  if (!Number.isFinite(time)) {
-    return 0
-  }
-
-  return Math.min(Math.max(duration, MIN_DURATION), Math.max(0, time))
-}
-
-function sortKeyframes(keyframes: TimelineKeyframe[]): TimelineKeyframe[] {
-  return [...keyframes].sort((left, right) => left.time - right.time)
-}
-
-function bindingEquals(left: AnimatedPropertyBinding, right: AnimatedPropertyBinding): boolean {
-  if (left.kind !== right.kind) {
-    return false
-  }
-
-  if (left.kind === "param" && right.kind === "param") {
-    return left.key === right.key
-  }
-
-  if (left.kind === "layer" && right.kind === "layer") {
-    return left.property === right.property
-  }
-
-  return false
-}
-
-function isAnimatableValueType(
-  valueType: ParameterType | AnimatableValueType,
-): valueType is AnimatableValueType {
-  return valueType !== "text"
-}
-
-function defaultInterpolationForBinding(binding: AnimatedPropertyBinding): TimelineInterpolation {
-  if (binding.valueType === "boolean" || binding.valueType === "select") {
-    return "step"
-  }
-
-  return "smooth"
-}
-
-function getLayerBindingValueType(property: LayerAnimatableProperty): "boolean" | "number" {
-  if (property === "visible") {
-    return "boolean"
-  }
-
-  return "number"
-}
-
-export function createLayerPropertyBinding(
-  property: LayerAnimatableProperty,
-): AnimatedPropertyBinding {
-  const labelByProperty: Record<LayerAnimatableProperty, string> = {
-    hue: "Hue",
-    opacity: "Opacity",
-    saturation: "Saturation",
-    visible: "Visible",
-  }
-
-  return {
-    kind: "layer",
-    label: labelByProperty[property],
-    property,
-    valueType: getLayerBindingValueType(property),
-  }
-}
-
-export function createParamBinding(
-  layer: EditorLayer,
-  key: string,
-): AnimatedPropertyBinding | null {
-  const definition = getParameterDefinition(getLayerDefinition(layer.type).params, key)
-
-  if (!(definition && isAnimatableValueType(definition.type))) {
-    return null
-  }
-
-  return {
-    key,
-    kind: "param",
-    label: definition.label,
-    valueType: definition.type,
-  }
-}
-
-function cloneTrack(track: TimelineTrack): TimelineTrack {
-  return {
-    ...track,
-    binding: { ...track.binding },
-    keyframes: track.keyframes.map((keyframe) => ({
-      ...keyframe,
-      value: cloneParameterValue(keyframe.value),
-    })),
-  }
-}
-
-function cloneTracks(tracks: TimelineTrack[]): TimelineTrack[] {
-  return tracks.map(cloneTrack)
-}
-
-export const useTimelineStore = create<TimelineStore>((set, get) => ({
-  currentTime: 0,
-  duration: DEFAULT_DURATION,
-  isPlaying: false,
-  loop: true,
-  selectedKeyframeId: null,
-  selectedTrackId: null,
-  tracks: [],
-
-  setPlaying: (isPlaying) => {
-    set({ isPlaying })
-  },
-
-  togglePlaying: () => {
-    set((state) => ({
-      isPlaying: !state.isPlaying,
-    }))
-  },
-
-  stop: () => {
-    set({
-      currentTime: 0,
-      isPlaying: false,
-    })
-  },
-
-  setLoop: (loop) => {
-    set({ loop })
-  },
-
-  setDuration: (duration) => {
-    set((state) => {
-      const nextDuration = clampDuration(duration)
-
-      return {
-        currentTime: clampTime(state.currentTime, nextDuration),
-        duration: nextDuration,
-        tracks: state.tracks.map((track) => ({
-          ...track,
-          keyframes: sortKeyframes(
-            track.keyframes.map((keyframe) => ({
-              ...keyframe,
-              time: clampTime(keyframe.time, nextDuration),
-            })),
-          ),
-        })),
-      }
-    })
-  },
-
-  setCurrentTime: (currentTime) => {
-    set((state) => ({
-      currentTime: clampTime(currentTime, state.duration),
-    }))
-  },
-
-  advance: (delta) => {
-    if (!Number.isFinite(delta) || delta <= 0) {
-      return
-    }
-
-    set((state) => {
-      const next = advanceProjectTimeline(state, delta)
-
-      return {
-        currentTime: next.currentTime,
-        isPlaying: next.isPlaying,
-      }
-    })
-  },
-
-  toggleKeyframe: ({ binding, layerId, time, value }) => {
-    if (!isAnimatableValueType(binding.valueType)) {
-      return
-    }
-
-    set((state) => {
-      const targetTime = clampTime(time ?? state.currentTime, state.duration)
-      const trackIndex = state.tracks.findIndex(
-        (track) => track.layerId === layerId && bindingEquals(track.binding, binding),
-      )
-
-      if (trackIndex === -1) {
-        const trackId = crypto.randomUUID()
-        const keyframeId = crypto.randomUUID()
-
-        return {
-          selectedKeyframeId: keyframeId,
-          selectedTrackId: trackId,
-          tracks: [
-            ...state.tracks,
-            {
-              binding: { ...binding },
-              enabled: true,
-              id: trackId,
-              interpolation: defaultInterpolationForBinding(binding),
-              keyframes: [
-                {
-                  id: keyframeId,
-                  time: targetTime,
-                  value: cloneParameterValue(value),
-                },
-              ],
-              layerId,
-            },
-          ],
-        }
-      }
-
-      const track = state.tracks[trackIndex]
-
-      if (!track) {
-        return state
-      }
-
-      const existingKeyframe = track.keyframes.find(
-        (keyframe) => Math.abs(keyframe.time - targetTime) <= TIME_EPSILON,
-      )
-
-      if (existingKeyframe) {
-        const nextTracks = [...state.tracks]
-        const nextTrack = cloneTrack(track)
-        nextTrack.keyframes = nextTrack.keyframes.filter(
-          (keyframe) => keyframe.id !== existingKeyframe.id,
-        )
-
-        if (nextTrack.keyframes.length === 0) {
-          nextTracks.splice(trackIndex, 1)
-        } else {
-          nextTracks[trackIndex] = nextTrack
-        }
-
-        return {
-          selectedKeyframeId:
-            state.selectedKeyframeId === existingKeyframe.id
-              ? null
-              : state.selectedKeyframeId,
-          selectedTrackId:
-            nextTrack.keyframes.length === 0 && state.selectedTrackId === track.id
-              ? null
-              : state.selectedTrackId,
-          tracks: nextTracks,
-        }
-      }
-
-      const keyframeId = crypto.randomUUID()
-      const nextTrack = cloneTrack(track)
-      nextTrack.enabled = true
-      nextTrack.keyframes = sortKeyframes([
-        ...nextTrack.keyframes,
-        {
-          id: keyframeId,
-          time: targetTime,
-          value: cloneParameterValue(value),
-        },
-      ])
-
-      const nextTracks = [...state.tracks]
-      nextTracks[trackIndex] = nextTrack
-
-      return {
-        selectedKeyframeId: keyframeId,
-        selectedTrackId: nextTrack.id,
-        tracks: nextTracks,
-      }
-    })
-  },
-
-  upsertKeyframe: ({ binding, layerId, time, value }) => {
-    if (!isAnimatableValueType(binding.valueType)) {
-      return
-    }
-
-    set((state) => {
-      const targetTime = clampTime(time ?? state.currentTime, state.duration)
-      const trackIndex = state.tracks.findIndex(
-        (track) => track.layerId === layerId && bindingEquals(track.binding, binding),
-      )
-
-      if (trackIndex === -1) {
-        const trackId = crypto.randomUUID()
-        const keyframeId = crypto.randomUUID()
-
-        return {
-          selectedKeyframeId: keyframeId,
-          selectedTrackId: trackId,
-          tracks: [
-            ...state.tracks,
-            {
-              binding: { ...binding },
-              enabled: true,
-              id: trackId,
-              interpolation: defaultInterpolationForBinding(binding),
-              keyframes: [
-                {
-                  id: keyframeId,
-                  time: targetTime,
-                  value: cloneParameterValue(value),
-                },
-              ],
-              layerId,
-            },
-          ],
-        }
-      }
-
-      const track = state.tracks[trackIndex]
-
-      if (!track) {
-        return state
-      }
-
-      const nextTrack = cloneTrack(track)
-      const existingKeyframeIndex = nextTrack.keyframes.findIndex(
-        (keyframe) => Math.abs(keyframe.time - targetTime) <= TIME_EPSILON,
-      )
-      let selectedKeyframeId = state.selectedKeyframeId
-
-      if (existingKeyframeIndex !== -1) {
-        const currentKeyframe = nextTrack.keyframes[existingKeyframeIndex]
-
-        if (!currentKeyframe) {
-          return state
-        }
-
-        nextTrack.keyframes[existingKeyframeIndex] = {
-          ...currentKeyframe,
-          value: cloneParameterValue(value),
-        }
-        selectedKeyframeId = currentKeyframe.id
-      } else {
-        const keyframeId = crypto.randomUUID()
-        nextTrack.keyframes = sortKeyframes([
-          ...nextTrack.keyframes,
-          {
-            id: keyframeId,
-            time: targetTime,
-            value: cloneParameterValue(value),
-          },
-        ])
-        selectedKeyframeId = keyframeId
-      }
-
-      const nextTracks = [...state.tracks]
-      nextTracks[trackIndex] = nextTrack
-
-      return {
-        selectedKeyframeId,
-        selectedTrackId: nextTrack.id,
-        tracks: nextTracks,
-      }
-    })
-  },
-
-  setTrackEnabled: (trackId, enabled) => {
-    set((state) => ({
-      tracks: state.tracks.map((track) =>
-        track.id === trackId ? { ...track, enabled } : track,
-      ),
-    }))
-  },
-
-  setTrackInterpolation: (trackId, interpolation) => {
-    set((state) => ({
-      tracks: state.tracks.map((track) =>
-        track.id === trackId ? { ...track, interpolation } : track,
-      ),
-    }))
-  },
-
-  setSelected: (selectedTrackId, selectedKeyframeId = null) => {
-    set({
-      selectedKeyframeId,
-      selectedTrackId,
-    })
-  },
-
-  setKeyframeTime: (trackId, keyframeId, time) => {
-    set((state) => ({
-      tracks: state.tracks.map((track) => {
-        if (track.id !== trackId) {
-          return track
-        }
-
-        return {
-          ...track,
-          keyframes: sortKeyframes(
-            track.keyframes.map((keyframe) =>
-              keyframe.id === keyframeId
-                ? {
-                    ...keyframe,
-                    time: clampTime(time, state.duration),
-                  }
-                : keyframe,
-            ),
-          ),
-        }
-      }),
-    }))
-  },
-
-  removeKeyframe: (trackId, keyframeId) => {
-    set((state) => {
-      const nextTracks = state.tracks
-        .map((track) => {
-          if (track.id !== trackId) {
-            return track
-          }
-
-          return {
-            ...track,
-            keyframes: track.keyframes.filter((keyframe) => keyframe.id !== keyframeId),
-          }
-        })
-        .filter((track) => track.keyframes.length > 0)
-
-      return {
-        selectedKeyframeId:
-          state.selectedKeyframeId === keyframeId ? null : state.selectedKeyframeId,
-        selectedTrackId:
-          state.selectedTrackId === trackId &&
-          !nextTracks.some((track) => track.id === trackId)
-            ? null
-            : state.selectedTrackId,
-        tracks: nextTracks,
-      }
-    })
-  },
-
-  clearLayerTracks: (layerId) => {
-    set((state) => {
-      const nextTracks = state.tracks.filter((track) => track.layerId !== layerId)
-      const selectedTrackStillExists = nextTracks.some(
-        (track) => track.id === state.selectedTrackId,
-      )
-
-      return {
-        selectedKeyframeId: selectedTrackStillExists ? state.selectedKeyframeId : null,
-        selectedTrackId: selectedTrackStillExists ? state.selectedTrackId : null,
-        tracks: nextTracks,
-      }
-    })
-  },
-
-  pruneTracks: (layers) => {
-    const layerById = new Map(layers.map((layer) => [layer.id, layer]))
-
-    set((state) => {
-      const nextTracks = state.tracks.filter((track) => {
-        const layer = layerById.get(track.layerId)
-
-        if (!layer) {
-          return false
-        }
-
-        if (track.binding.kind === "layer") {
-          return true
-        }
-
-        const definition = getParameterDefinition(getLayerDefinition(layer.type).params, track.binding.key)
-
-        return Boolean(definition && isAnimatableValueType(definition.type))
-      })
-
-      const selectedTrackStillExists = nextTracks.some(
-        (track) => track.id === state.selectedTrackId,
-      )
-
-      return {
-        selectedKeyframeId: selectedTrackStillExists ? state.selectedKeyframeId : null,
-        selectedTrackId: selectedTrackStillExists ? state.selectedTrackId : null,
-        tracks: nextTracks,
-      }
-    })
-  },
-
-  getTrackForBinding: (layerId, binding) => {
-    return (
-      get().tracks.find(
-        (track) => track.layerId === layerId && bindingEquals(track.binding, binding),
-      ) ?? null
-    )
-  },
-
-  replaceState: (nextState) => {
-    set({
-      currentTime: clampTime(nextState.currentTime, nextState.duration),
-      duration: clampDuration(nextState.duration),
-      isPlaying: nextState.isPlaying,
-      loop: nextState.loop,
-      selectedKeyframeId: nextState.selectedKeyframeId,
-      selectedTrackId: nextState.selectedTrackId,
-      tracks: cloneTracks(nextState.tracks),
-    })
-  },
-}))

package/src/types/assets.d.ts

@@ -1,6 +0,0 @@
-declare module "*.svg" {
-  import type { FC, SVGProps } from "react"
-
-  const ReactComponent: FC<SVGProps<SVGSVGElement>>
-  export default ReactComponent
-}

package/src/types/css.d.ts

@@ -1,21 +0,0 @@
-// CSS module type declarations (ambient - no imports allowed)
-
-declare module "*.module.css" {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-declare module "*.module.scss" {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-declare module "*.module.sass" {
-  const classes: { [key: string]: string }
-  export default classes
-}
-
-// Regular CSS imports
-declare module "*.css"
-declare module "*.scss"
-declare module "*.sass"