// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Canvas Toolbar
// DD: Floating bottom-center toolbar — zoom +/-, fit-to-view, minimap dot
// Reference: devouringdetails.com/mood toolbar (fixed bottom)
// ═══════════════════════════════════════════════════════════════════

import { motion } from "framer-motion";
import { Minus, Plus, Maximize2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { press, spring } from "@/lib/motion";

interface CanvasToolbarProps {
  zoomPercent: number;
  onZoomIn: () => void;
  onZoomOut: () => void;
  onFitToView: () => void;
}

export function CanvasToolbar({
  zoomPercent,
  onZoomIn,
  onZoomOut,
  onFitToView,
}: CanvasToolbarProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.3, ...spring.gentle }}
      className={cn(
        "fixed bottom-6 left-1/2 -translate-x-1/2 z-40",
        "flex items-center gap-1 px-2 py-1.5",
        "bg-white/90 backdrop-blur-xl border border-border/50"
      )}
    >
      {/* Brand dot */}
      <div className="flex items-center gap-[3px] px-2">
        <span className="w-[5px] h-[5px] rounded-full border border-brand" />
        <span className="w-[5px] h-[5px] rounded-full bg-brand" />
        <span className="w-[5px] h-[5px] rounded-full border border-brand" />
      </div>

      <div className="w-px h-5 bg-border mx-1" />

      {/* Zoom out */}
      <motion.button
        onClick={onZoomOut}
        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
        {...press}
        title="Zoom out"
      >
        <Minus className="w-3.5 h-3.5" />
      </motion.button>

      {/* Zoom level */}
      <span className="text-[11px] font-mono text-muted-foreground tabular-nums w-10 text-center select-none">
        {zoomPercent}%
      </span>

      {/* Zoom in */}
      <motion.button
        onClick={onZoomIn}
        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
        {...press}
        title="Zoom in"
      >
        <Plus className="w-3.5 h-3.5" />
      </motion.button>

      <div className="w-px h-5 bg-border mx-1" />

      {/* Fit to view */}
      <motion.button
        onClick={onFitToView}
        className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
        {...press}
        title="Fit to view"
      >
        <Maximize2 className="w-3.5 h-3.5" />
      </motion.button>
    </motion.div>
  );
}

export default CanvasToolbar;
CanvasToolbar

Source Code
