@pascal-app/editor 0.4.0

package/src/components/ui/primitives/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '../../../lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-accent', className)}
+      data-slot="skeleton"
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/primitives/slider.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      className={cn(
+        'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50',
+        className,
+      )}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      value={value}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5',
+        )}
+        data-slot="slider-track"
+      >
+        <SliderPrimitive.Range
+          className={cn(
+            'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+          )}
+          data-slot="slider-range"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+          data-slot="slider-thumb"
+          key={index}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/components/ui/primitives/switch.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+
+import { cn } from './../../../lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/components/ui/primitives/tooltip.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import type * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        className={cn(
+          'fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-foreground px-3 py-1.5 font-barlow text-background text-xs data-[state=closed]:animate-out',
+          className,
+        )}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/ui/scene-loader.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { cn } from '../../lib/utils'
+
+const LOADERS = [
+  'pascal-loader-1',
+  'pascal-loader-2',
+  'pascal-loader-3',
+  'pascal-loader-4',
+  'pascal-loader-5',
+]
+
+interface SceneLoaderProps {
+  className?: string
+  fullScreen?: boolean
+}
+
+export function SceneLoader({ className, fullScreen = false }: SceneLoaderProps) {
+  const [loaderClass, setLoaderClass] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Pick a random loader on mount
+    setLoaderClass(LOADERS[Math.floor(Math.random() * LOADERS.length)] ?? LOADERS[0]!)
+  }, [])
+
+  if (!loaderClass) return null
+
+  return (
+    <div
+      className={cn(
+        'z-100 flex items-center justify-center bg-background/80 backdrop-blur-md transition-opacity duration-300',
+        fullScreen ? 'fixed inset-0' : 'absolute inset-0',
+        className,
+      )}
+    >
+      <div className={cn(loaderClass, 'text-foreground opacity-80')} />
+    </div>
+  )
+}

