@basementstudio/shader-lab 0.1.0

package/src/types/editor.ts

@@ -0,0 +1,357 @@
+export const LAYER_KINDS = ["source", "effect", "model"] as const
+export type LayerKind = (typeof LAYER_KINDS)[number]
+
+export const SOURCE_LAYER_TYPES = [
+  "image",
+  "video",
+  "gradient",
+  "text",
+  "fluid",
+  "live",
+  "custom-shader",
+] as const
+export type SourceLayerType = (typeof SOURCE_LAYER_TYPES)[number]
+
+export const EFFECT_LAYER_TYPES = [
+  "ascii",
+  "ink",
+  "pattern",
+  "crt",
+  "dithering",
+  "halftone",
+  "particle-grid",
+  "pixelation",
+  "pixel-sorting",
+  "blur",
+] as const
+export type EffectLayerType = (typeof EFFECT_LAYER_TYPES)[number]
+
+export const MODEL_LAYER_TYPES = ["model"] as const
+export type ModelLayerType = (typeof MODEL_LAYER_TYPES)[number]
+
+export type LayerType = SourceLayerType | EffectLayerType | ModelLayerType
+
+export const BLEND_MODES = [
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+] as const
+export type BlendMode = (typeof BLEND_MODES)[number]
+
+export const LAYER_COMPOSITE_MODES = ["filter", "mask"] as const
+export type LayerCompositeMode = (typeof LAYER_COMPOSITE_MODES)[number]
+
+export const ASSET_KINDS = ["image", "video", "model"] as const
+export type AssetKind = (typeof ASSET_KINDS)[number]
+
+export type Vector2 = { x: number; y: number }
+export type Size = { width: number; height: number }
+
+export type ParameterValue =
+  | number
+  | string
+  | boolean
+  | [number, number]
+  | [number, number, number]
+
+export type ParameterType =
+  | "number"
+  | "boolean"
+  | "select"
+  | "color"
+  | "vec2"
+  | "vec3"
+  | "text"
+
+export type ParameterVisibilityCondition = {
+  key: string
+} & (
+  | {
+      equals: boolean | number | string
+    }
+  | {
+      gte: number
+    }
+)
+
+type ParameterDefinitionBase<
+  TType extends ParameterType,
+  TValue extends ParameterValue,
+> = {
+  animatable?: boolean
+  defaultValue: TValue
+  description?: string
+  group?: string
+  key: string
+  label: string
+  type: TType
+  visibleWhen?: ParameterVisibilityCondition
+}
+
+export type NumberParameterDefinition = ParameterDefinitionBase<
+  "number",
+  number
+> & {
+  input?: "float" | "int"
+  max?: number
+  min?: number
+  step?: number
+  unit?: string
+}
+
+export type BooleanParameterDefinition = ParameterDefinitionBase<
+  "boolean",
+  boolean
+>
+
+export type SelectParameterDefinition = ParameterDefinitionBase<
+  "select",
+  string
+> & {
+  options: readonly {
+    label: string
+    value: string
+  }[]
+}
+
+export type ColorParameterDefinition = ParameterDefinitionBase<"color", string>
+
+export type TextParameterDefinition = ParameterDefinitionBase<
+  "text",
+  string
+> & {
+  maxLength?: number
+}
+
+export type Vec2ParameterDefinition = ParameterDefinitionBase<
+  "vec2",
+  [number, number]
+> & {
+  max?: number
+  min?: number
+  step?: number
+}
+
+export type Vec3ParameterDefinition = ParameterDefinitionBase<
+  "vec3",
+  [number, number, number]
+> & {
+  max?: number
+  min?: number
+  step?: number
+}
+
+export type ParameterDefinition =
+  | NumberParameterDefinition
+  | BooleanParameterDefinition
+  | SelectParameterDefinition
+  | ColorParameterDefinition
+  | TextParameterDefinition
+  | Vec2ParameterDefinition
+  | Vec3ParameterDefinition
+
+export type ParameterDefinitions = readonly ParameterDefinition[]
+export type LayerParameterValues = Record<string, ParameterValue>
+
+export type LayerFrameAdjustment = {
+  hue: number
+  opacity: number
+  saturation: number
+}
+
+export interface BaseLayer {
+  assetId: string | null
+  blendMode: BlendMode
+  compositeMode: LayerCompositeMode
+  expanded: boolean
+  hue: number
+  id: string
+  kind: LayerKind
+  locked: boolean
+  name: string
+  opacity: number
+  params: LayerParameterValues
+  runtimeError: string | null
+  saturation: number
+  type: LayerType
+  visible: boolean
+}
+
+export interface SourceLayer extends BaseLayer {
+  kind: "source"
+  type: SourceLayerType
+}
+
+export interface EffectLayer extends BaseLayer {
+  kind: "effect"
+  type: EffectLayerType
+}
+
+export interface ModelLayer extends BaseLayer {
+  kind: "model"
+  type: "model"
+}
+
+export type EditorLayer = SourceLayer | EffectLayer | ModelLayer
+
+export type AssetStatus = "idle" | "loading" | "ready" | "error"
+
+export interface EditorAsset {
+  createdAt: string
+  duration: number | null
+  error: string | null
+  fileName: string
+  id: string
+  kind: AssetKind
+  mimeType: string
+  sizeBytes: number
+  status: AssetStatus
+  url: string
+  width: number | null
+  height: number | null
+}
+
+export const TIMELINE_INTERPOLATIONS = ["linear", "smooth", "step"] as const
+export type TimelineInterpolation = (typeof TIMELINE_INTERPOLATIONS)[number]
+
+export type LayerAnimatableProperty =
+  | "opacity"
+  | "hue"
+  | "saturation"
+  | "visible"
+export type AnimatableValueType = Exclude<ParameterType, "text"> | "boolean"
+
+export type AnimatedPropertyBinding =
+  | {
+      kind: "layer"
+      label: string
+      property: LayerAnimatableProperty
+      valueType: "boolean" | "number"
+    }
+  | {
+      key: string
+      kind: "param"
+      label: string
+      valueType: AnimatableValueType
+    }
+
+export interface TimelineKeyframe {
+  id: string
+  time: number
+  value: ParameterValue
+}
+
+export interface TimelineTrack {
+  binding: AnimatedPropertyBinding
+  enabled: boolean
+  id: string
+  interpolation: TimelineInterpolation
+  keyframes: TimelineKeyframe[]
+  layerId: string
+}
+
+export interface TimelineStateSnapshot {
+  currentTime: number
+  duration: number
+  isPlaying: boolean
+  loop: boolean
+  selectedKeyframeId: string | null
+  selectedTrackId: string | null
+  tracks: TimelineTrack[]
+}
+
+export type RenderScale = 1 | 0.75 | 0.5
+export type WebGPUStatus =
+  | "idle"
+  | "unsupported"
+  | "initializing"
+  | "ready"
+  | "error"
+
+export interface EditorStateSnapshot {
+  canvasSize: Size
+  fps: number
+  immersiveCanvas: boolean
+  outputSize: Size
+  panOffset: Vector2
+  renderScale: RenderScale
+  sidebars: {
+    left: boolean
+    right: boolean
+  }
+  theme: "dark" | "light"
+  timelinePanelOpen: boolean
+  webgpuError: string | null
+  webgpuStatus: WebGPUStatus
+  zoom: number
+}
+
+export interface EditorHistorySnapshot {
+  hoveredLayerId: string | null
+  layers: EditorLayer[]
+  selectedLayerId: string | null
+  timeline: Pick<
+    TimelineStateSnapshot,
+    | "currentTime"
+    | "duration"
+    | "loop"
+    | "selectedKeyframeId"
+    | "selectedTrackId"
+    | "tracks"
+  >
+}
+
+export interface HistoryEntry {
+  id: string
+  label: string
+  snapshot: EditorHistorySnapshot
+  timestamp: number
+}
+
+export interface ExportImageConfig {
+  format: "png"
+  size: Size
+}
+
+export interface ExportVideoConfig {
+  duration: number
+  format: "mp4" | "webm"
+  fps: number
+  size: Size
+}
+
+export interface PresetAssetReference {
+  fileName: string
+  id: string
+  kind: AssetKind
+}
+
+export interface ProjectPresetConfig {
+  assets: PresetAssetReference[]
+  exportedAt: string
+  layers: EditorLayer[]
+  selectedLayerId: string | null
+  timeline: Pick<TimelineStateSnapshot, "duration" | "loop" | "tracks">
+  version: number
+}
+
+export interface LayerDefinition {
+  assetKind?: AssetKind
+  defaultName: string
+  kind: LayerKind
+  params: ParameterDefinitions
+  type: LayerType
+}

