@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -1,421 +0,0 @@
-"use client"
-
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { getLayerDefinition } from "@/lib/editor/config/layer-registry"
-import { evaluateTimelineForLayers } from "@/lib/editor/timeline/evaluate"
-import type {
-  AnimatedPropertyBinding,
-  ParameterDefinition,
-  ParameterValue,
-} from "@/types/editor"
-import { cn } from "@/lib/cn"
-import { GlassPanel } from "@/components/ui/glass-panel"
-import { useAssetStore } from "@/store/asset-store"
-import { useEditorStore } from "@/store/editor-store"
-import { useLayerStore } from "@/store/layer-store"
-import {
-  createLayerPropertyBinding,
-  useTimelineStore,
-} from "@/store/timeline-store"
-import {
-  EmptyPropertiesContent,
-  SelectedLayerPropertiesContent,
-} from "./properties-sidebar-content"
-import {
-  createParamTimelineBinding,
-  getSelectedAsset,
-  hasTrackForBinding,
-  isParamVisible,
-} from "./properties-sidebar-utils"
-
-export function PropertiesSidebar() {
-  const reduceMotion = useReducedMotion() ?? false
-  const [expandedParamGroups, setExpandedParamGroups] = useState<
-    Record<string, boolean>
-  >({})
-  const [panelHeight, setPanelHeight] = useState<number | null>(null)
-  const viewResizeObserverRef = useRef<ResizeObserver | null>(null)
-  const rightSidebarVisible = useEditorStore((state) => state.sidebars.right)
-  const timelinePanelOpen = useEditorStore((state) => state.timelinePanelOpen)
-  const selectedLayerId = useLayerStore((state) => state.selectedLayerId)
-  const selectedLayer = useLayerStore((state) =>
-    selectedLayerId
-      ? (state.layers.find((layer) => layer.id === selectedLayerId) ?? null)
-      : null
-  )
-  const setLayerBlendMode = useLayerStore((state) => state.setLayerBlendMode)
-  const setLayerCompositeMode = useLayerStore(
-    (state) => state.setLayerCompositeMode
-  )
-  const setLayerHue = useLayerStore((state) => state.setLayerHue)
-  const setLayerOpacity = useLayerStore((state) => state.setLayerOpacity)
-  const setLayerSaturation = useLayerStore((state) => state.setLayerSaturation)
-  const updateLayerParam = useLayerStore((state) => state.updateLayerParam)
-  const currentTime = useTimelineStore((state) => state.currentTime)
-  const timelineTracks = useTimelineStore((state) => state.tracks)
-  const upsertKeyframe = useTimelineStore((state) => state.upsertKeyframe)
-  const assets = useAssetStore((state) => state.assets)
-
-  const assetById = useMemo(
-    () => new Map(assets.map((asset) => [asset.id, asset])),
-    [assets]
-  )
-
-  const selectedAsset = selectedLayer
-    ? getSelectedAsset(assetById, selectedLayer.assetId)
-    : null
-  const selectedDefinition = selectedLayer
-    ? getLayerDefinition(selectedLayer.type)
-    : null
-  const selectedVisibleParams = useMemo(() => {
-    if (!(selectedLayer && selectedDefinition)) {
-      return [] as ParameterDefinition[]
-    }
-
-    return selectedDefinition.params.filter((param) =>
-      isParamVisible(param, selectedLayer.params, [
-        ...selectedDefinition.params,
-      ])
-    )
-  }, [selectedDefinition, selectedLayer])
-
-  const selectedLayerTracks = useMemo(
-    () =>
-      selectedLayer
-        ? timelineTracks.filter((track) => track.layerId === selectedLayer.id)
-        : [],
-    [selectedLayer, timelineTracks]
-  )
-
-  const evaluatedSelectedLayer = useMemo(() => {
-    if (
-      !(timelinePanelOpen && selectedLayer && selectedLayerTracks.length > 0)
-    ) {
-      return null
-    }
-
-    return (
-      evaluateTimelineForLayers(
-        [selectedLayer],
-        selectedLayerTracks,
-        currentTime
-      )[0] ?? null
-    )
-  }, [currentTime, selectedLayer, selectedLayerTracks, timelinePanelOpen])
-
-  const displayedLayerState = useMemo(() => {
-    if (!selectedLayer) {
-      return null
-    }
-
-    if (!(timelinePanelOpen && evaluatedSelectedLayer)) {
-      return {
-        hue: selectedLayer.hue,
-        opacity: selectedLayer.opacity,
-        params: selectedLayer.params,
-        saturation: selectedLayer.saturation,
-      }
-    }
-
-    return {
-      hue:
-        typeof evaluatedSelectedLayer.properties.hue === "number"
-          ? evaluatedSelectedLayer.properties.hue
-          : selectedLayer.hue,
-      opacity:
-        typeof evaluatedSelectedLayer.properties.opacity === "number"
-          ? evaluatedSelectedLayer.properties.opacity
-          : selectedLayer.opacity,
-      params: {
-        ...selectedLayer.params,
-        ...evaluatedSelectedLayer.params,
-      },
-      saturation:
-        typeof evaluatedSelectedLayer.properties.saturation === "number"
-          ? evaluatedSelectedLayer.properties.saturation
-          : selectedLayer.saturation,
-    }
-  }, [evaluatedSelectedLayer, selectedLayer, timelinePanelOpen])
-
-  const heightTransition = reduceMotion
-    ? { duration: 0.12, ease: "easeOut" as const }
-    : {
-        damping: 34,
-        mass: 0.9,
-        stiffness: 340,
-        type: "spring" as const,
-      }
-  const exitTransition = reduceMotion
-    ? { duration: 0.1, ease: "easeOut" as const }
-    : {
-        damping: 34,
-        mass: 0.8,
-        stiffness: 380,
-        type: "spring" as const,
-      }
-  const enterTransition = reduceMotion
-    ? { duration: 0.12, ease: "easeOut" as const }
-    : {
-        damping: 34,
-        delay: 0.08,
-        mass: 0.82,
-        stiffness: 380,
-        type: "spring" as const,
-      }
-  const enterAnimation = reduceMotion
-    ? { opacity: 1, transition: { duration: 0.12, ease: "easeOut" as const } }
-    : {
-        opacity: 1,
-        transition: {
-          opacity: { delay: 0.08, duration: 0.12 },
-          y: enterTransition,
-        },
-        y: 0,
-      }
-  const exitAnimation = reduceMotion
-    ? { opacity: 0, transition: { duration: 0.1, ease: "easeOut" as const } }
-    : {
-        opacity: 0,
-        transition: {
-          opacity: { duration: 0.1 },
-          y: exitTransition,
-        },
-        y: -10,
-      }
-
-  const bindMeasuredView = useCallback((node: HTMLDivElement | null) => {
-    viewResizeObserverRef.current?.disconnect()
-    viewResizeObserverRef.current = null
-
-    if (!node) {
-      return
-    }
-
-    const updateHeight = () => {
-      setPanelHeight(Math.ceil(node.getBoundingClientRect().height) + 2)
-    }
-
-    updateHeight()
-
-    const observer = new ResizeObserver(() => {
-      updateHeight()
-    })
-
-    observer.observe(node)
-    viewResizeObserverRef.current = observer
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      viewResizeObserverRef.current?.disconnect()
-    }
-  }, [])
-
-  const handleToggleParamGroup = useCallback((groupId: string) => {
-    setExpandedParamGroups((current) => ({
-      ...current,
-      [groupId]: !(current[groupId] ?? true),
-    }))
-  }, [])
-
-  const handleTimelineKeyframe = useCallback(
-    (
-      binding: AnimatedPropertyBinding,
-      layerId: string,
-      value: ParameterValue
-    ) => {
-      upsertKeyframe({
-        binding,
-        layerId,
-        value,
-      })
-    },
-    [upsertKeyframe]
-  )
-
-  const handleTimelineAwareLayerAdjustment = useCallback(
-    (
-      binding: AnimatedPropertyBinding,
-      value: ParameterValue,
-      fallback: () => void
-    ) => {
-      if (
-        selectedLayer &&
-        timelinePanelOpen &&
-        hasTrackForBinding(selectedLayerTracks, selectedLayer.id, binding)
-      ) {
-        upsertKeyframe({
-          binding,
-          layerId: selectedLayer.id,
-          time: currentTime,
-          value,
-        })
-        return
-      }
-
-      fallback()
-    },
-    [
-      currentTime,
-      selectedLayer,
-      selectedLayerTracks,
-      timelinePanelOpen,
-      upsertKeyframe,
-    ]
-  )
-
-  const handleTimelineAwareParamChange = useCallback(
-    (key: string, value: ParameterValue) => {
-      if (!selectedLayer) {
-        return
-      }
-
-      const definition =
-        selectedVisibleParams.find((param) => param.key === key) ?? null
-      const binding = definition ? createParamTimelineBinding(definition) : null
-
-      if (
-        binding &&
-        timelinePanelOpen &&
-        hasTrackForBinding(selectedLayerTracks, selectedLayer.id, binding)
-      ) {
-        upsertKeyframe({
-          binding,
-          layerId: selectedLayer.id,
-          time: currentTime,
-          value,
-        })
-        return
-      }
-
-      updateLayerParam(selectedLayer.id, key, value)
-    },
-    [
-      currentTime,
-      selectedLayer,
-      selectedLayerTracks,
-      selectedVisibleParams,
-      timelinePanelOpen,
-      updateLayerParam,
-      upsertKeyframe,
-    ]
-  )
-
-  const selectedLayerContentProps = selectedLayer
-    ? {
-        blendMode: selectedLayer.blendMode,
-        compositeMode: selectedLayer.compositeMode,
-        definitionName: selectedDefinition?.defaultName ?? selectedLayer.type,
-        expandedParamGroups,
-        hue: displayedLayerState?.hue ?? selectedLayer.hue,
-        layerId: selectedLayer.id,
-        layerKind: selectedDefinition?.kind ?? "effect",
-        layerName: selectedLayer.name,
-        layerRuntimeError: selectedLayer.runtimeError,
-        layerSubtitle:
-          selectedAsset?.fileName ??
-          (selectedLayer.type === "custom-shader" &&
-          typeof selectedLayer.params.sourceFileName === "string"
-            ? selectedLayer.params.sourceFileName
-            : ""),
-        layerType: selectedLayer.type,
-        onToggleParamGroup: handleToggleParamGroup,
-        onTimelineKeyframe: handleTimelineKeyframe,
-        opacity: displayedLayerState?.opacity ?? selectedLayer.opacity,
-        reduceMotion,
-        saturation: displayedLayerState?.saturation ?? selectedLayer.saturation,
-        setLayerBlendMode,
-        setLayerCompositeMode,
-        setLayerHue: (id: string, value: number) =>
-          handleTimelineAwareLayerAdjustment(
-            createLayerPropertyBinding("hue"),
-            value,
-            () => setLayerHue(id, value)
-          ),
-        setLayerOpacity: (id: string, value: number) =>
-          handleTimelineAwareLayerAdjustment(
-            createLayerPropertyBinding("opacity"),
-            value,
-            () => setLayerOpacity(id, value)
-          ),
-        setLayerSaturation: (id: string, value: number) =>
-          handleTimelineAwareLayerAdjustment(
-            createLayerPropertyBinding("saturation"),
-            value,
-            () => setLayerSaturation(id, value)
-          ),
-        timelinePanelOpen,
-        updateLayerParam: (id: string, key: string, value: ParameterValue) => {
-          if (id === selectedLayer.id) {
-            handleTimelineAwareParamChange(key, value)
-          }
-        },
-        values: displayedLayerState?.params ?? selectedLayer.params,
-        visibleParams: selectedVisibleParams,
-      }
-    : null
-
-  return (
-    <aside
-      className={cn(
-        "pointer-events-none absolute top-[76px] right-4 z-20 w-[300px] translate-x-0 transition-[opacity,translate] duration-[220ms,260ms] ease-[ease-out,cubic-bezier(0.22,1,0.36,1)]",
-        !rightSidebarVisible && "translate-x-[18px] opacity-0"
-      )}
-    >
-      <div
-        aria-hidden="true"
-        className="pointer-events-none invisible absolute top-0 left-0 -z-1 w-full"
-      >
-        <div className="w-full" ref={bindMeasuredView}>
-          {selectedLayerContentProps ? (
-            <SelectedLayerPropertiesContent {...selectedLayerContentProps} />
-          ) : (
-            <EmptyPropertiesContent />
-          )}
-        </div>
-      </div>
-
-      <motion.div
-        className={cn(
-          "pointer-events-auto overflow-hidden rounded-[var(--ds-radius-panel)]",
-          !rightSidebarVisible && "pointer-events-none"
-        )}
-        initial={false}
-        {...(panelHeight === null ? {} : { animate: { height: panelHeight } })}
-        transition={heightTransition}
-      >
-        <GlassPanel
-          className="flex h-full min-h-0 flex-col gap-0 p-0"
-          variant="panel"
-        >
-          <AnimatePresence initial={false} mode="wait">
-            {selectedLayerContentProps ? (
-              <motion.div
-                animate={enterAnimation}
-                className="flex h-full min-h-0 flex-col"
-                exit={exitAnimation}
-                initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10 }}
-                key={selectedLayerContentProps.layerId}
-              >
-                <SelectedLayerPropertiesContent
-                  {...selectedLayerContentProps}
-                />
-              </motion.div>
-            ) : (
-              <motion.div
-                animate={enterAnimation}
-                className="flex h-full min-h-0 flex-col"
-                exit={exitAnimation}
-                initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10 }}
-                key="empty"
-              >
-                <EmptyPropertiesContent />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </GlassPanel>
-      </motion.div>
-    </aside>
-  )
-}

