@basementstudio/shader-lab 0.1.0

package/src/lib/editor/project-file.ts

@@ -0,0 +1,145 @@
+import type {
+  EditorAsset,
+  EditorLayer,
+  ProjectPresetConfig,
+  Size,
+} from "@/types/editor"
+import { useAssetStore } from "@/store/asset-store"
+import { useEditorStore } from "@/store/editor-store"
+import { useLayerStore } from "@/store/layer-store"
+import { useTimelineStore } from "@/store/timeline-store"
+
+export interface LabProjectFile extends ProjectPresetConfig {
+  composition: Size
+  format: "shader-lab"
+}
+
+export function buildLabProjectFile(): LabProjectFile {
+  const assets = useAssetStore.getState().assets
+  const editorState = useEditorStore.getState()
+  const layerState = useLayerStore.getState()
+  const timelineState = useTimelineStore.getState()
+
+  return {
+    assets: assets.map((asset) => ({
+      fileName: asset.fileName,
+      id: asset.id,
+      kind: asset.kind,
+    })),
+    composition: structuredClone(editorState.canvasSize),
+    exportedAt: new Date().toISOString(),
+    format: "shader-lab",
+    layers: structuredClone(layerState.layers),
+    selectedLayerId: layerState.selectedLayerId,
+    timeline: structuredClone({
+      duration: timelineState.duration,
+      loop: timelineState.loop,
+      tracks: timelineState.tracks,
+    }),
+    version: 1,
+  }
+}
+
+export function parseLabProjectFile(input: string): LabProjectFile {
+  let parsed: unknown
+
+  try {
+    parsed = JSON.parse(input)
+  } catch {
+    throw new Error("The selected file is not valid JSON.")
+  }
+
+  if (!(parsed && typeof parsed === "object")) {
+    throw new Error("The selected file is not a valid Shader Lab project.")
+  }
+
+  const candidate = parsed as Partial<LabProjectFile>
+
+  if (candidate.format !== "shader-lab") {
+    throw new Error("This file is not a Shader Lab `.lab` project.")
+  }
+
+  if (candidate.version !== 1) {
+    throw new Error("Unsupported Shader Lab project version.")
+  }
+
+  if (!Array.isArray(candidate.layers)) {
+    throw new Error("Project file is missing a valid layer stack.")
+  }
+
+  if (!(candidate.timeline && typeof candidate.timeline === "object")) {
+    throw new Error("Project file is missing timeline data.")
+  }
+
+  if (!Array.isArray(candidate.timeline.tracks)) {
+    throw new Error("Project file is missing valid timeline tracks.")
+  }
+
+  if (
+    !(candidate.composition && typeof candidate.composition === "object") ||
+    typeof candidate.composition.width !== "number" ||
+    typeof candidate.composition.height !== "number"
+  ) {
+    throw new Error("Project file is missing composition dimensions.")
+  }
+
+  return structuredClone(candidate as LabProjectFile)
+}
+
+export function applyLabProjectFile(
+  projectFile: LabProjectFile,
+  currentAssets: EditorAsset[],
+): { missingAssetCount: number } {
+  const assetIds = new Set(currentAssets.map((asset) => asset.id))
+  const assetRefById = new Map(projectFile.assets.map((asset) => [asset.id, asset]))
+
+  const nextLayers = projectFile.layers.map((layer) =>
+    hydrateImportedLayer(layer, assetIds, assetRefById),
+  )
+
+  const hasSelectedLayer = nextLayers.some(
+    (layer) => layer.id === projectFile.selectedLayerId,
+  )
+
+  useLayerStore
+    .getState()
+    .replaceState(nextLayers, hasSelectedLayer ? projectFile.selectedLayerId : null, null)
+
+  useTimelineStore.getState().replaceState({
+    currentTime: 0,
+    duration: projectFile.timeline.duration,
+    isPlaying: false,
+    loop: projectFile.timeline.loop,
+    selectedKeyframeId: null,
+    selectedTrackId: null,
+    tracks: projectFile.timeline.tracks,
+  })
+
+  return {
+    missingAssetCount: nextLayers.filter(
+      (layer) => Boolean(layer.assetId && layer.runtimeError),
+    ).length,
+  }
+}
+
+function hydrateImportedLayer(
+  layer: EditorLayer,
+  assetIds: Set<string>,
+  assetRefById: Map<string, LabProjectFile["assets"][number]>,
+): EditorLayer {
+  if (!(layer.assetId && !assetIds.has(layer.assetId))) {
+    return {
+      ...layer,
+      runtimeError: layer.runtimeError ?? null,
+    }
+  }
+
+  const assetRef = assetRefById.get(layer.assetId)
+
+  return {
+    ...layer,
+    runtimeError: assetRef
+      ? `Missing asset: ${assetRef.fileName}`
+      : "Missing asset reference",
+  }
+}