package/src/types/react.d.ts

@@ -0,0 +1,15 @@
+// Type augmentations and module declarations
+
+// React CSS custom properties support
+import "react"
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number
+  }
+}
+
+// Global window extensions
+declare global {
+  interface Window {}
+}

package/src/types/three-tsl.d.ts

@@ -0,0 +1,146 @@
+declare module "three/tsl" {
+  export interface LoopConfig {
+    condition?: string
+    end: number
+    start: number
+    type: "float" | "int"
+  }
+
+  export type ShaderNodeParams = readonly [
+    TSLNode,
+    TSLNode,
+    TSLNode,
+    TSLNode,
+    TSLNode,
+    TSLNode?,
+    ...TSLNode[],
+  ]
+
+  export type ShaderNodeFn = (
+    params: ShaderNodeParams,
+    ...rest: unknown[]
+  ) => unknown
+
+  export interface TSLNode {
+    a: TSLNode
+    b: TSLNode
+    dot(value: unknown): TSLNode
+    g: TSLNode
+    r: TSLNode
+    rgb: TSLNode
+    value: unknown
+    w: TSLNode
+    x: TSLNode
+    xx: TSLNode
+    xy: TSLNode
+    xyz: TSLNode
+    xxxx: TSLNode
+    xxyy: TSLNode
+    xxx: TSLNode
+    xzx: TSLNode
+    xzyw: TSLNode
+    y: TSLNode
+    yyy: TSLNode
+    yyyy: TSLNode
+    yyz: TSLNode
+    yzx: TSLNode
+    yzw: TSLNode
+    z: TSLNode
+    zw: TSLNode
+    zww: TSLNode
+    zxy: TSLNode
+    zzww: TSLNode
+    www: TSLNode
+    wyz: TSLNode
+
+    add(value: unknown): TSLNode
+    addAssign(value: unknown): TSLNode
+    and(value: unknown): TSLNode
+    or(value: unknown): TSLNode
+    assign(value: unknown): TSLNode
+    clamp(min?: unknown, max?: unknown): TSLNode
+    div(value: unknown): TSLNode
+    equal(value: unknown): TSLNode
+    fract(): TSLNode
+    length(): TSLNode
+    greaterThan(value: unknown): TSLNode
+    greaterThanEqual(value: unknown): TSLNode
+    lessThan(value: unknown): TSLNode
+    lessThanEqual(value: unknown): TSLNode
+    mul(value: unknown): TSLNode
+    mulAssign(value: unknown): TSLNode
+    negate(): TSLNode
+    normalize(): TSLNode
+    sqrt(): TSLNode
+    sub(value: unknown): TSLNode
+    toVar(): TSLNode
+  }
+
+  export function attribute(name: string, type: string): TSLNode
+  export const pointUV: TSLNode
+  export const positionLocal: TSLNode
+
+  export const EPSILON: TSLNode
+  export const PI: TSLNode
+  export function abs(value: unknown): TSLNode
+  export function add(left: unknown, right: unknown): TSLNode
+  export function atan(value: unknown): TSLNode
+  export function clamp(value: unknown, min?: unknown, max?: unknown): TSLNode
+  export function cos(value: unknown): TSLNode
+  export function cross(left: unknown, right: unknown): TSLNode
+  export function div(left: unknown, right: unknown): TSLNode
+  export function dot(left: unknown, right: unknown): TSLNode
+  export function Fn(
+    fn: ShaderNodeFn,
+    layout?: unknown
+  ): (...args: unknown[]) => TSLNode
+  export function Loop(
+    config: LoopConfig,
+    callback: (...args: unknown[]) => unknown
+  ): TSLNode
+  export function exp(value: unknown): TSLNode
+  export function fract(value: unknown): TSLNode
+  export function float(value?: unknown): TSLNode
+  export function floor(value: unknown): TSLNode
+  export function mat2(
+    a?: unknown,
+    b?: unknown,
+    c?: unknown,
+    d?: unknown
+  ): TSLNode
+  export function length(value: unknown): TSLNode
+  export function log(value: unknown): TSLNode
+  export function max(left: unknown, right: unknown): TSLNode
+  export function min(left: unknown, right: unknown): TSLNode
+  export function mix(left: unknown, right: unknown, factor: unknown): TSLNode
+  export function mod(left: unknown, right: unknown): TSLNode
+  export function mul(left: unknown, right: unknown): TSLNode
+  export const screenSize: TSLNode
+  export function select(
+    condition: unknown,
+    whenTrue: unknown,
+    whenFalse: unknown
+  ): TSLNode
+  export function sin(value: unknown): TSLNode
+  export function sign(value: unknown): TSLNode
+  export function smoothstep(
+    edge0: unknown,
+    edge1: unknown,
+    x: unknown
+  ): TSLNode
+  export function sqrt(value: unknown): TSLNode
+  export function pow(base: unknown, exponent: unknown): TSLNode
+  export function step(edge: unknown, value: unknown): TSLNode
+  export function sub(left: unknown, right: unknown): TSLNode
+  export function texture(value: unknown, uv?: unknown): TSLNode
+  export function uniform(value?: unknown): TSLNode
+  export function uv(): TSLNode
+  export function vec2(x?: unknown, y?: unknown): TSLNode
+  export function vec3(x?: unknown, y?: unknown, z?: unknown): TSLNode
+  export function vec4(
+    x?: unknown,
+    y?: unknown,
+    z?: unknown,
+    w?: unknown
+  ): TSLNode
+}

