@hunterchen/canvas 0.7.0 → 0.9.0

package/README.md

@@ -133,7 +133,35 @@ const navItems: NavItem[] = [
 </Canvas>
 ```
 
-When `navItems` is provided, the canvas will render a navbar with buttons to navigate between sections. The navbar uses Lucide icons, so make sure the icon names match available Lucide icons.
+When `navItems` is provided, the canvas will render a navbar with buttons to navigate between sections.
+
+#### Using Icons
+
+The `icon` property accepts either a Lucide icon name (string) or a custom React component:
+
+```tsx
+import { Heart } from 'lucide-react';
+
+// Using Lucide icon names (strings)
+const navItems: NavItem[] = [
+  { id: "home", label: "Home", icon: "Home", ...coordinates.home, isHome: true },
+  { id: "about", label: "About", icon: "Info", ...coordinates.about },
+];
+
+// Using custom icon components
+const CustomIcon = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+);
+
+const navItems: NavItem[] = [
+  { id: "home", label: "Home", icon: Heart, ...coordinates.home, isHome: true },
+  { id: "custom", label: "Custom", icon: CustomIcon, ...coordinates.custom },
+];
+```
+
+For Lucide icons, use the PascalCase icon name as a string (e.g., `"Home"`, `"Settings"`, `"ChevronRight"`). See the [Lucide icons list](https://lucide.dev/icons) for available icons.
 
 ### Canvas Dimensions
 
@@ -263,7 +291,7 @@ import { Canvas, DefaultIntroContent } from '@hunterchen/canvas';
 
 #### Complete Theming Example (Hack Western Style)
 
-Here's a complete example showing how to apply a custom theme:
+Here's a complete example showing how to apply a custom theme with warm coral/lilac colors (used by [Hack Western](https://hackwestern.com)):
 
 ```tsx
 import {
@@ -275,10 +303,10 @@ import {
   canvasHeight,
 } from '@hunterchen/canvas';
 
-// Define your theme colors
-const CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, var(--coral) 0%, var(--salmon) 41%, var(--lilac) 59%, var(--beige) 90%)`;
-const INTRO_GRADIENT = "linear-gradient(to top, #FEB6AF 0%, #EAD2DF 15%, #EFE3E1 50%)";
-const BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #EFB8A0 0%, #EAD2DF 48.09%, #EFE3E1 100%)";
+// Hack Western theme colors (coral/lilac warm palette)
+const CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, #f7f1e5 0%, #d9c8e6 41%, #ffb5a7 59%, #f7f1e5 90%)`;
+const INTRO_GRADIENT = "linear-gradient(to top, #ffb5a7 0%, #d9c8e6 50%, #f7f1e5 100%)";
+const BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #ffb5a7 0%, #d9c8e6 48.09%, #f7f1e5 100%)";
 
 function App() {
   return (
@@ -291,19 +319,26 @@ function App() {
         <DefaultIntroContent
           logoSrc="/logo.svg"
           logoAlt="Logo"
-          title="MY BRAND"
+          title="HACK WESTERN"
+          titleClassName="text-[#513b7a]"
         />
       }
       loadingText="LOADING..."
       canvasBackground={
         <DefaultCanvasBackground
           gradientStyle={CANVAS_GRADIENT}
-          dotColor="#776780"
+          dotColor="#c9a7db"
         />
       }
       wrapperBackground={
         <DefaultWrapperBackground gradient={INTRO_GRADIENT} />
       }
+      navbarConfig={{
+        buttonConfig: {
+          activeClassName: "bg-[#f5f2f7]",
+          hoverClassName: "bg-[#f5f2f7]",
+        },
+      }}
     >
       {/* Your canvas content */}
     </Canvas>
@@ -311,6 +346,31 @@ function App() {
 }
 ```
 
+#### Customizing CSS Variables
+
+The library uses CSS variables for theming. You can override them in your CSS to customize colors globally:
+
+```css
+:root {
+  /* Text colors */
+  --canvas-heavy: #3c204c;      /* Darkest text */
+  --canvas-emphasis: #513b7a;   /* Emphasized text */
+  --canvas-active: #8f57ad;     /* Active/selected state */
+  --canvas-medium: #776780;     /* Medium text */
+  --canvas-light: #c3b8cb;      /* Light text */
+
+  /* Background colors */
+  --canvas-beige: #f7f1e5;      /* Warm beige */
+  --canvas-coral: #ffb5a7;      /* Coral accent */
+  --canvas-lilac: #d9c8e6;      /* Lilac accent */
+  --canvas-salmon: #ffa585;     /* Salmon accent */
+  --canvas-tinted: #c9a7db;     /* Tinted purple */
+  --canvas-faint-lilac: #f5f2f7; /* Very light lilac */
+  --canvas-offwhite: #fdfcfd;   /* Off-white */
+  --canvas-highlight: #f5f2f7;  /* Highlight/hover */
+}
+```
+
 ### Toolbar Customization
 
 The toolbar displays the current canvas coordinates and zoom level. You can customize its position, appearance, and behavior using the `toolbarConfig` prop.
@@ -398,6 +458,113 @@ The toolbar displays the current canvas coordinates and zoom level. You can cust
 <Canvas toolbarConfig={{ hidden: true }} />
 ```
 
+### Navbar Customization
+
+The navbar provides navigation buttons to jump between canvas sections. You can customize its position, display mode, button styling, and tooltips using the `navbarConfig` prop.
+
+```tsx
+<Canvas
+  homeCoordinates={homeCoordinates}
+  navItems={navItems}
+  navbarConfig={{
+    position: "top",
+    display: "icons-labels",
+  }}
+>
+  {/* ... */}
+</Canvas>
+```
+
+**NavbarConfig options:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `hidden` | `boolean` | `false` | Hide the navbar entirely |
+| `display` | `'icons' \| 'labels' \| 'icons-labels' \| 'compact'` | `'icons'` | Display mode for items |
+| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Navbar position |
+| `className` | `string` | - | Additional CSS classes for container |
+| `style` | `CSSProperties` | - | Inline styles for container |
+| `buttonConfig` | `NavbarButtonConfig` | - | Button styling options (see below) |
+| `tooltipConfig` | `NavbarTooltipConfig` | - | Tooltip options (see below) |
+| `gap` | `number` | `4` | Gap between buttons in pixels |
+| `padding` | `number` | `4` | Padding inside navbar in pixels |
+
+**NavbarButtonConfig options:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional classes for all buttons |
+| `style` | `CSSProperties` | Inline styles for all buttons |
+| `activeClassName` | `string` | Classes for active/pushed state |
+| `activeStyle` | `CSSProperties` | Styles for active state |
+| `hoverClassName` | `string` | Classes for hover state |
+| `hoverStyle` | `CSSProperties` | Styles for hover state |
+| `iconClassName` | `string` | Classes for icons |
+| `iconSize` | `number` | Icon size in pixels (default: 20) |
+| `labelClassName` | `string` | Classes for labels |
+| `labelStyle` | `CSSProperties` | Styles for labels |
+
+**NavbarTooltipConfig options:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Disable tooltips entirely |
+| `className` | `string` | - | Additional classes for tooltip |
+| `style` | `CSSProperties` | - | Inline styles for tooltip |
+| `delay` | `number` | `100` | Delay before showing tooltip (ms) |
+
+#### Display Modes
+
+- **`icons`** (default): Shows icons only, expands to show label when active, tooltip on hover
+- **`labels`**: Shows labels only, no icons
+- **`icons-labels`**: Always shows both icon and label for all items
+- **`compact`**: Icons only, no expansion on active, just highlights
+
+#### Navbar Examples
+
+```tsx
+// Position at top
+<Canvas navbarConfig={{ position: "top" }} />
+
+// Labels only (no icons)
+<Canvas navbarConfig={{ display: "labels" }} />
+
+// Always show icons + labels
+<Canvas navbarConfig={{ display: "icons-labels" }} />
+
+// Compact mode (icons only, no expansion)
+<Canvas navbarConfig={{ display: "compact" }} />
+
+// Custom container styling
+<Canvas
+  navbarConfig={{
+    className: "bg-black/80 backdrop-blur-md",
+    style: { borderRadius: "20px" },
+  }}
+/>
+
+// Custom button styling
+<Canvas
+  navbarConfig={{
+    buttonConfig: {
+      activeClassName: "bg-blue-500",
+      activeStyle: { color: "white" },
+      hoverClassName: "bg-gray-100",
+      iconSize: 24,
+    },
+  }}
+/>
+
+// Disable tooltips
+<Canvas navbarConfig={{ tooltipConfig: { disabled: true } }} />
+
+// Vertical sidebar layout
+<Canvas navbarConfig={{ position: "left" }} />
+
+// Hide navbar entirely
+<Canvas navbarConfig={{ hidden: true }} />
+```
+
 ### Exported Constants
 
 The library exports default gradient values you can use as a starting point:
@@ -499,6 +666,11 @@ npm run type-check
 - `ToolbarConfig` - Toolbar customization options
 - `ToolbarPosition` - Preset toolbar positions
 - `ToolbarDisplayMode` - Toolbar display modes
+- `NavbarConfig` - Navbar customization options
+- `NavbarPosition` - Preset navbar positions
+- `NavbarDisplayMode` - Navbar display modes
+- `NavbarButtonConfig` - Navbar button styling options
+- `NavbarTooltipConfig` - Navbar tooltip options
 - `NavItem` - Navigation item configuration
 - `SectionCoordinates` - Section coordinate definition
 
@@ -525,6 +697,22 @@ The `Canvas` component accepts the following props:
 | `canvasBackground` | `ReactNode` | No | `<DefaultCanvasBackground />` | Custom canvas background |
 | `wrapperBackground` | `ReactNode` | No | - | Custom wrapper/intro background |
 | `toolbarConfig` | `ToolbarConfig` | No | - | Toolbar customization options |
+| `navbarConfig` | `NavbarConfig` | No | - | Navbar customization options |
+
+### NavItem Props
+
+Each item in the `navItems` array has the following properties:
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `id` | `string` | Yes | Unique identifier for this section |
+| `label` | `string` | Yes | Display label shown in the navbar |
+| `icon` | `string \| React.ComponentType` | Yes | Lucide icon name or custom component |
+| `x` | `number` | Yes | X coordinate on the canvas |
+| `y` | `number` | Yes | Y coordinate on the canvas |
+| `width` | `number` | Yes | Section viewport width |
+| `height` | `number` | Yes | Section viewport height |
+| `isHome` | `boolean` | No | If true, clicking triggers reset/home behavior |
 
 ### Draggable Props
 

package/dist/components/canvas/backgrounds.d.ts

@@ -25,8 +25,8 @@ export interface DefaultCanvasBackgroundProps {
     /** Additional children to render in the background */
     children?: ReactNode;
 }
-/** The default canvas gradient (neutral gray) */
-export declare const DEFAULT_CANVAS_GRADIENT = "radial-gradient(ellipse 6000px 4000px at 3000px 4000px, #e5e5e5 0%, #d4d4d4 41%, #a3a3a3 59%, #f5f5f5 90%)";
+/** The default canvas gradient (neutral light gray) */
+export declare const DEFAULT_CANVAS_GRADIENT = "radial-gradient(ellipse 6000px 4000px at 3000px 4000px, #fafafa 0%, #f5f5f5 41%, #e5e5e5 59%, #fafafa 90%)";
 /**
  * Default canvas background with gradient, dots, and noise filter.
  * All aspects are customizable via props.
@@ -65,6 +65,6 @@ export interface DefaultIntroContentProps {
  * Can be customized or replaced entirely.
  */
 export declare const DefaultIntroContent: React.FC<DefaultIntroContentProps>;
-export declare const DEFAULT_INTRO_GRADIENT = "linear-gradient(to top, #d4d4d4 0%, #e5e5e5 50%, #f5f5f5 100%)";
-export declare const DEFAULT_CANVAS_BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #d4d4d4 0%, #e5e5e5 48.09%, #f5f5f5 100%)";
+export declare const DEFAULT_INTRO_GRADIENT = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)";
+export declare const DEFAULT_CANVAS_BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)";
 //# sourceMappingURL=backgrounds.d.ts.map

