@basementstudio/shader-lab 0.1.0

package/src/features/editor/components/editor-export-dialog.module.css

@@ -0,0 +1,271 @@
+.dialogRoot {
+  inset: 0;
+  position: fixed;
+  z-index: 90;
+}
+
+.backdrop {
+  background: rgb(4 5 7 / 0.56);
+  border: 0;
+  inset: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.dialog {
+  max-height: calc(100vh - 112px);
+  overflow: hidden;
+  padding: 0;
+}
+
+.dialogWrap {
+  inset: 76px auto auto 50%;
+  max-width: min(560px, calc(100vw - 32px));
+  position: absolute;
+  transform: translateX(-50%);
+  width: min(560px, calc(100vw - 32px));
+}
+
+.dialogMotion {
+  width: 100%;
+}
+
+.dialogHeader {
+  align-items: center;
+  border-bottom: 1px solid var(--ds-border-divider);
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+}
+
+.dialogTitle {
+  line-height: 20px;
+}
+
+.closeButton {
+  height: 28px;
+  width: 28px;
+}
+
+.tabRow {
+  border-bottom: 1px solid var(--ds-border-divider);
+  display: flex;
+  gap: 6px;
+  padding: 10px 16px;
+}
+
+.tabButton {
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ds-radius-control);
+  display: inline-flex;
+  justify-content: center;
+  line-height: 1;
+  min-height: 28px;
+  padding: 0 10px;
+  transition:
+    background-color 160ms var(--ease-out-cubic),
+    border-color 160ms var(--ease-out-cubic),
+    color 160ms var(--ease-out-cubic);
+}
+
+.tabButton:hover {
+  background-color: var(--ds-color-surface-subtle);
+  border-color: var(--ds-border-subtle);
+}
+
+.tabButtonActive {
+  background-color: var(--ds-color-surface-active);
+  border-color: var(--ds-border-active);
+}
+
+.dialogBody {
+  overflow: hidden;
+  padding: 14px 16px 16px;
+}
+
+.contentViewport {
+  position: relative;
+}
+
+.measureWrap {
+  inset: 0 auto auto 0;
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+  z-index: -1;
+}
+
+.measureView {
+  width: 100%;
+}
+
+.tabPane {
+  width: 100%;
+}
+
+.sectionStack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.fieldLabel {
+  text-transform: uppercase;
+}
+
+.presetRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pillButton {
+  align-items: center;
+  background-color: var(--ds-color-surface-control);
+  border: 1px solid var(--ds-border-divider);
+  border-radius: var(--ds-radius-control);
+  display: inline-flex;
+  justify-content: center;
+  line-height: 1;
+  min-height: 28px;
+  padding: 0 10px;
+  transition:
+    background-color 160ms var(--ease-out-cubic),
+    border-color 160ms var(--ease-out-cubic),
+    color 160ms var(--ease-out-cubic);
+}
+
+.tabButton :global(.type-label),
+.pillButton :global(.type-label) {
+  line-height: 1;
+}
+
+.pillButton:hover:not(:disabled) {
+  background-color: rgb(255 255 255 / 0.08);
+  border-color: var(--ds-border-hover);
+}
+
+.pillButtonActive {
+  background-color: var(--ds-color-surface-active);
+  border-color: var(--ds-border-active);
+}
+
+.pillButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.inlineGrid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.numberInput {
+  background-color: var(--ds-color-surface-control);
+  border: 1px solid var(--ds-border-divider);
+  border-radius: var(--ds-radius-control);
+  color: var(--ds-color-text-primary);
+  font-family: var(--ds-font-mono);
+  font-size: 12px;
+  line-height: 16px;
+  min-height: 36px;
+  padding: 8px 10px;
+}
+
+.note {
+  line-height: 14px;
+}
+
+.inlineCode {
+  background-color: rgb(255 255 255 / 0.06);
+  border: 1px solid rgb(255 255 255 / 0.09);
+  border-radius: 6px;
+  font-family: var(--ds-font-mono);
+  font-size: 11px;
+  padding: 1px 5px;
+}
+
+.issueList {
+  background-color: rgb(255 74 74 / 0.06);
+  border: 1px solid rgb(255 74 74 / 0.14);
+  border-radius: var(--ds-radius-panel);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+}
+
+.codeBlock {
+  background-color: rgb(255 255 255 / 0.04);
+  border: 1px solid var(--ds-border-divider);
+  border-radius: var(--ds-radius-panel);
+  font-family: var(--ds-font-mono);
+  font-size: 11px;
+  line-height: 1.55;
+  margin: 0;
+  max-height: 280px;
+  overflow: auto;
+  padding: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dropZone {
+  align-items: center;
+  background-color: var(--ds-color-surface-subtle);
+  border: 1px dashed var(--ds-border-divider);
+  border-radius: var(--ds-radius-panel);
+  display: grid;
+  gap: 12px;
+  grid-template-columns: auto 1fr auto;
+  padding: 14px;
+}
+
+.dropZoneActive {
+  background-color: var(--ds-color-surface-active);
+  border-color: var(--ds-border-hover);
+}
+
+.dropTitle {
+  line-height: 16px;
+}
+
+.dropText {
+  margin-top: 4px;
+}
+
+.errorMessage,
+.statusMessage {
+  border-radius: var(--ds-radius-control);
+  line-height: 14px;
+  margin: 0 16px 16px;
+  padding: 10px 12px;
+}
+
+.errorMessage {
+  background-color: rgb(255 74 74 / 0.08);
+  border: 1px solid rgb(255 74 74 / 0.18);
+  color: rgb(255 191 191 / 0.92);
+}
+
+.statusMessage {
+  background-color: rgb(255 255 255 / 0.06);
+  border: 1px solid rgb(255 255 255 / 0.09);
+}
+
+@media (width < 900px) {
+  .inlineGrid,
+  .dropZone {
+    grid-template-columns: 1fr;
+  }
+}

package/src/hooks/use-editor-renderer.ts

@@ -0,0 +1,182 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import {
+  buildRendererFrame,
+  type EditorRenderer,
+} from "@/renderer/contracts"
+import {
+  browserSupportsWebGPU,
+  createWebGPURenderer,
+} from "@/renderer/create-webgpu-renderer"
+import type { 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"
+
+function getPixelRatio(): number {
+  if (typeof window === "undefined") {
+    return 1
+  }
+
+  return Math.min(window.devicePixelRatio || 1, 2)
+}
+
+function measureElement(element: HTMLElement): Size {
+  const bounds = element.getBoundingClientRect()
+
+  return {
+    height: Math.max(1, Math.round(bounds.height)),
+    width: Math.max(1, Math.round(bounds.width)),
+  }
+}
+
+export function useEditorRenderer() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const viewportRef = useRef<HTMLDivElement | null>(null)
+  const rendererRef = useRef<EditorRenderer | null>(null)
+  const animationFrameRef = useRef<number | null>(null)
+  const [isReady, setIsReady] = useState(false)
+  const [fallbackMessage, setFallbackMessage] = useState<string | null>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const viewport = viewportRef.current
+
+    if (!(canvas && viewport)) {
+      return
+    }
+
+    const canvasElement = canvas
+    const viewportElement = viewport
+
+    const editorStore = useEditorStore.getState()
+
+    if (!browserSupportsWebGPU()) {
+      editorStore.setWebGPUStatus(
+        "unsupported",
+        "This browser does not expose WebGPU yet.",
+      )
+      setFallbackMessage("WebGPU is not available in this browser.")
+      return
+    }
+
+    let isDisposed = false
+    let lastFrameTime = performance.now()
+    let previewTime = 0
+    let resizeObserver: ResizeObserver | null = null
+
+    editorStore.setWebGPUStatus("initializing")
+
+    async function initializeRenderer() {
+      try {
+        const renderer = await createWebGPURenderer(canvasElement)
+
+        if (isDisposed) {
+          renderer.dispose()
+          return
+        }
+
+        rendererRef.current = renderer
+        await renderer.initialize()
+
+        if (isDisposed) {
+          renderer.dispose()
+          return
+        }
+
+        const initialSize = measureElement(viewportElement)
+        editorStore.setCanvasSize(initialSize.width, initialSize.height)
+        renderer.resize(initialSize, getPixelRatio())
+        editorStore.setWebGPUStatus("ready")
+        setIsReady(true)
+
+        resizeObserver = new ResizeObserver(([entry]) => {
+          if (!entry) {
+            return
+          }
+
+          const nextSize = {
+            height: Math.max(1, Math.round(entry.contentRect.height)),
+            width: Math.max(1, Math.round(entry.contentRect.width)),
+          }
+
+          useEditorStore.getState().setCanvasSize(nextSize.width, nextSize.height)
+          renderer.resize(nextSize, getPixelRatio())
+        })
+
+        resizeObserver.observe(viewportElement)
+
+        const renderFrame = (now: number) => {
+          const layerState = useLayerStore.getState()
+          const assetState = useAssetStore.getState()
+          const editorState = useEditorStore.getState()
+          const delta = Math.max(0, (now - lastFrameTime) / 1000)
+
+          lastFrameTime = now
+          previewTime += delta
+
+          let timelineState = useTimelineStore.getState()
+
+          if (timelineState.isPlaying) {
+            timelineState.advance(delta)
+            timelineState = useTimelineStore.getState()
+          }
+
+          if (delta > 0) {
+            editorState.setFps(1 / delta)
+          }
+
+          const frame = buildRendererFrame({
+            assets: assetState.assets,
+            clockTime: timelineState.isPlaying ? timelineState.currentTime : previewTime,
+            delta,
+            layers: layerState.layers,
+            outputSize: editorState.outputSize,
+            pixelRatio: getPixelRatio(),
+            startupPreviewDismissed: editorState.startupPreviewDismissed,
+            timeline: timelineState,
+            viewportSize: editorState.canvasSize,
+          })
+
+          renderer.render(frame)
+          animationFrameRef.current = window.requestAnimationFrame(renderFrame)
+        }
+
+        animationFrameRef.current = window.requestAnimationFrame(renderFrame)
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Renderer initialization failed."
+
+        useEditorStore.getState().setWebGPUStatus("error", message)
+        setFallbackMessage(message)
+      }
+    }
+
+    void initializeRenderer()
+
+    return () => {
+      isDisposed = true
+
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+
+      if (animationFrameRef.current !== null) {
+        window.cancelAnimationFrame(animationFrameRef.current)
+      }
+
+      rendererRef.current?.dispose()
+      rendererRef.current = null
+      setIsReady(false)
+    }
+  }, [])
+
+  return {
+    canvasRef,
+    fallbackMessage,
+    isReady,
+    viewportRef,
+  }
+}

