@basementstudio/shader-lab 0.1.0

package/src/components/editor/layer-sidebar.tsx

@@ -0,0 +1,738 @@
+"use client"
+import {
+  CameraIcon,
+  DotsSixVerticalIcon,
+  DotsThreeVerticalIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  FolderIcon,
+  ImageSquareIcon,
+  PlusIcon,
+  SidebarSimpleIcon,
+  SparkleIcon,
+  TextTIcon,
+} from "@phosphor-icons/react"
+import { Reorder, useDragControls } from "motion/react"
+import {
+  type ChangeEvent,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { GlassPanel } from "@/components/ui/glass-panel"
+import { IconButton } from "@/components/ui/icon-button"
+import { Select } from "@/components/ui/select"
+import { Typography } from "@/components/ui/typography"
+import { cn } from "@/lib/cn"
+import { useAssetStore } from "@/store/asset-store"
+import { useEditorStore } from "@/store/editor-store"
+import { useLayerStore } from "@/store/layer-store"
+import type { AssetKind, EditorAsset, EditorLayer } from "@/types/editor"
+
+type AddLayerAction =
+  | "ascii"
+  | "crt"
+  | "custom-shader"
+  | "dithering"
+  | "gradient"
+  | "halftone"
+  | "image"
+  | "ink"
+  | "live"
+  | "particle-grid"
+  | "pattern"
+  | "pixel-sorting"
+  | "text"
+  | "video"
+type LayerAction = "delete" | "reset"
+
+const menuButtonClassName = "inline-flex items-center gap-[var(--ds-space-2)]"
+const thumbnailBaseClassName =
+  "relative h-7 w-7 overflow-hidden rounded-[var(--ds-radius-thumb)] border border-white/6 bg-[linear-gradient(135deg,rgb(255_255_255_/_0.07),rgb(255_255_255_/_0.03))]"
+
+const addLayerOptions = [
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <ImageSquareIcon size={14} weight="regular" />
+        Image
+      </span>
+    ),
+    value: "image",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <ImageSquareIcon size={14} weight="regular" />
+        Video
+      </span>
+    ),
+    value: "video",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <CameraIcon size={14} weight="regular" />
+        Camera
+      </span>
+    ),
+    value: "live",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <TextTIcon size={14} weight="regular" />
+        Text
+      </span>
+    ),
+    value: "text",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Mesh Gradient
+      </span>
+    ),
+    value: "gradient",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Ink
+      </span>
+    ),
+    value: "ink",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Custom Shader
+      </span>
+    ),
+    value: "custom-shader" as const,
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        ASCII
+      </span>
+    ),
+    value: "ascii",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Pattern
+      </span>
+    ),
+    value: "pattern",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        CRT
+      </span>
+    ),
+    value: "crt",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Dithering
+      </span>
+    ),
+    value: "dithering",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Halftone
+      </span>
+    ),
+    value: "halftone",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Particle Grid
+      </span>
+    ),
+    value: "particle-grid",
+  },
+  {
+    label: (
+      <span className={menuButtonClassName}>
+        <SparkleIcon size={14} weight="regular" />
+        Pixel Sorting
+      </span>
+    ),
+    value: "pixel-sorting",
+  },
+] as const satisfies readonly { label: ReactNode; value: AddLayerAction }[]
+
+function getLayerSecondaryText(
+  layer: EditorLayer,
+  asset: EditorAsset | null
+): string {
+  if (layer.runtimeError) {
+    return layer.runtimeError
+  }
+
+  if (
+    layer.type === "image" ||
+    layer.type === "video" ||
+    layer.type === "model"
+  ) {
+    return asset?.fileName ?? "No asset selected"
+  }
+
+  if (layer.type === "live") {
+    return "webcam"
+  }
+
+  if (layer.type === "custom-shader") {
+    return (
+      (typeof layer.params.sourceFileName === "string" &&
+        layer.params.sourceFileName) ||
+      "custom shader"
+    )
+  }
+
+  if (layer.type === "text") {
+    return (
+      (typeof layer.params.text === "string" && layer.params.text.trim()) ||
+      "text"
+    )
+  }
+
+  return layer.type.replaceAll("-", " ")
+}
+
+function getThumbnailClassName(
+  layer: EditorLayer,
+  asset: EditorAsset | null
+): string {
+  if (asset?.kind === "image" || asset?.kind === "video") {
+    return cn(thumbnailBaseClassName, "bg-center bg-cover")
+  }
+
+  if (layer.type === "model") {
+    return cn(
+      thumbnailBaseClassName,
+      "bg-[radial-gradient(circle_at_30%_30%,rgb(255_255_255_/_0.18),transparent_45%),linear-gradient(135deg,rgb(255_255_255_/_0.08),rgb(255_255_255_/_0.02))]"
+    )
+  }
+
+  return cn(
+    thumbnailBaseClassName,
+    "bg-[linear-gradient(135deg,rgb(255_255_255_/_0.1),rgb(255_255_255_/_0.03)),linear-gradient(180deg,rgb(255_255_255_/_0.05),transparent)] after:absolute after:inset-0 after:bg-[linear-gradient(90deg,transparent,rgb(255_255_255_/_0.18),transparent)] after:opacity-[0.35] after:content-['']"
+  )
+}
+
+function getExpectedAssetKind(layer: EditorLayer): AssetKind | null {
+  if (
+    layer.type === "image" ||
+    layer.type === "video" ||
+    layer.type === "model"
+  ) {
+    return layer.type
+  }
+
+  return null
+}
+
+function getAcceptForAssetKind(kind: AssetKind): string {
+  switch (kind) {
+    case "image":
+      return "image/png,image/jpeg,image/webp,image/gif"
+    case "video":
+      return "video/mp4,video/webm"
+    case "model":
+      return ".glb,.gltf,.obj,model/gltf-binary,model/gltf+json,model/obj,application/octet-stream"
+  }
+}
+
+function inferSelectedFileKind(file: File): AssetKind | null {
+  const mimeType = file.type.toLowerCase()
+  const fileName = file.name.toLowerCase()
+
+  if (mimeType.startsWith("image/")) {
+    return "image"
+  }
+
+  if (mimeType.startsWith("video/")) {
+    return "video"
+  }
+
+  if (
+    fileName.endsWith(".glb") ||
+    fileName.endsWith(".gltf") ||
+    fileName.endsWith(".obj") ||
+    mimeType === "model/gltf-binary" ||
+    mimeType === "model/gltf+json" ||
+    mimeType === "model/obj"
+  ) {
+    return "model"
+  }
+
+  return null
+}
+
+type LayerListItemProps = {
+  asset: EditorAsset | null
+  hasMissingAsset: boolean
+  isSelected: boolean
+  layer: EditorLayer
+  layerActionKey: number
+  onLayerAction: (layerId: string, action: LayerAction) => void
+  onRelinkPick: (layer: EditorLayer) => void
+  onSelectLayer: (layerId: string) => void
+  onSetLayerVisibility: (layerId: string, visible: boolean) => void
+}
+
+function LayerListItem({
+  asset,
+  hasMissingAsset,
+  isSelected,
+  layer,
+  layerActionKey,
+  onLayerAction,
+  onRelinkPick,
+  onSelectLayer,
+  onSetLayerVisibility,
+}: LayerListItemProps) {
+  const dragControls = useDragControls()
+  const layerActionOptions = [
+    { label: "Reset properties", value: "reset" },
+    { label: "Delete layer", value: "delete" },
+  ] as const satisfies readonly {
+    label: ReactNode
+    value: LayerAction
+  }[]
+
+  function handlePointerDown(event: ReactPointerEvent<HTMLButtonElement>) {
+    if (layer.locked) {
+      return
+    }
+
+    dragControls.start(event)
+  }
+
+  return (
+    <Reorder.Item
+      as="li"
+      className={cn(
+        "relative grid min-h-11 grid-cols-[minmax(0,1fr)_28px_28px] items-center gap-[var(--ds-space-2)] rounded-[var(--ds-radius-control)] border border-transparent px-2 py-[6px] transition-[background-color,border-color,box-shadow] duration-160 ease-[var(--ease-out-cubic)]",
+        !layer.locked &&
+          "cursor-pointer hover:border-[var(--ds-border-subtle)] hover:bg-[var(--ds-color-surface-subtle)]",
+        isSelected &&
+          "border-[var(--ds-border-active)] bg-[var(--ds-color-surface-active)]"
+      )}
+      drag={layer.locked ? false : "y"}
+      dragControls={dragControls}
+      dragListener={false}
+      layout="position"
+      style={{ zIndex: 0 }}
+      value={layer}
+    >
+      <div className="grid min-w-0 grid-cols-[14px_minmax(0,1fr)] items-center gap-[var(--ds-space-2)]">
+        <button
+          aria-label={`Reorder ${layer.name}`}
+          className={cn(
+            "inline-flex h-[14px] w-[14px] touch-none items-center justify-center bg-transparent p-0 text-[var(--ds-color-text-muted)]",
+            !layer.locked && "cursor-grab active:cursor-grabbing",
+            layer.locked && "text-[var(--ds-color-text-disabled)]"
+          )}
+          onPointerDown={handlePointerDown}
+          type="button"
+        >
+          <DotsSixVerticalIcon size={14} weight="bold" />
+        </button>
+
+        <button
+          className="grid min-w-0 grid-cols-[28px_minmax(0,1fr)] items-center gap-[var(--ds-space-2)] bg-transparent p-0 text-left text-inherit"
+          onClick={() => onSelectLayer(layer.id)}
+          type="button"
+        >
+          <div
+            className={getThumbnailClassName(layer, asset)}
+            style={
+              asset?.kind === "image" || asset?.kind === "video"
+                ? { backgroundImage: `url("${asset.url}")` }
+                : undefined
+            }
+          />
+
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <Typography
+              className="overflow-hidden text-ellipsis whitespace-nowrap"
+              variant="label"
+            >
+              {layer.name}
+            </Typography>
+            <Typography
+              className="overflow-hidden text-ellipsis whitespace-nowrap"
+              tone="muted"
+              variant="monoXs"
+            >
+              {getLayerSecondaryText(layer, asset)}
+            </Typography>
+          </div>
+        </button>
+      </div>
+
+      <Select
+        key={`${layer.id}:${layerActionKey}`}
+        onValueChange={(value) => onLayerAction(layer.id, value as LayerAction)}
+        options={layerActionOptions}
+        placeholder={<DotsThreeVerticalIcon size={14} weight="bold" />}
+        popupClassName="min-w-[152px]"
+        triggerAriaLabel={`Layer actions for ${layer.name}`}
+        triggerVariant="icon"
+        valueClassName="inline-flex items-center justify-center leading-none text-[var(--ds-color-text-tertiary)] [&_svg]:h-[14px] [&_svg]:w-[14px]"
+      />
+
+      {hasMissingAsset ? (
+        <IconButton
+          aria-label={`Relink missing asset for ${layer.name}`}
+          onClick={(event) => {
+            event.stopPropagation()
+            onRelinkPick(layer)
+          }}
+          variant="ghost"
+        >
+          <FolderIcon size={14} weight="regular" />
+        </IconButton>
+      ) : (
+        <IconButton
+          aria-label={layer.visible ? "Hide layer" : "Show layer"}
+          onClick={(event) => {
+            event.stopPropagation()
+            onSetLayerVisibility(layer.id, !layer.visible)
+          }}
+          variant="ghost"
+        >
+          {layer.visible ? (
+            <EyeIcon size={14} weight="regular" />
+          ) : (
+            <EyeSlashIcon size={14} weight="regular" />
+          )}
+        </IconButton>
+      )}
+    </Reorder.Item>
+  )
+}
+
+export function LayerSidebar() {
+  const imageInputRef = useRef<HTMLInputElement | null>(null)
+  const relinkInputRef = useRef<HTMLInputElement | null>(null)
+  const relinkTargetRef = useRef<{
+    expectedKind: AssetKind
+    layerId: string
+  } | null>(null)
+  const videoInputRef = useRef<HTMLInputElement | null>(null)
+  const [addLayerSelectKey, setAddLayerSelectKey] = useState(0)
+  const [layerActionSelectKeys, setLayerActionSelectKeys] = useState<
+    Record<string, number>
+  >({})
+
+  const layers = useLayerStore((state) => state.layers)
+  const hoveredLayerId = useLayerStore((state) => state.hoveredLayerId)
+  const selectedLayerId = useLayerStore((state) => state.selectedLayerId)
+  const addLayer = useLayerStore((state) => state.addLayer)
+  const removeLayer = useLayerStore((state) => state.removeLayer)
+  const replaceState = useLayerStore((state) => state.replaceState)
+  const resetLayerParams = useLayerStore((state) => state.resetLayerParams)
+  const selectLayer = useLayerStore((state) => state.selectLayer)
+  const setLayerAsset = useLayerStore((state) => state.setLayerAsset)
+  const setLayerRuntimeError = useLayerStore(
+    (state) => state.setLayerRuntimeError
+  )
+  const setLayerVisibility = useLayerStore((state) => state.setLayerVisibility)
+  const assets = useAssetStore((state) => state.assets)
+  const loadAsset = useAssetStore((state) => state.loadAsset)
+  const removeAsset = useAssetStore((state) => state.removeAsset)
+  const leftSidebarVisible = useEditorStore((state) => state.sidebars.left)
+  const enterImmersiveCanvas = useEditorStore(
+    (state) => state.enterImmersiveCanvas
+  )
+
+  const assetsById = useMemo(
+    () => new Map(assets.map((asset) => [asset.id, asset])),
+    [assets]
+  )
+
+  async function handleMediaFile(file: File, layerType: "image" | "video") {
+    try {
+      const asset = await loadAsset(file)
+      const layerId = addLayer(layerType)
+      setLayerAsset(layerId, asset.id)
+    } catch {
+      // No-op.
+    }
+  }
+
+  function handleImagePick() {
+    imageInputRef.current?.click()
+  }
+
+  function handleVideoPick() {
+    videoInputRef.current?.click()
+  }
+
+  function handleAddDithering() {
+    addLayer("dithering")
+  }
+
+  function handleAddAscii() {
+    addLayer("ascii")
+  }
+
+  function handleAddGradient() {
+    addLayer("gradient")
+  }
+
+  function handleAddCustomShader() {
+    addLayer("custom-shader")
+  }
+
+  function handleAddLayer(action: AddLayerAction) {
+    if (action === "image") {
+      handleImagePick()
+    } else if (action === "video") {
+      handleVideoPick()
+    } else if (action === "live") {
+      addLayer("live")
+    } else if (action === "text") {
+      addLayer("text")
+    } else if (action === "gradient") {
+      handleAddGradient()
+    } else if (action === "ink") {
+      addLayer("ink")
+    } else if (action === "custom-shader") {
+      handleAddCustomShader()
+    } else if (action === "ascii") {
+      handleAddAscii()
+    } else if (action === "pattern") {
+      addLayer("pattern")
+    } else if (action === "crt") {
+      addLayer("crt")
+    } else if (action === "halftone") {
+      addLayer("halftone")
+    } else if (action === "particle-grid") {
+      addLayer("particle-grid")
+    } else if (action === "pixel-sorting") {
+      addLayer("pixel-sorting")
+    } else {
+      handleAddDithering()
+    }
+
+    setAddLayerSelectKey((current) => current + 1)
+  }
+
+  function handleLayerAction(layerId: string, action: LayerAction) {
+    if (action === "delete") {
+      removeLayer(layerId)
+    } else {
+      resetLayerParams(layerId)
+    }
+
+    setLayerActionSelectKeys((current) => ({
+      ...current,
+      [layerId]: (current[layerId] ?? 0) + 1,
+    }))
+  }
+
+  function handleImageChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+
+    event.currentTarget.value = ""
+
+    if (!file) {
+      return
+    }
+
+    void handleMediaFile(file, "image")
+  }
+
+  function handleVideoChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+
+    event.currentTarget.value = ""
+
+    if (!file) {
+      return
+    }
+
+    void handleMediaFile(file, "video")
+  }
+
+  async function handleRelinkChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    const target = relinkTargetRef.current
+
+    event.currentTarget.value = ""
+    relinkTargetRef.current = null
+
+    if (!(file && target)) {
+      return
+    }
+
+    if (inferSelectedFileKind(file) !== target.expectedKind) {
+      setLayerRuntimeError(
+        target.layerId,
+        `Expected a ${target.expectedKind} file.`
+      )
+      return
+    }
+
+    try {
+      const asset = await loadAsset(file)
+
+      if (asset.kind !== target.expectedKind) {
+        removeAsset(asset.id)
+        setLayerRuntimeError(
+          target.layerId,
+          `Expected a ${target.expectedKind} file.`
+        )
+        return
+      }
+
+      setLayerAsset(target.layerId, asset.id)
+    } catch (error) {
+      setLayerRuntimeError(
+        target.layerId,
+        error instanceof Error ? error.message : "Failed to relink asset."
+      )
+    }
+  }
+
+  function handleRelinkPick(layer: EditorLayer) {
+    const expectedKind = getExpectedAssetKind(layer)
+
+    if (!expectedKind) {
+      return
+    }
+
+    relinkTargetRef.current = {
+      expectedKind,
+      layerId: layer.id,
+    }
+
+    if (relinkInputRef.current) {
+      relinkInputRef.current.accept = getAcceptForAssetKind(expectedKind)
+      relinkInputRef.current.click()
+    }
+  }
+
+  function handleReorder(nextLayers: EditorLayer[]) {
+    replaceState(nextLayers, selectedLayerId, hoveredLayerId)
+  }
+
+  return (
+    <aside
+      className={cn(
+        "pointer-events-none absolute top-[76px] left-4 z-20 w-[284px] translate-x-0 transition-[opacity,translate] duration-[220ms,260ms] ease-[ease-out,cubic-bezier(0.22,1,0.36,1)]",
+        !leftSidebarVisible && "-translate-x-[18px] opacity-0"
+      )}
+    >
+      <input
+        accept="image/png,image/jpeg,image/webp,image/gif"
+        className="hidden"
+        onChange={handleImageChange}
+        ref={imageInputRef}
+        type="file"
+      />
+      <input
+        className="hidden"
+        onChange={handleRelinkChange}
+        ref={relinkInputRef}
+        type="file"
+      />
+      <input
+        accept="video/mp4,video/webm"
+        className="hidden"
+        onChange={handleVideoChange}
+        ref={videoInputRef}
+        type="file"
+      />
+
+      <GlassPanel
+        className={cn(
+          "pointer-events-auto relative flex flex-col gap-[var(--ds-space-1)] p-0",
+          !leftSidebarVisible && "pointer-events-none"
+        )}
+        variant="panel"
+      >
+        <div className="flex min-h-11 items-center justify-between border-[var(--ds-border-divider)] border-b pr-3 pl-[var(--ds-space-4)]">
+          <Typography className="uppercase" tone="secondary" variant="overline">
+            Layers
+          </Typography>
+          <div className="inline-flex items-center gap-1.5">
+            <IconButton
+              aria-label="Enter immersive canvas mode"
+              className="pointer-events-auto"
+              onClick={enterImmersiveCanvas}
+              variant="ghost"
+            >
+              <SidebarSimpleIcon size={14} weight="regular" />
+            </IconButton>
+            <Select
+              key={addLayerSelectKey}
+              className="pointer-events-auto"
+              onValueChange={(value) => handleAddLayer(value as AddLayerAction)}
+              options={addLayerOptions}
+              placeholder={<PlusIcon size={14} weight="bold" />}
+              popupClassName="min-w-[152px]"
+              triggerAriaLabel="Add layer"
+              triggerVariant="icon"
+              valueClassName="inline-flex items-center justify-center leading-none [&_svg]:h-[14px] [&_svg]:w-[14px]"
+            />
+          </div>
+        </div>
+
+        <Reorder.Group
+          axis="y"
+          as="ul"
+          className="flex max-h-[min(52vh,480px)] flex-col gap-0.5 overflow-y-auto p-1"
+          onReorder={handleReorder}
+          values={layers}
+        >
+          {layers.map((layer) => {
+            const asset = layer.assetId
+              ? (assetsById.get(layer.assetId) ?? null)
+              : null
+            const hasMissingAsset = Boolean(layer.assetId && !asset)
+            const isSelected = selectedLayerId === layer.id
+
+            return (
+              <LayerListItem
+                asset={asset}
+                hasMissingAsset={hasMissingAsset}
+                isSelected={isSelected}
+                key={layer.id}
+                layer={layer}
+                layerActionKey={layerActionSelectKeys[layer.id] ?? 0}
+                onLayerAction={handleLayerAction}
+                onRelinkPick={handleRelinkPick}
+                onSelectLayer={selectLayer}
+                onSetLayerVisibility={setLayerVisibility}
+              />
+            )
+          })}
+        </Reorder.Group>
+      </GlassPanel>
+    </aside>
+  )
+}