package/dist/components/canvas/backgrounds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"backgrounds.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/backgrounds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9C,MAAM,WAAW,4BAA4B;IAC3C,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iDAAiD;AACjD,eAAO,MAAM,uBAAuB,+GAA6J,CAAC;AAElM;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA6D1E,CAAC;AAIF,MAAM,WAAW,6BAA6B;IAC5C,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAc5E,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0ClE,CAAC;AAGF,eAAO,MAAM,sBAAsB,mEAC+B,CAAC;AAEnE,eAAO,MAAM,2BAA2B,4FACmD,CAAC"}
+{"version":3,"file":"backgrounds.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/backgrounds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9C,MAAM,WAAW,4BAA4B;IAC3C,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,uDAAuD;AACvD,eAAO,MAAM,uBAAuB,+GAA6J,CAAC;AAElM;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA6D1E,CAAC;AAIF,MAAM,WAAW,6BAA6B;IAC5C,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAc5E,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0ClE,CAAC;AAGF,eAAO,MAAM,sBAAsB,mEAC+B,CAAC;AAEnE,eAAO,MAAM,2BAA2B,4FACmD,CAAC"}

package/dist/components/canvas/backgrounds.js

@@ -1,47 +1,76 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvasHeight, canvasWidth } from "../../lib/canvas.js";
+import { cn } from "../../lib/utils.js";
 import { motion } from "framer-motion";
