@pascal-app/editor 0.4.0

package/src/components/ui/primitives/number-input.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import NumberFlow from '@number-flow/react'
+import { useScene } from '@pascal-app/core'
+import { useCallback, useRef, useState } from 'react'
+
+interface NumberInputProps {
+  label: string
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  precision?: number
+  step?: number
+  className?: string
+}
+
+export function NumberInput({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  precision = 2,
+  step = 0.1,
+  className = '',
+}: NumberInputProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const [inputValue, setInputValue] = useState(value.toFixed(precision))
+  const startXRef = useRef(0)
+  const startValueRef = useRef(0)
+  const labelRef = useRef<HTMLDivElement>(null)
+
+  const clamp = useCallback(
+    (val: number) => {
+      if (min !== undefined && val < min) return min
+      if (max !== undefined && val > max) return max
+      return val
+    },
+    [min, max],
+  )
+
+  const handleLabelMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (isEditing) return
+      e.preventDefault()
+      setIsDragging(true)
+      startXRef.current = e.clientX
+      startValueRef.current = value
+
+      // Pause history tracking during drag
+      useScene.temporal.getState().pause()
+
+      let finalValue = value
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        const deltaX = moveEvent.clientX - startXRef.current
+
+        // Determine step size based on modifier keys
+        let dragStep = step // Default from prop
+        if (moveEvent.shiftKey) {
+          dragStep = step * 10 // Coarse
+        } else if (moveEvent.altKey) {
+          dragStep = step * 0.1 // Fine
+        }
+
+        const deltaValue = deltaX * dragStep
+        const newValue = clamp(startValueRef.current + deltaValue)
+        const newFinalValue = Number.parseFloat(newValue.toFixed(precision))
+
+        // Only call onChange if value actually changed (avoid extra processing on tiny moves)
+        if (newFinalValue !== finalValue) {
+          finalValue = newFinalValue
+          onChange(finalValue)
+        }
+      }
+
+      const handleMouseUp = () => {
+        setIsDragging(false)
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+
+        // Reset to initial value while still paused (no history entry)
+        // Then resume and apply final value (creates single history entry)
+        if (finalValue !== startValueRef.current) {
+          onChange(startValueRef.current)
+          useScene.temporal.getState().resume()
+          onChange(finalValue)
+        } else {
+          useScene.temporal.getState().resume()
+        }
+      }
+
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+    },
+    [isEditing, value, onChange, clamp, precision, step],
+  )
+
+  const handleValueClick = useCallback(() => {
+    setIsEditing(true)
+    setInputValue(value.toFixed(precision))
+  }, [value, precision])
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }, [])
+
+  const handleInputBlur = useCallback(() => {
+    const numValue = Number.parseFloat(inputValue)
+    if (!Number.isNaN(numValue)) {
+      onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+    }
+    setIsEditing(false)
+  }, [inputValue, onChange, clamp, precision])
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        const numValue = Number.parseFloat(inputValue)
+        if (!Number.isNaN(numValue)) {
+          onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+        }
+        setIsEditing(false)
+      } else if (e.key === 'Escape') {
+        setInputValue(value.toFixed(precision))
+        setIsEditing(false)
+      }
+    },
+    [inputValue, onChange, value, clamp, precision],
+  )
+
+  return (
+    <div className={`${className} group/input relative`}>
+      <div
+        className={`pointer-events-none absolute inset-y-0 left-0 bg-primary/10 transition-all duration-75 dark:bg-primary/20 ${isDragging ? 'opacity-100' : 'opacity-0'}`}
+        style={{
+          width: `${Math.min(100, Math.max(0, ((value - (min ?? Math.min(0, value))) / ((max ?? Math.max(10, value)) - (min ?? Math.min(0, value)))) * 100))}%`,
+          borderTopRightRadius: value >= (max ?? Math.max(10, value)) ? '0.5rem' : '0',
+          borderBottomRightRadius: value >= (max ?? Math.max(10, value)) ? '0.5rem' : '0',
+          borderTopLeftRadius: '0.5rem',
+          borderBottomLeftRadius: '0.5rem',
+        }}
+      />
+      <div
+        className={`relative z-10 flex items-center overflow-hidden rounded-lg border shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] transition-all focus-within:border-primary focus-within:ring-1 focus-within:ring-primary ${isDragging ? 'border-neutral-300 bg-transparent ring-1 ring-neutral-200/60 dark:border-border dark:ring-border/50' : 'border-neutral-200/60 bg-white hover:border-neutral-300 dark:border-border/50 dark:bg-accent/30 dark:hover:border-border/80'}`}
+      >
+        <div
+          className={`z-10 select-none truncate py-1.5 pr-1 pl-2 font-barlow font-medium text-muted-foreground text-xs ${
+            isDragging
+              ? 'cursor-ew-resize text-foreground'
+              : 'hover:cursor-ew-resize hover:text-foreground'
+          } transition-colors`}
+          onMouseDown={handleLabelMouseDown}
+          ref={labelRef}
+        >
+          {label}
+        </div>
+        {isEditing ? (
+          <input
+            autoFocus
+            className="z-10 min-w-0 flex-1 bg-transparent px-2 py-1.5 text-right font-medium font-mono text-foreground text-sm outline-none placeholder:text-muted-foreground/50"
+            onBlur={handleInputBlur}
+            onChange={handleInputChange}
+            onKeyDown={handleInputKeyDown}
+            size={1}
+            type="text"
+            value={inputValue}
+          />
+        ) : (
+          <div
+            className={
+              'z-10 min-w-0 flex-1 cursor-text truncate px-2 py-1.5 text-right font-medium font-mono text-foreground text-sm tabular-nums tracking-tight transition-colors hover:bg-black/5 dark:hover:bg-white/5'
+            }
+            onClick={handleValueClick}
+          >
+            <NumberFlow
+              format={{ minimumFractionDigits: precision, maximumFractionDigits: precision }}
+              value={Number(value.toFixed(precision))}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/primitives/opacity-control.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { Eye, EyeOff } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '../../../components/ui/primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/primitives/popover'
+import { Slider } from '../../../components/ui/primitives/slider'
+import { cn } from '../../../lib/utils'
+
+interface OpacityControlProps {
+  visible?: boolean
+  opacity?: number
+  onVisibilityToggle: () => void
+  onOpacityChange: (opacity: number) => void
+  className?: string
+}
+
+export function OpacityControl({
+  visible = true,
+  opacity = 100,
+  onVisibilityToggle,
+  onOpacityChange,
+  className,
+}: OpacityControlProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const actualOpacity = opacity ?? 100
+  const isHidden = visible === false || actualOpacity === 0
+
+  return (
+    <Popover onOpenChange={setIsOpen} open={isOpen}>
+      <div className={cn('flex items-center gap-1', className)}>
+        {!isHidden && actualOpacity < 100 && (
+          <span className="text-muted-foreground text-xs">{actualOpacity}%</span>
+        )}
+        <PopoverTrigger asChild>
+          <Button
+            className={cn(
+              'h-5 w-5 p-0 transition-opacity',
+              isHidden ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100',
+            )}
+            onClick={(e) => {
+              e.stopPropagation()
+              // If clicking the button (not opening popover), toggle visibility
+              if (!isOpen) {
+                onVisibilityToggle()
+              }
+            }}
+            size="sm"
+            variant="ghost"
+          >
+            {isHidden ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          className="w-48 p-3"
+          onClick={(e) => e.stopPropagation()}
+          side="right"
+        >
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="font-medium text-sm">Opacity</span>
+              <span className="text-muted-foreground text-xs">{actualOpacity}%</span>
+            </div>
+            <Slider
+              max={100}
+              min={0}
+              onValueChange={(values: number[]) => {
+                if (values[0] !== undefined) onOpacityChange(values[0])
+              }}
+              step={1}
+              value={[actualOpacity]}
+            />
+          </div>
+        </PopoverContent>
+      </div>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,42 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import type * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        className={cn(
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
+          className,
+        )}
+        data-slot="popover-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

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

@@ -0,0 +1,28 @@
+'use client'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import type * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      className={cn(
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

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

@@ -0,0 +1,130 @@
+'use client'
+
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      className={cn(
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
+        className,
+      )}
+      data-slot="sheet-overlay"
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        className={cn(
+          'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className,
+        )}
+        data-slot="sheet-content"
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      data-slot="sheet-header"
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      data-slot="sheet-footer"
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      className={cn('font-semibold text-foreground', className)}
+      data-slot="sheet-title"
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="sheet-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/ui/primitives/shortcut-token.tsx

@@ -0,0 +1,64 @@
+import { Icon } from '@iconify/react'
+import type * as React from 'react'
+
+import { cn } from '../../../lib/utils'
+
+const MOUSE_SHORTCUTS = {
+  Click: {
+    icon: 'ph:mouse-left-click-fill',
+    label: 'Left click',
+  },
+  'Left click': {
+    icon: 'ph:mouse-left-click-fill',
+    label: 'Left click',
+  },
+  'Middle click': {
+    icon: 'qlementine-icons:mouse-middle-button-16',
+    label: 'Middle click',
+  },
+  'Right click': {
+    icon: 'ph:mouse-right-click-fill',
+    label: 'Right click',
+  },
+} as const
+
+type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
+  value: string
+  displayValue?: string
+}
+
+function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTokenProps) {
+  const mouseShortcut =
+    value in MOUSE_SHORTCUTS ? MOUSE_SHORTCUTS[value as keyof typeof MOUSE_SHORTCUTS] : null
+
+  return (
+    <kbd
+      aria-label={mouseShortcut?.label ?? displayValue ?? value}
+      className={cn(
+        'inline-flex h-6 items-center rounded border border-border bg-muted px-2 font-medium font-mono text-[11px] text-muted-foreground',
+        mouseShortcut && 'justify-center px-1.5',
+        className,
+      )}
+      title={mouseShortcut?.label ?? value}
+      {...props}
+    >
+      {mouseShortcut ? (
+        <>
+          <Icon
+            aria-hidden="true"
+            className="shrink-0"
+            color="currentColor"
+            height={14}
+            icon={mouseShortcut.icon}
+            width={14}
+          />
+          <span className="sr-only">{mouseShortcut.label}</span>
+        </>
+      ) : (
+        (displayValue ?? value)
+      )}
+    </kbd>
+  )
+}
+
+export { ShortcutToken }