package/src/lib/editor/shader-export-snippet.ts

@@ -0,0 +1,37 @@
+import type { ShaderLabConfig } from "@basementstudio/shader-lab"
+
+const DEFAULT_COMPONENT_NAME = "ExportedShader"
+
+export function generateShaderExportSnippet(
+  config: ShaderLabConfig,
+  componentName = DEFAULT_COMPONENT_NAME
+): string {
+  const safeComponentName = sanitizeShaderExportComponentName(componentName)
+  const serializedConfig = JSON.stringify(config, null, 2)
+
+  return [
+    'import { ShaderLabComposition, type ShaderLabConfig } from "@basementstudio/shader-lab"',
+    "",
+    `const config: ShaderLabConfig = ${serializedConfig}`,
+    "",
+    `export function ${safeComponentName}() {`,
+    "  return <ShaderLabComposition config={config} />",
+    "}",
+    "",
+  ].join("\n")
+}
+
+export function sanitizeShaderExportComponentName(input: string): string {
+  const collapsed = input.replace(/[^a-zA-Z0-9]+/g, " ").trim()
+  const parts =
+    collapsed.length > 0 ? collapsed.split(/\s+/) : [DEFAULT_COMPONENT_NAME]
+  const candidate = parts
+    .map((part) => part[0]?.toUpperCase() + part.slice(1))
+    .join("")
+
+  if (!(candidate && /^[A-Z]/.test(candidate))) {
+    return DEFAULT_COMPONENT_NAME
+  }
+
+  return candidate
+}

package/src/lib/editor/shader-export.ts