package/src/components/ui/sidebar/app-sidebar.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { type ReactNode, useEffect } from 'react'
+import {
+  CommandPalette,
+  type CommandPaletteEmptyAction,
+} from './../../../components/ui/command-palette'
+import { EditorCommands } from './../../../components/ui/command-palette/editor-commands'
+import {
+  SidebarContent,
+  SidebarHeader,
+  useSidebarStore,
+} from './../../../components/ui/primitives/sidebar'
+import { cn } from './../../../lib/utils'
+import useEditor from './../../../store/use-editor'
+import { type ExtraPanel, IconRail } from './icon-rail'
+import { SettingsPanel, type SettingsPanelProps } from './panels/settings-panel'
+import { SitePanel, type SitePanelProps } from './panels/site-panel'
+
+interface AppSidebarProps {
+  appMenuButton?: ReactNode
+  sidebarTop?: ReactNode
+  settingsPanelProps?: SettingsPanelProps
+  sitePanelProps?: SitePanelProps
+  extraPanels?: ExtraPanel[]
+  commandPaletteEmptyAction?: CommandPaletteEmptyAction
+}
+
+export function AppSidebar({
+  appMenuButton,
+  sidebarTop,
+  settingsPanelProps,
+  sitePanelProps,
+  extraPanels,
+  commandPaletteEmptyAction,
+}: AppSidebarProps) {
+  const activePanel = useEditor((s) => s.activeSidebarPanel)
+  const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
+  const hasActivePanel =
+    activePanel === 'site' ||
+    activePanel === 'settings' ||
+    Boolean(extraPanels?.some((panel) => panel.id === activePanel))
+
+  useEffect(() => {
+    // Widen default sidebar (288px → 432px) for better project title visibility
+    const store = useSidebarStore.getState()
+    if (store.width <= 288) {
+      store.setWidth(432)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!hasActivePanel) {
+      setActivePanel('site')
+    }
+  }, [hasActivePanel, setActivePanel])
+
+  const renderPanelContent = () => {
+    switch (activePanel) {
+      case 'site':
+        return <SitePanel {...sitePanelProps} />
+      case 'settings':
+        return <SettingsPanel {...settingsPanelProps} />
+      default: {
+        const extra = extraPanels?.find((p) => p.id === activePanel)
+        if (extra) {
+          const Component = extra.component
+          return <Component />
+        }
+        return <SitePanel {...sitePanelProps} />
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className={cn('dark flex h-full w-full bg-sidebar text-sidebar-foreground')}>
+        {/* Icon Rail */}
+        <IconRail
+          activePanel={activePanel}
+          appMenuButton={appMenuButton}
+          extraPanels={extraPanels}
+          onPanelChange={setActivePanel}
+        />
+
+        {/* Panel Content */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {sidebarTop && (
+            <SidebarHeader className="relative flex-col items-start justify-center gap-1 border-border/50 border-b px-3 py-3">
+              {sidebarTop}
+            </SidebarHeader>
+          )}
+
+          <SidebarContent className={cn('no-scrollbar flex flex-1 flex-col overflow-hidden')}>
+            {renderPanelContent()}
+          </SidebarContent>
+        </div>
+      </div>
+      <EditorCommands />
+      <CommandPalette emptyAction={commandPaletteEmptyAction} />
+    </>
+  )
+}

package/src/components/ui/sidebar/icon-rail.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import type { ComponentType, ReactNode } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './../../../components/ui/primitives/tooltip'
+import { cn } from './../../../lib/utils'
+
+export type PanelId = string
+
+export type ExtraPanel = { id: string; icon: ReactNode; label: string; component: ComponentType }
+
+interface IconRailProps {
+  activePanel: PanelId
+  onPanelChange: (panel: PanelId) => void
+  appMenuButton?: ReactNode
+  extraPanels?: ExtraPanel[]
+  className?: string
+}
+
+const sitePanel: { id: PanelId; iconSrc: string; label: string } = {
+  id: 'site',
+  iconSrc: '/icons/level.png',
+  label: 'Site',
+}
+
+const settingsPanel: { id: PanelId; iconSrc: string; label: string } = {
+  id: 'settings',
+  iconSrc: '/icons/settings.png',
+  label: 'Settings',
+}
+
+const panels: { id: PanelId; iconSrc: string; label: string }[] = [sitePanel, settingsPanel]
+
+export function IconRail({
+  activePanel,
+  onPanelChange,
+  appMenuButton,
+  extraPanels,
+  className,
+}: IconRailProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-full w-11 flex-col items-center gap-1 border-border/50 border-r py-2',
+        className,
+      )}
+    >
+      {/* App menu slot */}
+      {appMenuButton}
+
+      {/* Divider */}
+      <div className="mb-1 h-px w-8 bg-border/50" />
+
+      {/* Site panel */}
+      {[sitePanel].map((panel) => {
+        const isActive = activePanel === panel.id
+        return (
+          <Tooltip key={panel.id}>
+            <TooltipTrigger asChild>
+              <button
+                className={cn(
+                  'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
+                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                )}
+                onClick={() => onPanelChange(panel.id)}
+                type="button"
+              >
+                <img
+                  alt={panel.label}
+                  className={cn(
+                    'h-6 w-6 object-contain transition-all',
+                    !isActive && 'opacity-50 saturate-0',
+                  )}
+                  src={panel.iconSrc}
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{panel.label}</TooltipContent>
+          </Tooltip>
+        )
+      })}
+
+      {/* Extra panels (injected between site and settings) */}
+      {extraPanels?.map((panel) => {
+        const isActive = activePanel === panel.id
+        return (
+          <Tooltip key={panel.id}>
+            <TooltipTrigger asChild>
+              <button
+                className={cn(
+                  'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
+                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                )}
+                onClick={() => onPanelChange(panel.id)}
+                type="button"
+              >
+                <span
+                  className={cn(
+                    'flex h-6 w-6 items-center justify-center transition-all',
+                    !isActive && 'opacity-50',
+                  )}
+                >
+                  {panel.icon}
+                </span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{panel.label}</TooltipContent>
+          </Tooltip>
+        )
+      })}
+
+      {/* Settings panel */}
+      {[settingsPanel].map((panel) => {
+        const isActive = activePanel === panel.id
+        return (
+          <Tooltip key={panel.id}>
+            <TooltipTrigger asChild>
+              <button
+                className={cn(
+                  'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
+                  isActive ? 'bg-accent' : 'hover:bg-accent',
+                )}
+                onClick={() => onPanelChange(panel.id)}
+                type="button"
+              >
+                <img
+                  alt={panel.label}
+                  className={cn(
+                    'h-6 w-6 object-contain transition-all',
+                    !isActive && 'opacity-50 saturate-0',
+                  )}
+                  src={panel.iconSrc}
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{panel.label}</TooltipContent>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+}
+
+export { panels }

package/src/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx

@@ -0,0 +1,100 @@
+import { Volume2, VolumeX } from 'lucide-react'
+import { Button } from '../../../../../components/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../../../../components/ui/primitives/dialog'
+import { Slider } from '../../../../../components/ui/slider'
+import useAudio from '../../../../../store/use-audio'
+
+export function AudioSettingsDialog() {
+  const {
+    masterVolume,
+    sfxVolume,
+    radioVolume,
+    muted,
+    setMasterVolume,
+    setSfxVolume,
+    setRadioVolume,
+    toggleMute,
+  } = useAudio()
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="w-full justify-start gap-2" variant="outline">
+          {muted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
+          Audio Settings
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Audio Settings</DialogTitle>
+          <DialogDescription>Adjust volume levels and mute settings</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-6 py-4">
+          {/* Master Volume */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-sm">Master Volume</label>
+              <span className="text-muted-foreground text-sm">{masterVolume}%</span>
+            </div>
+            <Slider
+              disabled={muted}
+              max={100}
+              onValueChange={(value) => value[0] !== undefined && setMasterVolume(value[0])}
+              step={1}
+              value={[masterVolume]}
+            />
+          </div>
+
+          {/* Radio Volume */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-sm">Radio Volume</label>
+              <span className="text-muted-foreground text-sm">{radioVolume}%</span>
+            </div>
+            <Slider
+              disabled={muted}
+              max={100}
+              onValueChange={(value) => value[0] !== undefined && setRadioVolume(value[0])}
+              step={1}
+              value={[radioVolume]}
+            />
+          </div>
+
+          {/* SFX Volume */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="font-medium text-sm">Sound Effects</label>
+              <span className="text-muted-foreground text-sm">{sfxVolume}%</span>
+            </div>
+            <Slider
+              disabled={muted}
+              max={100}
+              onValueChange={(value) => value[0] !== undefined && setSfxVolume(value[0])}
+              step={1}
+              value={[sfxVolume]}
+            />
+          </div>
+
+          {/* Mute Toggle */}
+          <div className="border-t pt-4">
+            <Button
+              className="w-full justify-start gap-2"
+              onClick={toggleMute}
+              variant={muted ? 'default' : 'outline'}
+            >
+              {muted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
+              {muted ? 'Unmute All Sounds' : 'Mute All Sounds'}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}