-import { canvasWidth, canvasHeight } from "../../lib/canvas";
-import { cn } from "../../lib/utils";
-/** 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%)`;
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/canvas/backgrounds.tsx
+/** The default canvas gradient (neutral light gray) */
+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.
- * All aspects are customizable via props.
- */
-export const DefaultCanvasBackground = ({ gradientStyle, showDots = true, dotColor = "#888888", dotSize = 1.5, dotSpacing = 22, dotOpacity = 0.35, showFilter = true, filterOpacity = 0.6, gradientClassName, dotsClassName, filterClassName, children, }) => {
-    const gradientImage = gradientStyle ?? DEFAULT_CANVAS_GRADIENT;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("pointer-events-none absolute inset-0 h-full w-full", gradientClassName), style: {
-                    backgroundImage: gradientImage,
-                } }), showDots && (_jsx("div", { className: cn("pointer-events-none absolute inset-0 h-full w-full", dotsClassName), style: {
-                    backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,
-                    backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
-                    opacity: dotOpacity,
-                } })), showFilter && (_jsx("div", { className: cn("pointer-events-none absolute inset-0 hidden h-full w-full bg-none filter md:inline md:bg-noise", filterClassName), style: {
-                    opacity: filterOpacity,
-                    filter: "contrast(0.6)",
-                } })), children] }));
+* Default canvas background with gradient, dots, and noise filter.
+* All aspects are customizable via props.
+*/
+const DefaultCanvasBackground = ({ gradientStyle, showDots = true, dotColor = "#a3a3a3", dotSize = 1.5, dotSpacing = 22, dotOpacity = .35, showFilter = true, filterOpacity = .6, gradientClassName, dotsClassName, filterClassName, children }) => {
+	const gradientImage = gradientStyle ?? DEFAULT_CANVAS_GRADIENT;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-0 h-full w-full", gradientClassName),
+			style: { backgroundImage: gradientImage }
+		}),
+		showDots && /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-0 h-full w-full", dotsClassName),
+			style: {
+				backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,
+				backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
+				opacity: dotOpacity
+			}
+		}),
+		showFilter && /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-0 hidden h-full w-full bg-none filter md:inline md:bg-noise", filterClassName),
+			style: {
+				opacity: filterOpacity,
+				filter: "contrast(0.6)"
+			}
+		}),
+		children
+	] });
 };
 /**
- * Default wrapper/intro background gradient.
- */
-export const DefaultWrapperBackground = ({ gradient = "linear-gradient(to top, #d4d4d4 0%, #e5e5e5 50%, #f5f5f5 100%)", className, style, }) => {
-    return (_jsx("div", { className: cn("absolute inset-0 h-full w-full", className), style: {
-            backgroundImage: gradient,
-            ...style,
-        } }));
+* Default wrapper/intro background gradient.
+*/
+const DefaultWrapperBackground = ({ gradient = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)", className, style }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute inset-0 h-full w-full", className),
+		style: {
+			backgroundImage: gradient,
+			...style
+		}
+	});
 };
 /**
- * Default intro content shown during loading.
- * Can be customized or replaced entirely.
- */
-export const DefaultIntroContent = ({ logoSrc, logoAlt = "Logo", logoWidth = 64, logoHeight = 64, title, className, titleClassName, }) => {
-    // If no logo or title provided, render nothing
-    if (!logoSrc && !title) {
-        return null;
-    }
-    return (_jsxs("div", { className: cn("absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center", className), children: [logoSrc && (_jsx(motion.img, { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, className: "mb-4" })), title && (_jsx("div", { className: cn("font-sans font-semibold text-neutral-600", titleClassName), children: title }))] }));
+* Default intro content shown during loading.
+* Can be customized or replaced entirely.
+*/
+const DefaultIntroContent = ({ logoSrc, logoAlt = "Logo", logoWidth = 64, logoHeight = 64, title, className, titleClassName }) => {
+	if (!logoSrc && !title) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center", className),
+		children: [logoSrc && /* @__PURE__ */ jsx(motion.img, {
+			src: logoSrc,
+			alt: logoAlt,
+			width: logoWidth,
+			height: logoHeight,
+			className: "mb-4"
+		}), title && /* @__PURE__ */ jsx("div", {
+			className: cn("font-sans font-semibold text-neutral-600", titleClassName),
+			children: title
+		})]
+	});
 };
