@basementstudio/shader-lab 0.1.0 → 1.0.2

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

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

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

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

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

@@ -1,240 +0,0 @@
-/**
- * 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