@hunterchen/canvas 0.6.0 → 0.8.0

package/src/components/canvas/backgrounds.tsx

@@ -32,8 +32,8 @@ export interface DefaultCanvasBackgroundProps {
   children?: ReactNode;
 }
 
-/** The default canvas gradient (neutral gray) */
-export const DEFAULT_CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, #e5e5e5 0%, #d4d4d4 41%, #a3a3a3 59%, #f5f5f5 90%)`;
+/** The default canvas gradient (neutral light gray) */
+export const DEFAULT_CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, #fafafa 0%, #f5f5f5 41%, #e5e5e5 59%, #fafafa 90%)`;
 
 /**
  * Default canvas background with gradient, dots, and noise filter.
@@ -42,7 +42,7 @@ export const DEFAULT_CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px
 export const DefaultCanvasBackground: React.FC<DefaultCanvasBackgroundProps> = ({
   gradientStyle,
   showDots = true,
-  dotColor = "#888888",
+  dotColor = "#a3a3a3",
   dotSize = 1.5,
   dotSpacing = 22,
   dotOpacity = 0.35,
@@ -117,7 +117,7 @@ export interface DefaultWrapperBackgroundProps {
  * Default wrapper/intro background gradient.
  */
 export const DefaultWrapperBackground: React.FC<DefaultWrapperBackgroundProps> = ({
-  gradient = "linear-gradient(to top, #d4d4d4 0%, #e5e5e5 50%, #f5f5f5 100%)",
+  gradient = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)",
   className,
   style,
 }) => {
@@ -197,9 +197,9 @@ export const DefaultIntroContent: React.FC<DefaultIntroContentProps> = ({
   );
 };
 
-// Default gradient values for export (neutral grays)
+// Default gradient values for export (neutral light grays)
 export const DEFAULT_INTRO_GRADIENT =
-  "linear-gradient(to top, #d4d4d4 0%, #e5e5e5 50%, #f5f5f5 100%)";
+  "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)";
 
 export const DEFAULT_CANVAS_BOX_GRADIENT =
-  "radial-gradient(130.38% 95% at 50.03% 97.25%, #d4d4d4 0%, #e5e5e5 48.09%, #f5f5f5 100%)";
+  "radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)";

package/src/components/canvas/canvas.tsx

@@ -35,6 +35,8 @@ import {
   STAGE2_TRANSITION,
   MOUSE_WHEEL_ZOOM_SENSITIVITY,
   TRACKPAD_ZOOM_SENSITIVITY,
+  DEFAULT_CANVAS_WIDTH,
+  DEFAULT_CANVAS_HEIGHT,
 } from "../../lib/constants";
 import useWindowDimensions from "../../hooks/useWindowDimensions";
 import Navbar from "./navbar";
@@ -42,6 +44,7 @@ import Toolbar from "./toolbar";
 import type {
   CanvasSection,
   NavItem,
+  NavbarConfig,
   SectionCoordinates,
   ToolbarConfig,
 } from "../../types";
@@ -54,6 +57,10 @@ interface Props {
   homeCoordinates: SectionCoordinates;
   children: React.ReactNode;
 
+  // Optional height and with params, if omitted sizing will be 6000x4000
+  canvasWidth?:number;
+  canvasHeight?:number;
+
   // Navbar data (optional). If omitted, navbar is hidden.
   /** Array of navigation items for the navbar. If omitted, navbar is hidden. */
   navItems?: NavItem[];
@@ -83,6 +90,10 @@ interface Props {
   // ============== Toolbar Customization ==============
   /** Toolbar customization options */
   toolbarConfig?: ToolbarConfig;
+
+  // ============== Navbar Customization ==============
+  /** Navbar customization options */
+  navbarConfig?: NavbarConfig;
 }
 
 const stopAllMotion = (
@@ -109,6 +120,9 @@ const Canvas: FC<Props> = ({
   canvasBackground,
   wrapperBackground,
   toolbarConfig,
+  navbarConfig,
+  canvasHeight,
+  canvasWidth,
 }) => {
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
 
@@ -116,8 +130,8 @@ const Canvas: FC<Props> = ({
 
   const hasNavbar = Boolean(navItems && navItems.length > 0);
 
-  const sceneWidth = canvasWidth;
-  const sceneHeight = canvasHeight;
+  const sceneWidth = canvasWidth ?? DEFAULT_CANVAS_WIDTH;
+  const sceneHeight = canvasHeight ?? DEFAULT_CANVAS_HEIGHT;
 
   const MIN_ZOOM = MIN_ZOOMS[getScreenSizeEnum(windowWidth)];
 
@@ -176,13 +190,13 @@ const Canvas: FC<Props> = ({
   // Precompute final stage1 scale and offsets (snapshot dimensions once on mount)
   const stage1Targets = useMemo(() => {
     const finalScale = Math.max(
-      (windowWidth || 0) / canvasWidth,
-      (windowHeight || 0) / canvasHeight
+      (windowWidth || 0) / sceneWidth,
+      (windowHeight || 0) / sceneHeight
     );
-    const endX = (windowWidth - canvasWidth * finalScale) / 2;
-    const endY = (windowHeight - canvasHeight * finalScale) / 2;
+    const endX = (windowWidth - sceneWidth * finalScale) / 2;
+    const endY = (windowHeight - sceneHeight * finalScale) / 2;
     return { finalScale, endX, endY };
-  }, [windowWidth, windowHeight]);
+  }, [windowWidth, windowHeight, sceneWidth, sceneHeight]);
 
   // Replace direct motion values with derived transforms during stage1
   const derivedScale = useTransform(
@@ -406,8 +420,8 @@ const Canvas: FC<Props> = ({
 
         let newZoom = initialZoom * (currentDistance / initialDistance);
         newZoom = Math.max(
-          (window.innerWidth / canvasWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas
-          (window.innerHeight / canvasHeight) * ZOOM_BOUND, // Ensure zoom is at least the height of the canvas
+          (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas
+          (window.innerHeight / sceneHeight) * ZOOM_BOUND, // Ensure zoom is at least the height of the canvas
           Math.min(newZoom, 10),
           MIN_ZOOM // Ensure zoom is not less than MIN_ZOOM
         );
@@ -517,8 +531,8 @@ const Canvas: FC<Props> = ({
             MAX_ZOOM
           ),
           MIN_ZOOM,
-          (window.innerWidth / canvasWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas
-          (window.innerHeight / canvasHeight) * ZOOM_BOUND // Ensure zoom is at least the height of the canvas
+          (window.innerWidth / sceneWidth) * ZOOM_BOUND, // Ensure zoom is at least the width of the canvas
+          (window.innerHeight / sceneHeight) * ZOOM_BOUND // Ensure zoom is at least the height of the canvas
         );
 
         const rect = viewportRef.current?.getBoundingClientRect();
@@ -636,13 +650,14 @@ const Canvas: FC<Props> = ({
                 config={toolbarConfig}
               />
             )}
-            {hasNavbar && navItems ? (
+            {hasNavbar && navItems && !navbarConfig?.hidden && (
               <Navbar
                 panToOffset={handlePanToOffset}
                 onReset={onResetViewAndItems}
                 items={navItems}
+                config={navbarConfig}
               />
-            ) : null}
+            )}
           </>
         )}
         <div
@@ -666,8 +681,8 @@ const Canvas: FC<Props> = ({
             animate={{ opacity: 1 }}
             transition={{ duration: 0.3, ease: "easeIn" }}
             style={{
-              width: `${canvasWidth}px`,
-              height: `${canvasHeight}px`,
+              width: `${sceneWidth}px`,
+              height: `${sceneHeight}px`,
               x,
               y,
               scale,

package/src/components/canvas/navbar/index.tsx

@@ -1,7 +1,7 @@
 import { motion, useMotionValueEvent } from "framer-motion";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import SingleButton from "./single-button";
-import type { NavItem } from "../../../types";
+import type { NavItem, NavbarConfig, NavbarPosition } from "../../../types";
 import { useCanvasContext } from "../../../contexts/CanvasContext";
 import useWindowDimensions from "../../../hooks/useWindowDimensions";
 import { usePerformanceMode } from "../../../hooks/usePerformanceMode";
@@ -13,6 +13,7 @@ import {
   RESPONSIVE_ZOOM_MAP,
   NAVBAR_DEBOUNCE_MS,
 } from "../../../lib/constants";
+import { cn } from "../../../lib/utils";
 
 interface NavbarProps {
   panToOffset: (
@@ -23,12 +24,50 @@ interface NavbarProps {
   onReset: () => void;
   /** Array of navigation items defining sections, their icons, and coordinates */
   items: NavItem[];
+  /** Navbar configuration options */
+  config?: NavbarConfig;
 }
 
+const positionStyles: Record<NavbarPosition, React.CSSProperties> = {
+  top: {
+    top: "1rem",
+    bottom: "auto",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+  bottom: {
+    bottom: "1rem",
+    top: "auto",
+    left: "50%",
+    transform: "translateX(-50%)",
+  },
+  left: {
+    left: "1rem",
+    right: "auto",
+    top: "50%",
+    transform: "translateY(-50%)",
+  },
+  right: {
+    right: "1rem",
+    left: "auto",
+    top: "50%",
+    transform: "translateY(-50%)",
+  },
+};
+
+// Responsive position adjustments (mobile vs desktop)
+const responsivePositionClasses: Record<NavbarPosition, string> = {
+  top: "top-12 md:top-4",
+  bottom: "bottom-12 md:bottom-4",
+  left: "left-4",
+  right: "right-4",
+};
+
 export default function Navbar({
   panToOffset,
   onReset,
   items,
+  config = {},
 }: NavbarProps) {
   const { x, y, scale, animationStage, setNextTargetSection } =
     useCanvasContext();
@@ -50,6 +89,20 @@ export default function Navbar({
   // Derive debounce duration from performance mode
   const debounceMs = NAVBAR_DEBOUNCE_MS[mode] ?? 0;
 
+  // Extract config values
+  const {
+    display = "icons",
+    position = "bottom",
+    className,
+    style,
+    buttonConfig,
+    tooltipConfig,
+    gap,
+    padding,
+  } = config;
+
+  const isVertical = position === "left" || position === "right";
+
   // Find the home section from items
   const homeItem = useMemo(() => items.find((item) => item.isHome), [items]);
 
@@ -141,24 +194,43 @@ export default function Navbar({
     };
   }, [handlePan, animationStage, homeItem]);
 
+  // Compute container styles (positioning only)
+  const containerStyle: React.CSSProperties = {
+    position: "fixed",
+    zIndex: 1000,
+    pointerEvents: "auto",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...positionStyles[position],
+  };
+
+  // Compute inner container styles (visual styling)
+  const innerStyle: React.CSSProperties = {
+    ...(gap !== undefined && { gap: `${gap}px` }),
+    ...(padding !== undefined && { padding: `${padding}px` }),
+    ...(isVertical && { flexDirection: "column" }),
+    ...style,
+  };
+
   return (
     <div
-      className="bottom-12 md:bottom-4"
-      style={{
-        position: "fixed",
-        left: "50%",
-        transform: "translateX(-50%)",
-        zIndex: 1000,
-        pointerEvents: "auto",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
+      className={responsivePositionClasses[position]}
+      style={containerStyle}
     >
       {/* padding to prevent edge bug */}
-      <div className="px-4 md:px-8">
-        <motion.div className="flex select-none items-center justify-center gap-1 rounded-[10px] border-[1px] border-border bg-canvas-offwhite p-1 shadow-[0_6px_12px_rgba(0,0,0,0.10)]">
-          <div className="flex items-center gap-1">
+      <div className={isVertical ? "py-4 md:py-8" : "px-4 md:px-8"}>
+        <motion.div
+          className={cn(
+            "flex select-none items-center justify-center gap-1 rounded-[10px] border p-1 shadow-[0_6px_12px_rgba(0,0,0,0.08)]",
+            !style?.backgroundColor && "bg-white",
+            !style?.borderColor && "border-neutral-200",
+            isVertical && "flex-col",
+            className,
+          )}
+          style={innerStyle}
+        >
+          <div className={cn("flex items-center gap-1", isVertical && "flex-col")}>
             {items.map((item) => (
               <SingleButton
                 key={item.id}
@@ -167,6 +239,10 @@ export default function Navbar({
                 onClick={() => handlePan(item)}
                 isPushed={expandedButton === item.id}
                 onDebouncedClick={handleDebouncedClick}
+                displayMode={display}
+                buttonConfig={buttonConfig}
+                tooltipConfig={tooltipConfig}
+                isVertical={isVertical}
               />
             ))}
           </div>

package/src/components/canvas/navbar/single-button.tsx

@@ -1,6 +1,12 @@
 import { useState, useEffect } from "react";
 import * as LucideIcons from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
+import type {
+  NavbarDisplayMode,
+  NavbarButtonConfig,
+  NavbarTooltipConfig,
+} from "../../../types";
+import { cn } from "../../../lib/utils";
 
 interface SingleButtonProps {
   label: string;
@@ -10,6 +16,14 @@ interface SingleButtonProps {
   isPushed: boolean;
   link?: string;
   onDebouncedClick?: (callback: () => void) => void;
+  /** Display mode for the button */
+  displayMode?: NavbarDisplayMode;
+  /** Button styling configuration */
+  buttonConfig?: NavbarButtonConfig;
+  /** Tooltip configuration */
+  tooltipConfig?: NavbarTooltipConfig;
+  /** Whether the navbar is in vertical layout */
+  isVertical?: boolean;
 }
 
 export default function SingleButton({
@@ -19,17 +33,48 @@ export default function SingleButton({
   isPushed,
   link,
   onDebouncedClick,
+  displayMode = "icons",
+  buttonConfig = {},
+  tooltipConfig = {},
+  isVertical = false,
 }: SingleButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [showTag, setShowTag] = useState(false);
   const [copiedEmail, setCopiedEmail] = useState(false);
+
   const isLucideIconName = typeof icon === "string";
   const IconComponent = isLucideIconName
     ? (LucideIcons[icon as keyof typeof LucideIcons] as LucideIcons.LucideIcon | undefined)
     : icon;
-  const TagDelay = 100;
 
-  if (!IconComponent) {
+  // Extract config values
+  const {
+    className: buttonClassName,
+    style: buttonStyle,
+    activeClassName,
+    activeStyle,
+    hoverClassName,
+    hoverStyle,
+    iconClassName,
+    iconSize = 20,
+    labelClassName,
+    labelStyle,
+  } = buttonConfig;
+
+  const {
+    disabled: tooltipDisabled = false,
+    className: tooltipClassName,
+    style: tooltipStyle,
+    delay: tooltipDelay = 100,
+  } = tooltipConfig;
+
+  // Determine what to show based on display mode
+  const showIcon = displayMode !== "labels";
+  const allowExpand = displayMode === "icons"; // Only expand on active in icons mode
+  const showTooltip = (displayMode === "icons" || displayMode === "compact") && !tooltipDisabled;
+
+  // Validate icon component for modes that need it
+  if (showIcon && !IconComponent) {
     throw new Error(
       "A valid 'icon' prop is required (Lucide icon name or custom icon component).",
     );
@@ -38,10 +83,10 @@ export default function SingleButton({
   useEffect(() => {
     let timeoutId: NodeJS.Timeout;
 
-    if (isHovered) {
+    if (isHovered && showTooltip) {
       timeoutId = setTimeout(() => {
         setShowTag(true);
-      }, TagDelay);
+      }, tooltipDelay);
     } else {
       setShowTag(false);
     }
@@ -49,7 +94,7 @@ export default function SingleButton({
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [isHovered]);
+  }, [isHovered, showTooltip, tooltipDelay]);
 
   useEffect(() => {
     setShowTag(false);
@@ -85,11 +130,168 @@ export default function SingleButton({
 
   const displayLabel = copiedEmail ? "Email copied!" : label;
 
+  // Compute button classes
+  const baseButtonClass = "relative flex items-center rounded-md p-2 text-neutral-500 transition-colors duration-200 focus:outline-none";
+  // Only apply default classes if no custom style is provided
+  const stateClass = isPushed
+    ? (activeClassName || (!activeStyle && "bg-neutral-200"))
+    : isHovered
+      ? (hoverClassName || (!hoverStyle && "bg-neutral-100"))
+      : "";
+
+  // Compute button styles
+  const computedButtonStyle: React.CSSProperties = {
+    ...buttonStyle,
+    ...(isPushed && activeStyle),
+    ...(isHovered && !isPushed && hoverStyle),
+  };
+
+  // Compute icon classes and styles
+  const iconSizeStyle = { width: iconSize, height: iconSize };
+  const baseIconClass = "flex-shrink-0";
+  // Only apply default icon colors if no custom button color style is provided
+  const hasCustomColor = buttonStyle?.color;
+  const iconColorClass = hasCustomColor
+    ? ""
+    : isPushed
+      ? "text-neutral-700"
+      : "text-neutral-500";
+
+  // Compute label classes
+  const baseLabelClass = "whitespace-nowrap font-canvas-figtree text-sm font-medium text-neutral-700";
+
+  // Tooltip position based on vertical layout
+  const tooltipPositionClass = isVertical
+    ? "left-full top-1/2 -translate-y-1/2 ml-2"
+    : "-top-10 left-1/2";
+  const tooltipTransform = isVertical
+    ? { x: 0, y: "-50%" }
+    : { x: "-50%" };
+
+  // Render icon element
+  const renderIcon = () => {
+    if (!showIcon || !IconComponent) return null;
+    return (
+      <IconComponent
+        className={cn(baseIconClass, iconColorClass, iconClassName)}
+        style={iconSizeStyle}
+      />
+    );
+  };
+
+  // Render label element
+  const renderLabel = (animated = false) => {
+    if (animated) {
+      return (
+        <motion.span
+          initial={{ opacity: 0, width: 0 }}
+          animate={{ opacity: 1, width: "auto" }}
+          exit={{ opacity: 0, width: 0 }}
+          transition={{
+            duration: 0.1,
+            ease: "easeInOut",
+          }}
+          className={cn("overflow-hidden", baseLabelClass, labelClassName)}
+          style={labelStyle}
+        >
+          {displayLabel}
+        </motion.span>
+      );
+    }
+    return (
+      <span
+        className={cn(baseLabelClass, labelClassName)}
+        style={labelStyle}
+      >
+        {displayLabel}
+      </span>
+    );
+  };
+
+  // Render tooltip
+  const renderTooltip = () => {
+    if (!showTooltip || !showTag || isPushed) return null;
+
+    return (
+      <AnimatePresence>
+        <motion.div
+          initial={{ opacity: 0, y: isVertical ? 0 : 5, scale: 0.9, ...tooltipTransform }}
+          animate={{ opacity: 1, y: 0, scale: 1, ...tooltipTransform }}
+          exit={{ opacity: 0, y: isVertical ? 0 : 5, scale: 0.9, ...tooltipTransform }}
+          transition={{
+            duration: 0.05,
+            ease: "easeOut",
+          }}
+          className={cn("pointer-events-none absolute z-50", tooltipPositionClass)}
+        >
+          <div className="rounded-sm bg-gradient-to-t from-black/10 to-transparent px-[1px] pb-[2.5px] pt-[1px]">
+            <div
+              className={cn(
+                "whitespace-nowrap rounded-sm px-2 py-1 font-canvas-figtree text-sm",
+                !tooltipStyle?.backgroundColor && "bg-neutral-50",
+                !tooltipStyle?.color && "text-neutral-600",
+                tooltipClassName,
+              )}
+              style={tooltipStyle}
+            >
+              {displayLabel}
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    );
+  };
+
+  // Render based on display mode
+  const renderContent = () => {
+    // Labels only mode
+    if (displayMode === "labels") {
+      return renderLabel();
+    }
+
+    // Icons + labels always mode
+    if (displayMode === "icons-labels") {
+      return (
+        <div className="flex items-center gap-2">
+          {renderIcon()}
+          {renderLabel()}
+        </div>
+      );
+    }
+
+    // Compact mode - icons only, no expansion
+    if (displayMode === "compact") {
+      return (
+        <>
+          {renderIcon()}
+          {renderTooltip()}
+        </>
+      );
+    }
+
+    // Icons mode (default) - expands on active
+    if (isPushed && allowExpand) {
+      return (
+        <div className="flex items-center gap-2">
+          <div>{renderIcon()}</div>
+          {renderLabel(true)}
+        </div>
+      );
+    }
+
+    return (
+      <>
+        {renderIcon()}
+        {renderTooltip()}
+      </>
+    );
+  };
+
   return (
     <motion.button
       aria-label={label}
-      className={`relative flex items-center rounded-md p-2 text-canvas-medium transition-colors duration-200 ${isPushed ? "bg-[#EEE2FB]" : isHovered ? "bg-canvas-highlight" : ""
-        }`}
+      className={cn(baseButtonClass, stateClass, buttonClassName)}
+      style={computedButtonStyle}
       onClick={handleClick}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -100,55 +302,7 @@ export default function SingleButton({
         damping: 25,
       }}
     >
-      {isPushed ? (
-        <div className="flex items-center gap-2">
-          <div>
-            <IconComponent
-              className={`h-5 w-5 flex-shrink-0 ${isPushed ? (isLucideIconName ? "text-canvas-emphasis" : "text-white") : "text-canvas-medium"
-                }`}
-            />
-          </div>
-          <motion.span
-            initial={{ opacity: 0, width: 0 }}
-            animate={{ opacity: 1, width: "auto" }}
-            exit={{ opacity: 0, width: 0 }}
-            transition={{
-              duration: 0.1,
-              ease: "easeInOut",
-            }}
-            className="overflow-hidden whitespace-nowrap font-canvas-figtree text-sm font-medium text-canvas-emphasis"
-          >
-            {displayLabel}
-          </motion.span>
-        </div>
-      ) : (
-        <div>
-          <IconComponent
-            className={`h-5 w-5 flex-shrink-0 ${isPushed ? (isLucideIconName ? "text-canvas-emphasis" : "text-white") : "text-canvas-medium"
-              }`}
-          />
-          <AnimatePresence>
-            {showTag && !isPushed && (
-              <motion.div
-                initial={{ opacity: 0, y: 5, scale: 0.9, x: "-50%" }}
-                animate={{ opacity: 1, y: 0, scale: 1, x: "-50%" }}
-                exit={{ opacity: 0, y: 5, scale: 0.9, x: "-50%" }}
-                transition={{
-                  duration: 0.05,
-                  ease: "easeOut",
-                }}
-                className="pointer-events-none absolute -top-10 left-1/2 z-50"
-              >
-                <div className="rounded-sm bg-gradient-to-t from-black/10 to-transparent px-[1px] pb-[2.5px] pt-[1px]">
-                  <div className="whitespace-nowrap rounded-sm bg-canvas-offwhite px-2 py-1 font-canvas-figtree text-sm text-canvas-medium">
-                    {displayLabel}
-                  </div>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      )}
+      {renderContent()}
     </motion.button>
   );
 }

package/src/index.ts

@@ -56,4 +56,9 @@ export type {
   ToolbarConfig,
   ToolbarPosition,
   ToolbarDisplayMode,
+  NavbarConfig,
+  NavbarPosition,
+  NavbarDisplayMode,
+  NavbarButtonConfig,
+  NavbarTooltipConfig,
 } from "./types";

package/src/lib/canvas.ts

@@ -1,16 +1,16 @@
 import { animate, type MotionValue, type Point } from "framer-motion";
 import { useMemo } from "react";
 import {
-  CANVAS_WIDTH,
-  CANVAS_HEIGHT,
+  DEFAULT_CANVAS_WIDTH,
+  DEFAULT_CANVAS_HEIGHT,
   MAX_DIM_RATIO,
   INTRO_ASPECT_RATIO,
   PAN_SPRING,
   ScreenSizeEnum,
 } from "./constants";
 
-export const canvasWidth = CANVAS_WIDTH;
-export const canvasHeight = CANVAS_HEIGHT;
+export const canvasWidth = DEFAULT_CANVAS_WIDTH;
+export const canvasHeight = DEFAULT_CANVAS_HEIGHT;
 
 // Re-export ScreenSizeEnum for backward compatibility
 export { ScreenSizeEnum } from "./constants";

package/src/lib/constants.ts

@@ -24,10 +24,10 @@ export enum ScreenSizeEnum {
 // ============================================================================
 
 /** Default canvas width in pixels */
-export const CANVAS_WIDTH = 6000;
+export const DEFAULT_CANVAS_WIDTH = 6000;
 
 /** Default canvas height in pixels */
-export const CANVAS_HEIGHT = 4000;
+export const DEFAULT_CANVAS_HEIGHT = 4000;
 
 // ============================================================================
 // INTRO ANIMATION