@@ -0,0 +1,315 @@
+import type {
+  ShaderLabAssetSource,
+  ShaderLabBlendMode,
+  ShaderLabCompositeMode,
+  ShaderLabConfig,
+  ShaderLabLayerConfig,
+  ShaderLabLayerKind,
+  ShaderLabLayerType,
+  ShaderLabParameterValue,
+  ShaderLabSketchSource,
+  ShaderLabTimelineTrack,
+} from "@basementstudio/shader-lab"
+import { CUSTOM_SHADER_INTERNAL_KEYS } from "@/lib/editor/custom-shader/shared"
+import type {
+  EditorAsset,
+  EditorLayer,
+  LayerType,
+  TimelineStateSnapshot,
+} from "@/types/editor"
+
+const SUPPORTED_SHADER_EXPORT_LAYER_TYPES = new Set<LayerType>([
+  "image",
+  "video",
+  "gradient",
+  "text",
+  "live",
+  "custom-shader",
+  "ascii",
+  "ink",
+  "pattern",
+  "crt",
+  "dithering",
+  "halftone",
+  "particle-grid",
+  "pixel-sorting",
+] as const)
+
+const UNSUPPORTED_SHADER_EXPORT_LAYER_TYPES = new Set<LayerType>([
+  "fluid",
+  "model",
+  "pixelation",
+  "blur",
+] as const)
+
+type SupportedShaderExportLayerType = Extract<
+  LayerType,
+  | "ascii"
+  | "crt"
+  | "custom-shader"
+  | "dithering"
+  | "gradient"
+  | "halftone"
+  | "image"
+  | "ink"
+  | "live"
+  | "particle-grid"
+  | "pattern"
+  | "pixel-sorting"
+  | "text"
+  | "video"
+>
+
+type SupportedShaderExportLayer = EditorLayer & {
+  kind: ShaderLabLayerKind
+  type: SupportedShaderExportLayerType
+}
+
+export interface ShaderExportValidationIssue {
+  layerId?: string
+  message: string
+}
+
+export interface BuildShaderExportConfigInput {
+  assets: EditorAsset[]
+  composition: {
+    height: number
+    width: number
+  }
+  layers: EditorLayer[]
+  timeline: Pick<TimelineStateSnapshot, "duration" | "loop" | "tracks">
+}
+
+export function validateShaderExportSupport(
+  layers: EditorLayer[],
+  assets: EditorAsset[] = []
+): ShaderExportValidationIssue[] {
+  const issues: ShaderExportValidationIssue[] = []
+  const assetById = new Map(assets.map((asset) => [asset.id, asset]))
+
+  for (const layer of layers) {
+    if (UNSUPPORTED_SHADER_EXPORT_LAYER_TYPES.has(layer.type)) {
+      issues.push({
+        layerId: layer.id,
+        message: `Layer "${layer.name}" uses "${layer.type}", which is not supported by shader export yet.`,
+      })
+      continue
+    }
+
+    if (!SUPPORTED_SHADER_EXPORT_LAYER_TYPES.has(layer.type)) {
+      issues.push({
+        layerId: layer.id,
+        message: `Layer "${layer.name}" uses unknown type "${layer.type}" and cannot be exported.`,
+      })
+    }
+
+    if ((layer.type === "image" || layer.type === "video") && !layer.assetId) {
+      issues.push({
+        layerId: layer.id,
+        message: `Layer "${layer.name}" requires a linked ${layer.type} asset before export.`,
+      })
+    }
+
+    if (
+      (layer.type === "image" || layer.type === "video") &&
+      layer.assetId &&
+      !assetById.has(layer.assetId)
+    ) {
+      issues.push({
+        layerId: layer.id,
+        message: `Layer "${layer.name}" references a missing ${layer.type} asset.`,
+      })
+    }
+
+    if (
+      layer.type === "custom-shader" &&
+      (typeof layer.params.sourceCode !== "string" ||
+        !layer.params.sourceCode.trim())
+    ) {
+      issues.push({
+        layerId: layer.id,
+        message: `Layer "${layer.name}" requires custom shader source before export.`,
+      })
+    }
+  }
+
+  return issues
+}
+
+export function buildShaderExportConfig(
+  input: BuildShaderExportConfigInput
+): ShaderLabConfig {
+  const issues = validateShaderExportSupport(input.layers, input.assets)
+
+  if (issues.length > 0) {
+    throw new Error(issues[0]?.message ?? "Shader export is not supported.")
+  }
+
+  const assetById = new Map(input.assets.map((asset) => [asset.id, asset]))
+
+  return {
+    composition: {
+      height: input.composition.height,
+      width: input.composition.width,
+    },
+    layers: input.layers.map((layer) =>
+      toShaderLabLayerConfig(
+        layer,
+        layer.assetId ? (assetById.get(layer.assetId) ?? null) : null
+      )
+    ),
+    timeline: {
+      duration: input.timeline.duration,
+      loop: input.timeline.loop,
+      tracks: structuredClone(
+        input.timeline.tracks
+      ) as ShaderLabTimelineTrack[],
+    },
+  }
+}
+
+function toShaderLabLayerConfig(
+  layer: EditorLayer,
+  asset: EditorAsset | null
+): ShaderLabLayerConfig {
+  const supportedLayer = assertSupportedShaderExportLayer(layer)
+  const sketch =
+    supportedLayer.type === "custom-shader"
+      ? getSketchSource(supportedLayer)
+      : undefined
+  const assetSource = toShaderLabAssetSource(supportedLayer, asset)
+  const baseLayer: ShaderLabLayerConfig = {
+    blendMode: supportedLayer.blendMode as ShaderLabBlendMode,
+    compositeMode: supportedLayer.compositeMode as ShaderLabCompositeMode,
+    hue: supportedLayer.hue,
+    id: supportedLayer.id,
+    kind: supportedLayer.kind,
+    name: supportedLayer.name,
+    opacity: supportedLayer.opacity,
+    params: stripEditorOnlyParams(supportedLayer),
+    saturation: supportedLayer.saturation,
+    type: supportedLayer.type as ShaderLabLayerType,
+    visible: supportedLayer.visible,
+  }
+
+  if (assetSource) {
+    baseLayer.asset = assetSource
+  }
+
+  if (sketch) {
+    baseLayer.sketch = sketch
+  }
+
+  return baseLayer
+}
+
+function assertSupportedShaderExportLayer(
+  layer: EditorLayer
+): SupportedShaderExportLayer {
+  if (layer.kind !== "effect" && layer.kind !== "source") {
+    throw new Error(
+      `Layer "${layer.name}" uses unsupported kind "${layer.kind}".`
+    )
+  }
+
+  if (!SUPPORTED_SHADER_EXPORT_LAYER_TYPES.has(layer.type)) {
+    throw new Error(
+      `Layer "${layer.name}" uses unsupported type "${layer.type}".`
+    )
+  }
+
+  return layer as SupportedShaderExportLayer
+}
+
+function toShaderLabAssetSource(
+  layer: EditorLayer,
+  asset: EditorAsset | null
+): ShaderLabAssetSource | undefined {
+  if (layer.type === "image") {
+    const fileName = asset?.fileName || "image.png"
+
+    return {
+      ...(asset?.fileName ? { fileName: asset.fileName } : {}),
+      kind: "image",
+      src: buildAssetPlaceholderPath("image", fileName),
+    }
+  }
+
+  if (layer.type === "video") {
+    const fileName = asset?.fileName || "video.mp4"
+
+    return {
+      ...(asset?.fileName ? { fileName: asset.fileName } : {}),
+      kind: "video",
+      src: buildAssetPlaceholderPath("video", fileName),
+    }
+  }
+
+  return undefined
+}
+
+function getSketchSource(
+  layer: EditorLayer
+): ShaderLabSketchSource | undefined {
+  const sourceCode =
+    typeof layer.params.sourceCode === "string" ? layer.params.sourceCode : ""
+
+  if (!sourceCode.trim()) {
+    return undefined
+  }
+
+  const fileName =
+    typeof layer.params.sourceFileName === "string" &&
+    layer.params.sourceFileName.trim()
+      ? layer.params.sourceFileName.trim()
+      : null
+
+  return {
+    code: sourceCode,
+    entryExport:
+      typeof layer.params.entryExport === "string" &&
+      layer.params.entryExport.trim()
+        ? layer.params.entryExport.trim()
+        : "sketch",
+    mode: "inline",
+    ...(fileName ? { fileName } : {}),
+  }
+}
+
+function stripEditorOnlyParams(
+  layer: EditorLayer
+): Record<string, ShaderLabParameterValue> {
+  const params: Record<string, ShaderLabParameterValue> = {}
+
+  for (const [key, value] of Object.entries(layer.params)) {
+    if (
+      layer.type === "custom-shader" &&
+      CUSTOM_SHADER_INTERNAL_KEYS.has(key)
+    ) {
+      continue
+    }
+
+    params[key] = structuredClone(value) as ShaderLabParameterValue
+  }
+
+  return params
+}
+
+function buildAssetPlaceholderPath(
+  kind: Extract<ShaderLabAssetSource["kind"], "image" | "video">,
+  fileName: string
+): string {
+  const sanitizedFileName = sanitizeAssetFileName(fileName)
+
+  return `/replace/${kind}/${sanitizedFileName}`
+}
+
+function sanitizeAssetFileName(fileName: string): string {
+  const trimmed = fileName.trim()
+
+  if (!trimmed) {
+    return "asset"
+  }
+
+  return trimmed.replace(/[^a-zA-Z0-9._-]+/g, "-")
+}