package/src/lib/app.ts

@@ -0,0 +1,6 @@
+export const APP_NAME = "ShaderLab"
+export const APP_DEFAULT_TITLE = "Shader Lab"
+export const APP_TITLE_TEMPLATE = "%s | Shader Lab"
+export const APP_DESCRIPTION = "It's shading time"
+export const APP_BASE_URL =
+  process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"

package/src/lib/cn.ts

@@ -0,0 +1,7 @@
+import { cx } from "class-variance-authority"
+import type { ClassValue } from "class-variance-authority/types"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(cx(inputs))
+}

package/src/lib/easings.ts

@@ -0,0 +1,240 @@
+/**
+ * Easing Functions
+ *
+ * A complete collection of easing curves for animations.
+ * All functions take a progress value (0-1) and return an eased value (0-1).
+ *
+ * @see https://easings.net for visual references
+ *
+ * @example
+ * ```ts
+ * import { easings, type EasingName } from '@/utils/easings'
+ *
+ * // Direct usage
+ * const eased = easings.easeOutCubic(0.5)
+ *
+ * // With a variable easing name
+ * const easingName: EasingName = 'easeInOutQuart'
+ * const value = easings[easingName](progress)
+ * ```
+ *
+ * ## Choosing an Easing
+ *
+ * | Category | Use Case |
+ * |----------|----------|
+ * | `easeOut*` | UI feedback, appearing elements (most common) |
+ * | `easeIn*` | Exiting elements, building tension |
+ * | `easeInOut*` | State transitions, loading indicators |
+ * | `*Cubic/Quart` | Natural, balanced motion |
+ * | `*Expo` | Dramatic, snappy motion |
+ * | `*Elastic/Bounce` | Playful, attention-grabbing |
+ */
+
+const pow = Math.pow
+const sqrt = Math.sqrt
+const sin = Math.sin
+const cos = Math.cos
+const PI = Math.PI
+
+// Easing constants
+const c1 = 1.70158
+const c2 = c1 * 1.525
+const c3 = c1 + 1
+const c4 = (2 * PI) / 3
+const c5 = (2 * PI) / 4.5
+
+/** Bounce out helper (used by bounce easings) */
+const bounceOut = (x: number): number => {
+  const n1 = 7.5625
+  const d1 = 2.75
+
+  if (x < 1 / d1) {
+    return n1 * x * x
+  }
+  if (x < 2 / d1) {
+    return n1 * (x - 1.5 / d1) * x + 0.75
+  }
+  if (x < 2.5 / d1) {
+    return n1 * (x - 2.25 / d1) * x + 0.9375
+  }
+  return n1 * (x - 2.625 / d1) * x + 0.984375
+}
+
+/**
+ * Collection of easing functions.
+ * Each function takes progress (0-1) and returns eased value (0-1).
+ */
+export const easings = {
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Linear (no easing)
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** No easing - constant speed */
+  linear: (x: number): number => x,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Quadratic (power of 2)
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Slow start */
+  easeInQuad: (x: number): number => x * x,
+
+  /** Slow end */
+  easeOutQuad: (x: number): number => 1 - (1 - x) * (1 - x),
+
+  /** Slow start and end */
+  easeInOutQuad: (x: number): number =>
+    x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Cubic (power of 3) - Most commonly used
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Slow start, natural feel */
+  easeInCubic: (x: number): number => x * x * x,
+
+  /** Slow end, natural feel - great for UI interactions */
+  easeOutCubic: (x: number): number => 1 - pow(1 - x, 3),
+
+  /** Smooth start and end - great for transitions */
+  easeInOutCubic: (x: number): number =>
+    x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Quartic (power of 4)
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Slower start than cubic */
+  easeInQuart: (x: number): number => x * x * x * x,
+
+  /** Slower end than cubic */
+  easeOutQuart: (x: number): number => 1 - pow(1 - x, 4),
+
+  /** More pronounced ease than cubic */
+  easeInOutQuart: (x: number): number =>
+    x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Quintic (power of 5)
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Very slow start */
+  easeInQuint: (x: number): number => x * x * x * x * x,
+
+  /** Very slow end */
+  easeOutQuint: (x: number): number => 1 - pow(1 - x, 5),
+
+  /** Very pronounced ease */
+  easeInOutQuint: (x: number): number =>
+    x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Sinusoidal - Gentle, wave-like
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Gentle slow start */
+  easeInSine: (x: number): number => 1 - cos((x * PI) / 2),
+
+  /** Gentle slow end */
+  easeOutSine: (x: number): number => sin((x * PI) / 2),
+
+  /** Gentle ease both ends */
+  easeInOutSine: (x: number): number => -(cos(PI * x) - 1) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Exponential - Dramatic, snappy
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Dramatic slow start - almost stationary then fast */
+  easeInExpo: (x: number): number => (x === 0 ? 0 : pow(2, 10 * x - 10)),
+
+  /** Dramatic slow end - fast then almost stops */
+  easeOutExpo: (x: number): number => (x === 1 ? 1 : 1 - pow(2, -10 * x)),
+
+  /** Dramatic both ends */
+  easeInOutExpo: (x: number): number => {
+    if (x === 0) return 0
+    if (x === 1) return 1
+    if (x < 0.5) return pow(2, 20 * x - 10) / 2
+    return (2 - pow(2, -20 * x + 10)) / 2
+  },
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Circular - Based on circle quarter
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Circular slow start */
+  easeInCirc: (x: number): number => 1 - sqrt(1 - pow(x, 2)),
+
+  /** Circular slow end */
+  easeOutCirc: (x: number): number => sqrt(1 - pow(x - 1, 2)),
+
+  /** Circular both ends */
+  easeInOutCirc: (x: number): number =>
+    x < 0.5
+      ? (1 - sqrt(1 - pow(2 * x, 2))) / 2
+      : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Back - Overshoots then returns
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Pulls back before accelerating */
+  easeInBack: (x: number): number => c3 * x * x * x - c1 * x * x,
+
+  /** Overshoots target then settles */
+  easeOutBack: (x: number): number =>
+    1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2),
+
+  /** Pulls back, overshoots, settles */
+  easeInOutBack: (x: number): number =>
+    x < 0.5
+      ? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
+      : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Elastic - Spring-like oscillation
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Wobbles at start */
+  easeInElastic: (x: number): number => {
+    if (x === 0) return 0
+    if (x === 1) return 1
+    return -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4)
+  },
+
+  /** Wobbles at end - great for attention */
+  easeOutElastic: (x: number): number => {
+    if (x === 0) return 0
+    if (x === 1) return 1
+    return pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1
+  },
+
+  /** Wobbles both ends */
+  easeInOutElastic: (x: number): number => {
+    if (x === 0) return 0
+    if (x === 1) return 1
+    if (x < 0.5) return -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2
+    return (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1
+  },
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Bounce - Ball bouncing effect
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  /** Bounces at start */
+  easeInBounce: (x: number): number => 1 - bounceOut(1 - x),
+
+  /** Bounces at end - like a ball settling */
+  easeOutBounce: bounceOut,
+
+  /** Bounces both ends */
+  easeInOutBounce: (x: number): number =>
+    x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
+} as const
+
+/** All available easing function names */
+export type EasingName = keyof typeof easings
+
+/** An easing function signature */
+export type EasingFunction = (progress: number) => number