package/src/components/ui/button/index.tsx

@@ -1,57 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import type { ButtonHTMLAttributes, ReactNode } from "react"
-import { cn } from "@/lib/cn"
-
-const buttonVariants = cva(
-  "inline-flex origin-center items-center justify-center gap-2 whitespace-nowrap rounded-[var(--ds-radius-control)] border border-transparent font-[var(--ds-font-sans)] text-[12px] font-medium leading-4 text-decoration-none transition-[background-color,border-color,color,opacity,transform] duration-160 ease-[var(--ease-out-cubic)] will-change-transform disabled:cursor-not-allowed disabled:opacity-100 aria-disabled:cursor-not-allowed aria-disabled:opacity-100 active:scale-[0.98] data-[state=active]:scale-[0.98]",
-  {
-  variants: {
-    variant: {
-      primary:
-        "bg-[var(--ds-color-text-primary)] text-[var(--ds-color-text-on-light)] hover:bg-white/82 active:bg-white/72 disabled:bg-white/18 disabled:text-black/45 aria-disabled:bg-white/18 aria-disabled:text-black/45",
-      secondary:
-        "bg-[var(--ds-color-surface-control)] border-[var(--ds-border-divider)] text-white/70 hover:bg-white/10 hover:border-[var(--ds-border-hover)] hover:text-white/80 active:bg-white/14 active:border-[var(--ds-border-active)] active:text-[var(--ds-color-text-primary)] data-[state=active]:bg-white/14 data-[state=active]:border-[var(--ds-border-active)] data-[state=active]:text-[var(--ds-color-text-primary)] disabled:bg-[var(--ds-color-surface-disabled)] disabled:border-[var(--ds-border-disabled)] disabled:text-[var(--ds-color-text-disabled)] aria-disabled:bg-[var(--ds-color-surface-disabled)] aria-disabled:border-[var(--ds-border-disabled)] aria-disabled:text-[var(--ds-color-text-disabled)]",
-      ghost:
-        "text-[var(--ds-color-text-secondary)] hover:text-[var(--ds-color-text-primary)] active:text-white/72 data-[state=active]:text-white/72 disabled:text-[var(--ds-color-text-disabled)] aria-disabled:text-[var(--ds-color-text-disabled)]",
-      neutral:
-        "bg-white/6 border-white/8 text-white/60 hover:bg-white/10 hover:border-white/12 hover:text-white/80 active:bg-white/14 active:border-white/14 active:text-[var(--ds-color-text-primary)] data-[state=active]:bg-white/14 data-[state=active]:border-white/14 data-[state=active]:text-[var(--ds-color-text-primary)] disabled:bg-[var(--ds-color-surface-disabled)] disabled:border-[var(--ds-border-disabled)] disabled:text-[var(--ds-color-text-disabled)] aria-disabled:bg-[var(--ds-color-surface-disabled)] aria-disabled:border-[var(--ds-border-disabled)] aria-disabled:text-[var(--ds-color-text-disabled)]",
-    },
-    size: {
-      compact: "px-[14px] py-[6px]",
-      default: "px-5 py-2",
-    },
-    fullWidth: {
-      true: "w-full",
-    },
-  },
-  defaultVariants: {
-    variant: "secondary",
-    size: "default",
-  },
-})
-
-type CommonButtonProps = {
-  children?: ReactNode
-} & VariantProps<typeof buttonVariants>
-
-type ButtonProps = CommonButtonProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">
-
-export function Button({
-  children,
-  className,
-  fullWidth,
-  size,
-  variant,
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      className={cn(buttonVariants({ variant, size, fullWidth }), className)}
-      type="button"
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}