@basementstudio/shader-lab 0.1.0 → 1.0.2

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

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

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

@@ -1,315 +0,0 @@
-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, "-")
-}