@basementstudio/shader-lab 0.1.0

package/src/app/globals.css

@@ -0,0 +1,280 @@
+@import "tailwindcss";
+
+@theme {
+  --color-canvas: #080808;
+  --color-surface-active: rgb(255 255 255 / 0.08);
+  --color-surface-control: rgb(255 255 255 / 0.06);
+  --color-surface-subtle: rgb(255 255 255 / 0.04);
+  --color-surface-disabled: rgb(255 255 255 / 0.03);
+  --color-text-primary: rgb(255 255 255 / 0.9);
+  --color-text-secondary: rgb(255 255 255 / 0.5);
+  --color-text-tertiary: rgb(255 255 255 / 0.35);
+  --color-text-muted: rgb(255 255 255 / 0.25);
+  --color-text-disabled: rgb(255 255 255 / 0.16);
+  --color-text-on-light: rgb(0 0 0 / 0.9);
+  --color-border-divider: rgb(255 255 255 / 0.07);
+  --color-border-active: rgb(255 255 255 / 0.14);
+}
+
+@layer base {
+  *:where(
+      :not(
+          html,
+          iframe,
+          canvas,
+          img,
+          svg,
+          video,
+          audio,
+          dialog,
+          vercel-live-feedback,
+          nextjs-portal,
+          :where(select, option)
+        ):not(svg *, symbol *)
+    ) {
+    all: unset;
+    display: revert;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    --scrollbar-gutter: 0px;
+    --device-width: 640;
+    --device-height: 650;
+    --columns: 4;
+    --gap: 16px;
+    --safe: 16px;
+    --header-height: 58px;
+    --layout-width: calc(100vw - (2 * var(--safe)));
+    --column-width: calc(
+      (var(--layout-width) - (var(--columns) - 1) * var(--gap)) /
+        var(--columns)
+    );
+    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --ds-font-sans: var(--geist-sans);
+    --ds-font-mono: var(--geist-mono);
+    --ds-color-canvas: #080808;
+    --ds-color-glass-panel: rgb(18 18 22 / 0.55);
+    --ds-color-glass-pill: rgb(18 18 22 / 0.5);
+    --ds-color-surface-active: rgb(255 255 255 / 0.08);
+    --ds-color-surface-control: rgb(255 255 255 / 0.06);
+    --ds-color-surface-subtle: rgb(255 255 255 / 0.04);
+    --ds-color-surface-disabled: rgb(255 255 255 / 0.03);
+    --ds-color-text-primary: rgb(255 255 255 / 0.9);
+    --ds-color-text-secondary: rgb(255 255 255 / 0.5);
+    --ds-color-text-tertiary: rgb(255 255 255 / 0.35);
+    --ds-color-text-muted: rgb(255 255 255 / 0.25);
+    --ds-color-text-disabled: rgb(255 255 255 / 0.16);
+    --ds-color-text-on-light: rgb(0 0 0 / 0.9);
+    --ds-border-panel: rgb(255 255 255 / 0.1);
+    --ds-border-panel-strong: rgb(255 255 255 / 0.14);
+    --ds-border-divider: rgb(255 255 255 / 0.07);
+    --ds-border-subtle: rgb(255 255 255 / 0.04);
+    --ds-border-hover: rgb(255 255 255 / 0.12);
+    --ds-border-active: rgb(255 255 255 / 0.14);
+    --ds-border-disabled: rgb(255 255 255 / 0.05);
+    --ds-radius-slider-knob: 3px;
+    --ds-radius-thumb: 4px;
+    --ds-radius-icon: 6px;
+    --ds-radius-control: 8px;
+    --ds-radius-bar: 10px;
+    --ds-radius-panel: 12px;
+    --ds-space-1: 4px;
+    --ds-space-1_5: 6px;
+    --ds-space-2: 8px;
+    --ds-space-2_5: 10px;
+    --ds-space-3: 12px;
+    --ds-space-3_5: 14px;
+    --ds-space-4: 16px;
+    --ds-space-5: 20px;
+    --ds-space-6: 24px;
+    --ds-space-8: 32px;
+    --ds-blur-glass: blur(24px);
+    --ds-shadow-panel-dark: 0 8px 32px rgb(0 0 0 / 0.4);
+    --ds-shadow-pill-dark: 0 4px 20px rgb(0 0 0 / 0.35);
+    color-scheme: dark;
+    scrollbar-gutter: stable;
+    text-rendering: optimizeLegibility;
+    text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: none;
+  }
+
+  @media (width >= 1440px) {
+    html {
+      --device-width: 1440;
+      --device-height: 816;
+      --columns: 12;
+      --header-height: 98px;
+    }
+  }
+
+  body {
+    min-height: 100vh;
+    overscroll-behavior: none;
+    background:
+      radial-gradient(circle at top, rgb(255 255 255 / 0.05), transparent 38%),
+      var(--ds-color-canvas);
+    color: var(--ds-color-text-primary);
+    display: flex;
+    flex-direction: column;
+    font-family: var(--ds-font-sans);
+    isolation: isolate;
+    position: relative;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a,
+  button {
+    cursor: revert;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  button {
+    font-family: inherit;
+    user-select: none;
+  }
+
+  ol,
+  ul,
+  menu,
+  summary {
+    list-style: none;
+  }
+
+  img,
+  video,
+  audio {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  textarea {
+    white-space: revert;
+  }
+
+  ::placeholder {
+    color: unset;
+  }
+
+  :where([hidden]) {
+    display: none;
+  }
+
+  *:focus-visible {
+    outline: 1px solid var(--ds-border-active);
+    outline-offset: 2px;
+  }
+
+  *::selection {
+    background-color: var(--ds-color-surface-active);
+    color: var(--ds-color-text-primary);
+  }
+
+  svg.icon path[fill],
+  svg.icon rect[fill],
+  svg.icon circle[fill] {
+    fill: currentColor;
+  }
+
+  svg.icon path[stroke],
+  svg.icon rect[stroke],
+  svg.icon circle[stroke] {
+    stroke: currentColor;
+  }
+
+  img,
+  html.scrollbar-grabbing {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+
+@layer components {
+  .type-display {
+    font-family: var(--ds-font-sans);
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 48px;
+    letter-spacing: -0.03em;
+  }
+
+  .type-heading {
+    font-family: var(--ds-font-sans);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 29px;
+    letter-spacing: -0.02em;
+  }
+
+  .type-title {
+    font-family: var(--ds-font-sans);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: -0.01em;
+  }
+
+  .type-body {
+    font-family: var(--ds-font-sans);
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: -0.01em;
+  }
+
+  .type-label {
+    font-family: var(--ds-font-sans);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+  .type-caption {
+    font-family: var(--ds-font-sans);
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 14px;
+  }
+
+  .type-overline {
+    font-family: var(--ds-font-sans);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 12px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .type-mono-md {
+    font-family: var(--ds-font-mono);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+  .type-mono-sm {
+    font-family: var(--ds-font-mono);
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 14px;
+  }
+
+  .type-mono-xs {
+    font-family: var(--ds-font-mono);
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 12px;
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,89 @@
+import type { Metadata, Viewport } from "next"
+import { Geist } from "next/font/google"
+import type { PropsWithChildren } from "react"
+import {
+  APP_BASE_URL,
+  APP_DEFAULT_TITLE,
+  APP_DESCRIPTION,
+  APP_NAME,
+  APP_TITLE_TEMPLATE,
+} from "@/lib/app"
+import { cn } from "@/lib/cn"
+import { fontsVariable } from "@/lib/fonts"
+import "@/app/globals.css"
+
+const geist = Geist({
+  subsets: ["latin"],
+  variable: "--geist-sans",
+})
+
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "/",
+    languages: {
+      "en-US": "/en-US",
+    },
+  },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: APP_DEFAULT_TITLE,
+  },
+  applicationName: APP_NAME,
+  authors: [{ name: "basement.studio", url: "https://basement.studio" }],
+  description: APP_DESCRIPTION,
+  formatDetection: { telephone: false },
+  metadataBase: new URL(APP_BASE_URL),
+  openGraph: {
+    description: APP_DESCRIPTION,
+    images: [
+      {
+        alt: APP_DEFAULT_TITLE,
+        height: 630,
+        url: "/opengraph-image.jpg",
+        width: 1200,
+      },
+    ],
+    locale: "en_US",
+    siteName: APP_NAME,
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    type: "website",
+    url: APP_BASE_URL,
+  },
+  other: {
+    "fb:app_id": process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || "",
+  },
+  title: {
+    default: APP_DEFAULT_TITLE,
+    template: APP_TITLE_TEMPLATE,
+  },
+  twitter: {
+    card: "summary_large_image",
+    description: APP_DESCRIPTION,
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+  },
+}
+
+export const viewport: Viewport = {
+  colorScheme: "normal",
+  themeColor: "#080808",
+}
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html
+      lang="en"
+      dir="ltr"
+      className={cn(fontsVariable, geist.variable, geist.className)}
+      suppressHydrationWarning
+    >
+      <body>{children}</body>
+    </html>
+  )
+}

package/src/app/page.tsx

@@ -0,0 +1,20 @@
+import { EditorCanvasViewport } from "@/components/editor/editor-canvas-viewport"
+import { EditorTimelineOverlay } from "@/components/editor/editor-timeline-overlay"
+import { EditorTopBar } from "@/components/editor/editor-topbar"
+import { LayerSidebar } from "@/components/editor/layer-sidebar"
+import { PropertiesSidebar } from "@/components/editor/properties-sidebar"
+
+export default function HomePage() {
+  return (
+    <main
+      id="main-content"
+      className="relative h-screen w-screen overflow-hidden bg-[var(--ds-color-canvas)]"
+    >
+      <EditorCanvasViewport />
+      <EditorTimelineOverlay />
+      <EditorTopBar />
+      <LayerSidebar />
+      <PropertiesSidebar />
+    </main>
+  )
+}

package/src/app/robots.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next"
+import { APP_BASE_URL } from "@/lib/app"
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: [],
+    },
+    sitemap: `${APP_BASE_URL}/sitemap.xml`,
+  }
+}

package/src/app/sitemap.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next"
+import { APP_BASE_URL } from "@/lib/app"
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: APP_BASE_URL,
+      lastModified: new Date(),
+      changeFrequency: "daily",
+      priority: 1,
+    },
+  ]
+}