-// Default gradient values for export (neutral grays)
-export const DEFAULT_INTRO_GRADIENT = "linear-gradient(to top, #d4d4d4 0%, #e5e5e5 50%, #f5f5f5 100%)";
-export const DEFAULT_CANVAS_BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #d4d4d4 0%, #e5e5e5 48.09%, #f5f5f5 100%)";
+const DEFAULT_INTRO_GRADIENT = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)";
+const DEFAULT_CANVAS_BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)";
+
+//#endregion
+export { DEFAULT_CANVAS_BOX_GRADIENT, DEFAULT_CANVAS_GRADIENT, DEFAULT_INTRO_GRADIENT, DefaultCanvasBackground, DefaultIntroContent, DefaultWrapperBackground };
 //# sourceMappingURL=backgrounds.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"backgrounds.js","sourceRoot":"","sources":["../../../src/components/canvas/backgrounds.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"backgrounds.js","names":[],"sources":["../../../src/components/canvas/backgrounds.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { canvasWidth, canvasHeight } from \"../../lib/canvas\";\nimport { cn } from \"../../lib/utils\";\n\n// ============== Canvas Background ==============\n\nexport interface DefaultCanvasBackgroundProps {\n  /** Custom gradient CSS string. If not provided, uses the default radial gradient. */\n  gradientStyle?: string;\n  /** Whether to show the dot pattern. Default: true */\n  showDots?: boolean;\n  /** Dot pattern color. Default: #888888 */\n  dotColor?: string;\n  /** Dot pattern size in pixels. Default: 1.5 */\n  dotSize?: number;\n  /** Dot pattern spacing in pixels. Default: 22 */\n  dotSpacing?: number;\n  /** Dot pattern opacity (0-1). Default: 0.35 */\n  dotOpacity?: number;\n  /** Whether to show the noise filter. Default: true */\n  showFilter?: boolean;\n  /** Filter opacity (0-1). Default: 0.6 */\n  filterOpacity?: number;\n  /** Additional className for the gradient layer */\n  gradientClassName?: string;\n  /** Additional className for the dots layer */\n  dotsClassName?: string;\n  /** Additional className for the filter layer */\n  filterClassName?: string;\n  /** Additional children to render in the background */\n  children?: ReactNode;\n}\n\n/** The default canvas gradient (neutral light gray) */\nexport 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%)`;\n\n/**\n * Default canvas background with gradient, dots, and noise filter.\n * All aspects are customizable via props.\n */\nexport const DefaultCanvasBackground: React.FC<DefaultCanvasBackgroundProps> = ({\n  gradientStyle,\n  showDots = true,\n  dotColor = \"#a3a3a3\",\n  dotSize = 1.5,\n  dotSpacing = 22,\n  dotOpacity = 0.35,\n  showFilter = true,\n  filterOpacity = 0.6,\n  gradientClassName,\n  dotsClassName,\n  filterClassName,\n  children,\n}) => {\n  const gradientImage = gradientStyle ?? DEFAULT_CANVAS_GRADIENT;\n\n  return (\n    <>\n      {/* Gradient layer */}\n      <div\n        className={cn(\n          \"pointer-events-none absolute inset-0 h-full w-full\",\n          gradientClassName\n        )}\n        style={{\n          backgroundImage: gradientImage,\n        }}\n      />\n\n      {/* Dots layer */}\n      {showDots && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full\",\n            dotsClassName\n          )}\n          style={{\n            backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,\n            backgroundSize: `${dotSpacing}px ${dotSpacing}px`,\n            opacity: dotOpacity,\n          }}\n        />\n      )}\n\n      {/* Filter/noise layer */}\n      {showFilter && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 hidden h-full w-full bg-none filter md:inline md:bg-noise\",\n            filterClassName\n          )}\n          style={{\n            opacity: filterOpacity,\n            filter: \"contrast(0.6)\",\n          }}\n        />\n      )}\n\n      {children}\n    </>\n  );\n};\n\n// ============== Wrapper/Intro Background ==============\n\nexport interface DefaultWrapperBackgroundProps {\n  /** Background gradient for the intro screen */\n  gradient?: string;\n  /** Additional className */\n  className?: string;\n  /** Additional inline styles */\n  style?: React.CSSProperties;\n}\n\n/**\n * Default wrapper/intro background gradient.\n */\nexport const DefaultWrapperBackground: React.FC<DefaultWrapperBackgroundProps> = ({\n  gradient = \"linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)\",\n  className,\n  style,\n}) => {\n  return (\n    <div\n      className={cn(\"absolute inset-0 h-full w-full\", className)}\n      style={{\n        backgroundImage: gradient,\n        ...style,\n      }}\n    />\n  );\n};\n\nexport interface DefaultIntroContentProps {\n  /** Logo image source */\n  logoSrc?: string;\n  /** Logo alt text */\n  logoAlt?: string;\n  /** Logo width */\n  logoWidth?: number;\n  /** Logo height */\n  logoHeight?: number;\n  /** Title text */\n  title?: string;\n  /** Additional className for the container */\n  className?: string;\n  /** Additional className for the title */\n  titleClassName?: string;\n}\n\n/**\n * Default intro content shown during loading.\n * Can be customized or replaced entirely.\n */\nexport const DefaultIntroContent: React.FC<DefaultIntroContentProps> = ({\n  logoSrc,\n  logoAlt = \"Logo\",\n  logoWidth = 64,\n  logoHeight = 64,\n  title,\n  className,\n  titleClassName,\n}) => {\n  // If no logo or title provided, render nothing\n  if (!logoSrc && !title) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center\",\n        className\n      )}\n    >\n      {logoSrc && (\n        <motion.img\n          src={logoSrc}\n          alt={logoAlt}\n          width={logoWidth}\n          height={logoHeight}\n          className=\"mb-4\"\n        />\n      )}\n      {title && (\n        <div\n          className={cn(\n            \"font-sans font-semibold text-neutral-600\",\n            titleClassName\n          )}\n        >\n          {title}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Default gradient values for export (neutral light grays)\nexport const DEFAULT_INTRO_GRADIENT =\n  \"linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)\";\n\nexport const DEFAULT_CANVAS_BOX_GRADIENT =\n  \"radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)\";\n"],"mappings":";;;;;;;;AAmCA,MAAa,0BAA0B,2BAA2B,YAAY,KAAK,aAAa,QAAQ,cAAc,EAAE,KAAK,aAAa;;;;;AAM1I,MAAa,2BAAmE,EAC9E,eACA,WAAW,MACX,WAAW,WACX,UAAU,KACV,aAAa,IACb,aAAa,KACb,aAAa,MACb,gBAAgB,IAChB,mBACA,eACA,iBACA,eACI;CACJ,MAAM,gBAAgB,iBAAiB;AAEvC,QACE;EAEE,oBAAC;GACC,WAAW,GACT,sDACA,kBACD;GACD,OAAO,EACL,iBAAiB,eAClB;IACD;EAGD,YACC,oBAAC;GACC,WAAW,GACT,sDACA,cACD;GACD,OAAO;IACL,iBAAiB,mBAAmB,SAAS,GAAG,QAAQ,kBAAkB,QAAQ;IAClF,gBAAgB,GAAG,WAAW,KAAK,WAAW;IAC9C,SAAS;IACV;IACD;EAIH,cACC,oBAAC;GACC,WAAW,GACT,kGACA,gBACD;GACD,OAAO;IACL,SAAS;IACT,QAAQ;IACT;IACD;EAGH;KACA;;;;;AAkBP,MAAa,4BAAqE,EAChF,WAAW,kEACX,WACA,YACI;AACJ,QACE,oBAAC;EACC,WAAW,GAAG,kCAAkC,UAAU;EAC1D,OAAO;GACL,iBAAiB;GACjB,GAAG;GACJ;GACD;;;;;;AAyBN,MAAa,uBAA2D,EACtE,SACA,UAAU,QACV,YAAY,IACZ,aAAa,IACb,OACA,WACA,qBACI;AAEJ,KAAI,CAAC,WAAW,CAAC,MACf,QAAO;AAGT,QACE,qBAAC;EACC,WAAW,GACT,oFACA,UACD;aAEA,WACC,oBAAC,OAAO;GACN,KAAK;GACL,KAAK;GACL,OAAO;GACP,QAAQ;GACR,WAAU;IACV,EAEH,SACC,oBAAC;GACC,WAAW,GACT,4CACA,eACD;aAEA;IACG;GAEJ;;AAKV,MAAa,yBACX;AAEF,MAAa,8BACX"}