package/src/types/three-webgpu.d.ts

@@ -0,0 +1,51 @@
+declare module "three/webgpu" {
+  export * from "three"
+
+  import type {
+    Camera,
+    ColorRepresentation,
+    Material,
+    Scene,
+    TypedArray,
+    WebGLRendererParameters,
+    WebGLRenderTarget,
+  } from "three"
+  import type { TSLNode } from "three/tsl"
+
+  export class MeshBasicNodeMaterial extends Material {
+    colorNode: TSLNode | null
+    opacityNode: TSLNode | null
+    positionNode: TSLNode | null
+  }
+
+  export class PointsNodeMaterial extends Material {
+    colorNode: TSLNode | null
+    opacityNode: TSLNode | null
+    positionNode: TSLNode | null
+    sizeNode: TSLNode | null
+    alphaTest: number
+    transparent: boolean
+    depthWrite: boolean
+    sizeAttenuation: boolean
+  }
+
+  export class WebGPURenderer {
+    constructor(options?: WebGLRendererParameters & { canvas?: HTMLCanvasElement })
+
+    dispose(): void
+    init(): Promise<void>
+    readRenderTargetPixelsAsync(
+      target: WebGLRenderTarget,
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+    ): Promise<TypedArray>
+    render(scene: Scene, camera: Camera): void
+    setAnimationLoop(callback: ((time: number) => void) | null): void
+    setClearColor(color: ColorRepresentation, alpha?: number): void
+    setPixelRatio(pixelRatio: number): void
+    setRenderTarget(target: WebGLRenderTarget | null): void
+    setSize(width: number, height: number, updateStyle?: boolean): void
+  }
+}

package/tsconfig.json

@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "useUnknownInCatchVariables": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noUncheckedSideEffectImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx"
+  ]
+}