@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -1,389 +0,0 @@
-"use client"
-
-import { motion } from "motion/react"
-import type {
-  AnimatedPropertyBinding,
-  ParameterDefinition,
-  ParameterValue,
-  SelectParameterDefinition,
-  TextParameterDefinition,
-} from "@/types/editor"
-import { cn } from "@/lib/cn"
-import { ColorPicker } from "@/components/ui/color-picker"
-import { IconButton } from "@/components/ui/icon-button"
-import { Select } from "@/components/ui/select"
-import { Slider } from "@/components/ui/slider"
-import { Toggle } from "@/components/ui/toggle"
-import { Typography } from "@/components/ui/typography"
-import { XYPad } from "@/components/ui/xy-pad"
-import { useLayerStore } from "@/store/layer-store"
-import { useTimelineStore } from "@/store/timeline-store"
-import {
-  hasTrackForBinding,
-  toBooleanValue,
-  toColorValue,
-  toNumberValue,
-  toTextValue,
-  toVec2Value,
-} from "./properties-sidebar-utils"
-
-export type TimelineKeyframeControl = {
-  binding: AnimatedPropertyBinding | null
-  hasTrack: boolean
-  layerId: string
-  onKeyframe: (
-    binding: AnimatedPropertyBinding,
-    layerId: string,
-    value: ParameterValue
-  ) => void
-  reduceMotion: boolean
-  timelinePanelOpen: boolean
-  value: ParameterValue
-}
-
-function RhombusIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" viewBox="0 0 14 14">
-      <path
-        d="M7 1.8L12.2 7L7 12.2L1.8 7L7 1.8Z"
-        fill="currentColor"
-        fillOpacity="0.18"
-        stroke="currentColor"
-        strokeWidth="1.2"
-      />
-    </svg>
-  )
-}
-
-function TimelineKeyframeButton({
-  control,
-}: {
-  control: TimelineKeyframeControl | null
-}) {
-  if (!control?.binding) {
-    return null
-  }
-
-  let animation: { opacity: number; scale?: number }
-
-  if (control.timelinePanelOpen) {
-    animation = control.reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
-  } else {
-    animation = control.reduceMotion
-      ? { opacity: 0 }
-      : { opacity: 0, scale: 0.82 }
-  }
-
-  return (
-    <span className="inline-flex h-6 w-6 shrink-0 items-center justify-center">
-      <motion.span
-        animate={animation}
-        className="inline-flex shrink-0"
-        initial={false}
-        transition={
-          control.reduceMotion
-            ? { duration: 0.12, ease: "easeOut" }
-            : { damping: 20, mass: 0.5, stiffness: 420, type: "spring" }
-        }
-      >
-        <IconButton
-          aria-hidden={!control.timelinePanelOpen}
-          aria-label={`Create keyframe for ${control.binding.label}`}
-          className={cn(
-            "h-6 w-6 [&_svg]:h-3 [&_svg]:w-3",
-            control.hasTrack && "text-[rgb(200_220_255_/_0.92)]"
-          )}
-          disabled={!control.timelinePanelOpen}
-          onClick={() =>
-            control.onKeyframe(
-              control.binding as AnimatedPropertyBinding,
-              control.layerId,
-              control.value
-            )
-          }
-          tabIndex={control.timelinePanelOpen ? 0 : -1}
-          variant="ghost"
-        >
-          <RhombusIcon />
-        </IconButton>
-      </motion.span>
-    </span>
-  )
-}
-
-function renderFieldLabelStack(
-  label: string,
-  description: string | undefined,
-  control: TimelineKeyframeControl | null
-) {
-  return (
-    <span
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "2px",
-        minWidth: 0,
-      }}
-    >
-      <Typography className="min-w-0" tone="secondary" variant="label">
-        {renderFieldLabel(label, control)}
-      </Typography>
-      {description ? (
-        <Typography tone="muted" variant="caption">
-          {description}
-        </Typography>
-      ) : null}
-    </span>
-  )
-}
-
-function getCustomPaletteFieldLabel(
-  definition: ParameterDefinition,
-  layerParams: Record<string, ParameterValue> | null
-): string {
-  if (!layerParams) {
-    return definition.label
-  }
-
-  const colorCount =
-    typeof layerParams.customColorCount === "number"
-      ? layerParams.customColorCount
-      : 4
-
-  switch (definition.key) {
-    case "customColor1":
-      return "Shadows"
-    case "customColor2":
-      return colorCount <= 2 ? "Highlights" : "Midtones"
-    case "customColor3":
-      return colorCount === 3 ? "Highlights" : "High Mids"
-    case "customColor4":
-      return "Highlights"
-    default:
-      return definition.label
-  }
-}
-
-function shouldRenderCustomPaletteField(
-  definition: ParameterDefinition,
-  layerParams: Record<string, ParameterValue> | null
-): boolean {
-  if (!layerParams) {
-    return true
-  }
-
-  if (
-    definition.key === "customBgColor" ||
-    definition.key === "customColorCount" ||
-    definition.key === "customLuminanceBias" ||
-    definition.key === "customColor1" ||
-    definition.key === "customColor2"
-  ) {
-    return layerParams.colorMode === "custom"
-  }
-
-  if (definition.key === "customColor3") {
-    return (
-      layerParams.colorMode === "custom" &&
-      typeof layerParams.customColorCount === "number" &&
-      layerParams.customColorCount >= 3
-    )
-  }
-
-  if (definition.key === "customColor4") {
-    return (
-      layerParams.colorMode === "custom" &&
-      typeof layerParams.customColorCount === "number" &&
-      layerParams.customColorCount >= 4
-    )
-  }
-
-  return true
-}
-
-export function renderFieldLabel(
-  label: string,
-  control: TimelineKeyframeControl | null
-) {
-  return (
-    <span className="inline-flex min-w-0 w-full items-center justify-between gap-2">
-      <span>{label}</span>
-      <TimelineKeyframeButton control={control} />
-    </span>
-  )
-}
-
-export function ParameterField({
-  definition,
-  layerId,
-  onChange,
-  onTimelineKeyframe,
-  reduceMotion,
-  timelineBinding,
-  timelinePanelOpen,
-  value,
-}: {
-  definition: ParameterDefinition
-  layerId: string
-  onChange: (id: string, key: string, value: ParameterValue) => void
-  onTimelineKeyframe: (
-    binding: AnimatedPropertyBinding,
-    layerId: string,
-    value: ParameterValue
-  ) => void
-  reduceMotion: boolean
-  timelineBinding: AnimatedPropertyBinding | null
-  timelinePanelOpen: boolean
-  value: ParameterValue
-}) {
-  const layerParams = useLayerStore(
-    (state) =>
-      state.layers.find((layer) => layer.id === layerId)?.params ?? null
-  )
-  const timelineTracks = useTimelineStore((state) => state.tracks)
-  const timelineControl: TimelineKeyframeControl | null = timelineBinding
-    ? {
-        binding: timelineBinding,
-        hasTrack: hasTrackForBinding(timelineTracks, layerId, timelineBinding),
-        layerId,
-        onKeyframe: onTimelineKeyframe,
-        reduceMotion,
-        timelinePanelOpen,
-        value,
-      }
-    : null
-
-  if (!shouldRenderCustomPaletteField(definition, layerParams)) {
-    return null
-  }
-
-  const fieldLabel = getCustomPaletteFieldLabel(definition, layerParams)
-
-  switch (definition.type) {
-    case "number":
-      return (
-        <Slider
-          label={renderFieldLabelStack(
-            fieldLabel,
-            definition.description,
-            timelineControl
-          )}
-          max={definition.max ?? 100}
-          min={definition.min ?? 0}
-          onValueChange={(nextValue) =>
-            onChange(layerId, definition.key, nextValue)
-          }
-          step={definition.step ?? 0.01}
-          value={toNumberValue(value, definition.defaultValue)}
-          valueFormatOptions={{
-            maximumFractionDigits: 2,
-            minimumFractionDigits: 0,
-          }}
-        />
-      )
-
-    case "select":
-      return (
-        <div
-          className="grid items-center gap-[10px] [grid-template-columns:minmax(0,1fr)_132px]"
-          style={definition.description ? { alignItems: "start" } : undefined}
-        >
-          {renderFieldLabelStack(
-            fieldLabel,
-            definition.description,
-            timelineControl
-          )}
-          <Select
-            className="w-[132px]"
-            onValueChange={(nextValue) => {
-              if (nextValue) {
-                onChange(layerId, definition.key, nextValue)
-              }
-            }}
-            options={(definition as SelectParameterDefinition).options}
-            triggerClassName="w-[132px]"
-            value={typeof value === "string" ? value : definition.defaultValue}
-          />
-        </div>
-      )
-
-    case "boolean":
-      return (
-        <div
-          className="grid items-center gap-[10px] [grid-template-columns:minmax(0,1fr)_auto]"
-          style={definition.description ? { alignItems: "start" } : undefined}
-        >
-          {renderFieldLabelStack(
-            fieldLabel,
-            definition.description,
-            timelineControl
-          )}
-          <Toggle
-            checked={toBooleanValue(value)}
-            className="justify-self-end"
-            onCheckedChange={(nextValue) =>
-              onChange(layerId, definition.key, nextValue)
-            }
-          />
-        </div>
-      )
-
-    case "color":
-      return (
-        <div
-          className="grid items-center gap-[10px] [grid-template-columns:minmax(0,1fr)_132px]"
-          style={definition.description ? { alignItems: "start" } : undefined}
-        >
-          {renderFieldLabelStack(
-            fieldLabel,
-            definition.description,
-            timelineControl
-          )}
-          <ColorPicker
-            onValueChange={(nextValue) =>
-              onChange(layerId, definition.key, nextValue)
-            }
-            value={toColorValue(value)}
-          />
-        </div>
-      )
-
-    case "vec2":
-      return (
-        <XYPad
-          label={renderFieldLabel(fieldLabel, timelineControl)}
-          max={definition.max ?? 1}
-          min={definition.min ?? -1}
-          onValueChange={(nextValue) =>
-            onChange(layerId, definition.key, nextValue)
-          }
-          step={definition.step ?? 0.01}
-          value={toVec2Value(value)}
-        />
-      )
-
-    case "text":
-      return (
-        <label className="flex flex-col gap-2">
-          {renderFieldLabelStack(
-            fieldLabel,
-            definition.description,
-            timelineControl
-          )}
-          <input
-            className="min-h-9 appearance-none rounded-[var(--ds-radius-control)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] px-[10px] py-2 font-[var(--ds-font-mono)] text-[12px] leading-4 text-[var(--ds-color-text-primary)] outline-none transition-[border-color,background-color] duration-120 ease-[ease] focus:border-[var(--ds-color-text-secondary)] placeholder:text-[var(--ds-color-text-muted)]"
-            maxLength={(definition as TextParameterDefinition).maxLength}
-            onChange={(event) =>
-              onChange(layerId, definition.key, event.currentTarget.value)
-            }
-            spellCheck={false}
-            type="text"
-            value={toTextValue(value, definition.defaultValue)}
-          />
-        </label>
-      )
-
-    default:
-      return null
-  }
-}