package/dist/components/canvas/canvas.d.ts

@@ -1,6 +1,6 @@
 import { type Transition } from "framer-motion";
 import React, { type FC } from "react";
-import type { NavItem, SectionCoordinates, ToolbarConfig } from "../../types";
+import type { NavItem, NavbarConfig, SectionCoordinates, ToolbarConfig } from "../../types";
 import type { ReactNode } from "react";
 interface Props {
     homeCoordinates: SectionCoordinates;
@@ -29,6 +29,8 @@ interface Props {
     wrapperBackground?: ReactNode;
     /** Toolbar customization options */
     toolbarConfig?: ToolbarConfig;
+    /** Navbar customization options */
+    navbarConfig?: NavbarConfig;
 }
 declare const Canvas: FC<Props>;
 export default Canvas;

package/dist/components/canvas/canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,EAIZ,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AA0Bf,OAAO,KAAK,EAEV,OAAO,EACP,kBAAkB,EAClB,aAAa,EACd,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,KAAK;IACb,eAAe,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,YAAY,CAAC,EAAC,MAAM,CAAC;IAGrB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAGrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAG5B,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAG9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAYD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,KAAK,CAgmBrB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,EAIZ,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AA0Bf,OAAO,KAAK,EAEV,OAAO,EACP,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACd,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,KAAK;IACb,eAAe,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,YAAY,CAAC,EAAC,MAAM,CAAC;IAGrB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAGrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,6BAA6B;IAC7B,cAAc,CAAC,EAAE,UAAU,CAAC;IAG5B,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAG9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;IAG9B,mCAAmC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAYD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,KAAK,CAkmBrB,CAAC;AAEF,eAAe,MAAM,CAAC"}