package/src/components/editor/editor-canvas-viewport.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useEffect } from "react"
+import { useEditorRenderer } from "@/hooks/use-editor-renderer"
+import { useEditorStore } from "@/store/editor-store"
+import { applyZoomAtPoint, clampZoom, getWheelZoomFactor } from "@/lib/editor/view-transform"
+
+export function EditorCanvasViewport() {
+  const { canvasRef, fallbackMessage, isReady, viewportRef } = useEditorRenderer()
+  const immersiveCanvas = useEditorStore((state) => state.immersiveCanvas)
+  const exitImmersiveCanvas = useEditorStore((state) => state.exitImmersiveCanvas)
+  const panOffset = useEditorStore((state) => state.panOffset)
+  const webgpuStatus = useEditorStore((state) => state.webgpuStatus)
+  const zoom = useEditorStore((state) => state.zoom)
+
+  useEffect(() => {
+    if (!immersiveCanvas) {
+      return
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        exitImmersiveCanvas()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [exitImmersiveCanvas, immersiveCanvas])
+
+  useEffect(() => {
+    const viewportElement = viewportRef.current
+
+    if (!viewportElement) {
+      return
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      const shouldZoom = event.metaKey || event.ctrlKey
+
+      if (!shouldZoom) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const rect = viewportElement.getBoundingClientRect()
+      const state = useEditorStore.getState()
+      const pointer = {
+        x: event.clientX - rect.left - rect.width / 2,
+        y: event.clientY - rect.top - rect.height / 2,
+      }
+      const nextZoom = clampZoom(state.zoom * getWheelZoomFactor(event.deltaY))
+      const nextState = applyZoomAtPoint(state.zoom, state.panOffset, pointer, nextZoom)
+
+      state.setZoom(nextState.zoom)
+      state.setPan(nextState.panOffset.x, nextState.panOffset.y)
+    }
+
+    viewportElement.addEventListener("wheel", handleWheel, { passive: false })
+
+    return () => {
+      viewportElement.removeEventListener("wheel", handleWheel)
+    }
+  }, [viewportRef])
+
+  return (
+    <>
+      <div ref={viewportRef} className="absolute inset-0 overflow-hidden">
+        <div className="absolute inset-0" style={{ transform: `translate3d(${panOffset.x}px, ${panOffset.y}px, 0)` }}>
+          <div
+            className="absolute inset-0"
+            style={{ transform: `scale(${zoom})`, transformOrigin: "center center" }}
+          >
+            <canvas
+              data-editor-canvas="true"
+              ref={canvasRef}
+              className="absolute inset-0 h-full w-full [image-rendering:pixelated]"
+            />
+            {immersiveCanvas ? (
+              <>
+                <div
+                  aria-hidden="true"
+                  className="absolute top-0 left-0 z-30 h-full w-8"
+                  onPointerEnter={exitImmersiveCanvas}
+                />
+                <div
+                  aria-hidden="true"
+                  className="absolute top-0 right-0 z-30 h-full w-8"
+                  onPointerEnter={exitImmersiveCanvas}
+                />
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      {!isReady ? (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center p-6">
+          <div className="max-w-sm rounded-xl border border-white/10 bg-[rgba(18,18,22,0.55)] px-5 py-4 text-center shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-[24px]">
+            <p className="font-mono text-[10px] text-white/35 uppercase tracking-[0.06em]">
+              Renderer {webgpuStatus}
+            </p>
+            <p className="mt-2 text-sm text-white/75">
+              {fallbackMessage ?? "Initializing the editor canvas."}
+            </p>
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}