package/src/components/editor/properties-sidebar-utils.ts

@@ -1,178 +0,0 @@
-"use client"
-
-import type {
-  AnimatedPropertyBinding,
-  EditorAsset,
-  ParameterDefinition,
-  ParameterValue,
-} from "@/types/editor"
-import type { useTimelineStore } from "@/store/timeline-store"
-
-export const blendModeOptions = [
-  { label: "Normal", value: "normal" },
-  { label: "Multiply", value: "multiply" },
-  { label: "Screen", value: "screen" },
-  { label: "Overlay", value: "overlay" },
-  { label: "Darken", value: "darken" },
-  { label: "Lighten", value: "lighten" },
-] as const
-
-export const compositeModeOptions = [
-  { label: "Filter", value: "filter" },
-  { label: "Mask", value: "mask" },
-] as const
-
-const COLLAPSIBLE_PARAM_GROUPS = new Set(["Points", "Effects"])
-export const DEFAULT_PARAM_GROUP = "Settings"
-
-export type ParamGroup = {
-  collapsible: boolean
-  id: string
-  label: string
-  params: ParameterDefinition[]
-}
-
-export function getBindingKey(binding: AnimatedPropertyBinding): string {
-  if (binding.kind === "layer") {
-    return `layer:${binding.property}`
-  }
-
-  return `param:${binding.key}`
-}
-
-export function getSelectedAsset(
-  assetById: Map<string, EditorAsset>,
-  assetId: string | null
-): EditorAsset | null {
-  if (!assetId) {
-    return null
-  }
-
-  return assetById.get(assetId) ?? null
-}
-
-export function formatLayerKind(kind: string): string {
-  switch (kind) {
-    case "effect":
-      return "Effect"
-    case "model":
-      return "3D Model"
-    case "source":
-      return "Source"
-    default:
-      return kind
-  }
-}
-
-export function toColorValue(value: ParameterValue): string {
-  return typeof value === "string" ? value : "#ffffff"
-}
-
-export function toVec2Value(value: ParameterValue): [number, number] {
-  return Array.isArray(value) && value.length === 2
-    ? [value[0] ?? 0, value[1] ?? 0]
-    : [0, 0]
-}
-
-export function toNumberValue(value: ParameterValue, fallback = 0): number {
-  return typeof value === "number" ? value : fallback
-}
-
-export function toBooleanValue(value: ParameterValue): boolean {
-  return value === true
-}
-
-export function toTextValue(value: ParameterValue, fallback: string): string {
-  return typeof value === "string" ? value : fallback
-}
-
-export function resolveParamValue(
-  params: Record<string, ParameterValue>,
-  definitions: ParameterDefinition[],
-  key: string
-): ParameterValue | undefined {
-  const explicitValue = params[key]
-  if (explicitValue !== undefined) {
-    return explicitValue
-  }
-
-  const definition = definitions.find((entry) => entry.key === key)
-  return definition?.defaultValue
-}
-
-export function isParamVisible(
-  definition: ParameterDefinition,
-  params: Record<string, ParameterValue>,
-  definitions: ParameterDefinition[]
-): boolean {
-  if (!definition.visibleWhen) {
-    return true
-  }
-
-  const controllingValue = resolveParamValue(
-    params,
-    definitions,
-    definition.visibleWhen.key
-  )
-
-  if ("equals" in definition.visibleWhen) {
-    return controllingValue === definition.visibleWhen.equals
-  }
-
-  return (
-    typeof controllingValue === "number" &&
-    controllingValue >= definition.visibleWhen.gte
-  )
-}
-
-export function groupVisibleParams(params: ParameterDefinition[]): ParamGroup[] {
-  const groups = new Map<string, ParamGroup>()
-
-  for (const param of params) {
-    const label = param.group ?? DEFAULT_PARAM_GROUP
-    const id = label.toLowerCase().replace(/\s+/g, "-")
-    const existing = groups.get(id)
-
-    if (existing) {
-      existing.params.push(param)
-      continue
-    }
-
-    groups.set(id, {
-      collapsible: COLLAPSIBLE_PARAM_GROUPS.has(label),
-      id,
-      label,
-      params: [param],
-    })
-  }
-
-  return [...groups.values()]
-}
-
-export function createParamTimelineBinding(
-  definition: ParameterDefinition
-): AnimatedPropertyBinding | null {
-  if (definition.type === "text") {
-    return null
-  }
-
-  return {
-    key: definition.key,
-    kind: "param",
-    label: definition.label,
-    valueType: definition.type === "boolean" ? "boolean" : definition.type,
-  }
-}
-
-export function hasTrackForBinding(
-  tracks: ReturnType<typeof useTimelineStore.getState>["tracks"],
-  layerId: string,
-  binding: AnimatedPropertyBinding
-): boolean {
-  const bindingKey = getBindingKey(binding)
-
-  return tracks.some(
-    (track) =>
-      track.layerId === layerId && getBindingKey(track.binding) === bindingKey
-  )
-}