@hunterchen/canvas 0.7.0 → 0.9.0

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/styles.css

@@ -4,19 +4,21 @@
 
 @layer base {
   :root {
-    --canvas-beige: #f7f1e5;
-    --canvas-coral: #ffb5a7;
-    --canvas-lilac: #d9c8e6;
-    --canvas-salmon: #ffa585;
-    --canvas-heavy: #3c204c;
-    --canvas-emphasis: #513b7a;
-    --canvas-active: #8f57ad;
-    --canvas-tinted: #c9a7db;
-    --canvas-medium: #776780;
-    --canvas-light: #c3b8cb;
-    --canvas-faint-lilac: #f5f2f7;
-    --canvas-offwhite: #fdfcfd;
-    --canvas-highlight: #f5f2f7;
+    /* Neutral gray palette (default) */
+    --canvas-beige: #f5f5f5;
+    --canvas-coral: #d4d4d4;
+    --canvas-lilac: #e5e5e5;
+    --canvas-salmon: #a3a3a3;
+    --canvas-heavy: #171717;
+    --canvas-emphasis: #262626;
+    --canvas-active: #525252;
+    --canvas-tinted: #a3a3a3;
+    --canvas-medium: #737373;
+    --canvas-light: #a3a3a3;
+    --canvas-faint-lilac: #fafafa;
+    --canvas-offwhite: #ffffff;
+    --canvas-highlight: #f5f5f5;
+    --canvas-pushed: #e5e5e5;
     --canvas-border-light: 0 0% 89%;
   }
 }

package/src/types/index.ts

@@ -97,3 +97,94 @@ export interface ToolbarConfig {
   /** Format for scale. Default: '1.00x' */
   scaleFormat?: (scale: number) => string;
 }
+
+/**
+ * Preset positions for the navbar
+ */
+export type NavbarPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Display modes for navbar items
+ */
+export type NavbarDisplayMode =
+  | 'icons'         // Icons only, label shows on expand (default)
+  | 'labels'        // Labels only, no icons
+  | 'icons-labels'  // Always show both icon and label
+  | 'compact';      // Icons only, no expansion - just highlight
+
+/**
+ * Tooltip configuration for navbar buttons
+ */
+export interface NavbarTooltipConfig {
+  /** Disable tooltips entirely. Default: false */
+  disabled?: boolean;
+  /** Additional className for tooltip */
+  className?: string;
+  /** Inline styles for tooltip */
+  style?: React.CSSProperties;
+  /** Delay before showing tooltip in ms. Default: 100 */
+  delay?: number;
+}
+
+/**
+ * Button styling configuration for navbar
+ */
+export interface NavbarButtonConfig {
+  /** Additional className for all buttons */
+  className?: string;
+  /** Inline styles for all buttons */
+  style?: React.CSSProperties;
+  /** Active/pushed state className */
+  activeClassName?: string;
+  /** Active state inline styles */
+  activeStyle?: React.CSSProperties;
+  /** Hover state className */
+  hoverClassName?: string;
+  /** Hover state inline styles */
+  hoverStyle?: React.CSSProperties;
+  /** Icon className */
+  iconClassName?: string;
+  /** Icon size in pixels. Default: 20 */
+  iconSize?: number;
+  /** Label className */
+  labelClassName?: string;
+  /** Label inline styles */
+  labelStyle?: React.CSSProperties;
+}
+
+/**
+ * Configuration options for the canvas navbar
+ */
+export interface NavbarConfig {
+  // === Visibility ===
+  /** Hide the navbar entirely. Default: false */
+  hidden?: boolean;
+
+  // === Display Mode ===
+  /** How to display items. Default: 'icons' */
+  display?: NavbarDisplayMode;
+
+  // === Positioning ===
+  /** Preset position. Default: 'bottom' */
+  position?: NavbarPosition;
+
+  // === Container Styling ===
+  /** Additional className for the navbar container */
+  className?: string;
+  /** Inline styles for the navbar container */
+  style?: React.CSSProperties;
+
+  // === Button Configuration ===
+  /** Button styling options */
+  buttonConfig?: NavbarButtonConfig;
+
+  // === Tooltip Configuration ===
+  /** Tooltip options */
+  tooltipConfig?: NavbarTooltipConfig;
+
+  // === Spacing ===
+  /** Gap between buttons in pixels. Default: 4 */
+  gap?: number;
+  /** Padding inside the navbar in pixels. Default: 4 */
+  padding?: number;
+}

package/dist/components/canvas/offest.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-export const OffsetComponent = ({ offset, children, }) => {
-    return (_jsx(motion.div, { style: {
-            position: "absolute",
-            top: offset.y,
-            left: offset.x,
-            width: "100%",
-            height: "100%",
-        }, children: children }));
-};
-//# sourceMappingURL=offest.js.map

package/dist/components/canvas/offest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"offest.js","sourceRoot":"","sources":["../../../src/components/canvas/offest.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,eAAe,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,MAAM,EACN,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,MAAM,CAAC,GAAG,IACT,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,MAAM,CAAC,CAAC;YACb,IAAI,EAAE,MAAM,CAAC,CAAC;YACd,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf,YAEA,QAAQ,GACE,CACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAErE,wBAAwB;AACxB,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,iCAAiC,CAAC;AAOzC,WAAW;AACX,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,+BAA+B,CAAC;AAMvC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE5F,YAAY;AACZ,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}

package/dist/types/index.js

@@ -1,6 +0,0 @@
-/**
- * Generic types for the canvas library
- * Apps should extend these types with their specific enums and constants
- */
-export {};
-//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG"}