@papermap/papermap 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papermap/papermap",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Embeddable AI chat bar and UI components from the Papermap data analytics platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -22,8 +22,10 @@
     "styles.css"
   ],
   "scripts": {
+    "sync:sdk-version": "node scripts/sync-sdk-version.mjs",
+    "prebuild": "npm run sync:sdk-version",
     "build": "tsup && npm run build:styles",
-    "build:styles": "cp src/styles.css styles.css",
+    "build:styles": "cat node_modules/driver.js/dist/driver.css src/tour-overrides.css src/styles.css > styles.css",
     "dev": "tsup --watch",
     "storybook": "storybook dev -p 3001",
     "build-storybook": "storybook build",
@@ -33,7 +35,7 @@
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
     "test": "vitest run",
     "test:watch": "vitest",
-    "validate": "npm run lint && npm run ts-check",
+    "validate": "npm run lint && npm run ts-check && npm run test",
     "validate:watch": "npm run validate -- --watch",
     "clean": "rm -rf dist styles.css",
     "prepare": "husky || true",
@@ -69,6 +71,7 @@
     "axios": "1.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "driver.js": "^1.4.0",
     "framer-motion": "^11.17.0",
     "html2canvas": "^1.4.1",
     "lottie-react": "^2.4.1",

package/styles.css

@@ -1,4 +1,362 @@
-@tailwind base;
+.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
+/* Custom Driver.js Tour Styles for Papermap - Premium Redesign */
+
+/* Overlay - above app UI (e.g. workspace selector z-[10001]) */
+.driver-overlay {
+  z-index: 99998 !important;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  transition: all 0.4s ease-in-out !important;
+}
+
+.dark .driver-overlay {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Popover container - above overlay, glassmorphism */
+.driver-popover.papermap-tour-popover {
+  z-index: 99999 !important;
+  background: rgba(255, 255, 255, 0.9) !important;
+  border-radius: 24px !important;
+  /* smooth rounded corners */
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  box-shadow:
+    0 24px 48px -12px rgba(0, 0, 0, 0.15),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
+  max-width: 420px !important;
+  padding: 0 !important;
+  color: #000 !important;
+  overflow: hidden !important;
+}
+
+/* Expand: modal-like size (create dashboard modal is sm:max-w-[500px]; we go larger for media) */
+.driver-popover.papermap-tour-popover.papermap-tour-popover--expand {
+  max-width: 640px !important;
+  min-width: 520px !important;
+}
+
+.driver-popover.papermap-tour-popover.papermap-tour-popover--expand .driver-popover-description img,
+.driver-popover.papermap-tour-popover.papermap-tour-popover--expand .driver-popover-description video {
+  max-width: 560px !important;
+  width: 100% !important;
+}
+
+/* Dark mode popover */
+.dark .driver-popover.papermap-tour-popover {
+  background: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  box-shadow:
+    0 24px 48px -12px rgba(0, 0, 0, 0.8),
+    0 0 0 1px hsl(var(--border)),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Arrow - adjust to be subtle or transparent */
+.driver-popover-arrow {
+  border-width: 8px !important;
+}
+
+.driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* Dark mode arrows */
+.dark .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: hsl(var(--card)) !important;
+}
+
+.dark .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: hsl(var(--card)) !important;
+}
+
+.dark .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: hsl(var(--card)) !important;
+}
+
+.dark .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: hsl(var(--card)) !important;
+}
+
+/* Title styling - Minimalist */
+.driver-popover-title {
+  font-family: 'Manrope', 'Inter', sans-serif !important;
+  font-size: 22px !important;
+  font-weight: 700 !important;
+  color: #000 !important;
+  margin: 0 !important;
+  padding: 32px 32px 12px 32px !important;
+  line-height: 1.2 !important;
+  letter-spacing: -0.02em !important;
+}
+
+.dark .driver-popover-title {
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Description styling */
+.driver-popover-description {
+  font-family: 'Manrope', 'Inter', sans-serif !important;
+  font-size: 15px !important;
+  line-height: 1.6 !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  /* More subtle text */
+  margin: 0 !important;
+  padding: 0 32px 32px 32px !important;
+  font-weight: 400 !important;
+}
+
+.dark .driver-popover-description {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+/* Footer styling */
+.driver-popover-footer {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 24px 32px !important;
+  background: rgba(0, 0, 0, 0.03) !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+.dark .driver-popover-footer {
+  background: rgba(0, 0, 0, 0.2) !important;
+  border-top: 1px solid hsl(var(--border)) !important;
+}
+
+.driver-popover-footer button {
+  text-shadow: none !important;
+}
+
+/* Progress text */
+.driver-popover-progress-text {
+  font-family: 'Manrope', 'Inter', sans-serif !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  letter-spacing: 0.5px !important;
+}
+
+.dark .driver-popover-progress-text {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+/* Navigation buttons container */
+.driver-popover-navigation-btns {
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px !important;
+}
+
+/* Button base styles */
+.driver-popover-btn {
+  padding: 0 20px !important;
+  font-family: 'TWK Lausanne', 'Manrope', 'Inter', sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  border-radius: 8px !important;
+  transition: all 0.2s ease !important;
+  cursor: pointer !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 12px !important;
+  outline: none !important;
+  height: 48px !important;
+}
+
+/* Next/Done button */
+.driver-popover-next-btn,
+.driver-popover-btn-group .driver-popover-btn:last-child {
+  background-color: #000000 !important;
+  color: #FFFFFF !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: none !important;
+  font-weight: 500 !important;
+}
+
+.driver-popover-next-btn:hover,
+.driver-popover-btn-group .driver-popover-btn:last-child:hover {
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  border-color: rgba(0, 0, 0, 0.2) !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.driver-popover-next-btn:active {
+  background-color: #000000 !important;
+  transform: none !important;
+  opacity: 0.9 !important;
+}
+
+.dark .driver-popover-next-btn,
+.dark .driver-popover-btn-group .driver-popover-btn:last-child {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+}
+
+.dark .driver-popover-next-btn:hover,
+.dark .driver-popover-btn-group .driver-popover-btn:last-child:hover {
+  background-color: hsl(var(--primary)) !important;
+  opacity: 0.9 !important;
+  border-color: hsl(var(--border)) !important;
+}
+
+.dark .driver-popover-next-btn:active {
+  background-color: hsl(var(--primary)) !important;
+  opacity: 0.8 !important;
+}
+
+/* Previous button */
+.driver-popover-prev-btn {
+  background: rgba(0, 0, 0, 0.05) !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  padding: 0 16px !important;
+  font-size: 13px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  font-weight: 600 !important;
+}
+
+.driver-popover-prev-btn:hover {
+  color: #000 !important;
+  background: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.dark .driver-popover-prev-btn {
+  background: hsl(var(--secondary)) !important;
+  color: hsl(var(--secondary-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+}
+
+.dark .driver-popover-prev-btn:hover {
+  background: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+  border-color: hsl(var(--border)) !important;
+}
+
+/* Expand toggle button (when step has expand: true) */
+.papermap-tour-expand-btn {
+  position: absolute !important;
+  top: 24px !important;
+  right: 52px !important;
+  width: 32px !important;
+  height: 32px !important;
+  z-index: 2 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: transparent !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  border-radius: 6px !important;
+  padding: 0 !important;
+  transition: all 0.2s ease !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.papermap-tour-expand-btn:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  color: #000 !important;
+}
+
+.papermap-tour-expand-btn svg {
+  flex-shrink: 0 !important;
+}
+
+.dark .papermap-tour-expand-btn {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.dark .papermap-tour-expand-btn:hover {
+  background: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Close button */
+.driver-popover-close-btn {
+  position: absolute !important;
+  top: 24px !important;
+  right: 24px !important;
+  width: 24px !important;
+  height: 24px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background: transparent !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+  border-radius: 4px !important;
+  font-size: 20px !important;
+  padding: 0 !important;
+  transition: all 0.2s ease !important;
+  border: none !important;
+}
+
+.driver-popover-close-btn:hover {
+  background: rgba(0, 0, 0, 0.1) !important;
+  color: #000 !important;
+}
+
+.dark .driver-popover-close-btn {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.dark .driver-popover-close-btn:hover {
+  background: hsl(var(--muted)) !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+/* Highlighted element */
+.driver-highlighted-element {
+  border-radius: 6px !important;
+  box-shadow:
+    0 0 0 4px rgba(0, 0, 0, 0.2),
+    0 0 0 5px rgba(255, 255, 255, 0.5) !important;
+  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
+}
+
+.dark .driver-highlighted-element {
+  box-shadow:
+    0 0 0 4px rgba(255, 255, 255, 0.1),
+    0 0 0 5px hsl(var(--border)) !important;
+}
+
+/* Animation */
+.driver-popover {
+  animation: driverPopoverSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+@keyframes driverPopoverSlide {
+  0% {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.driver-popover-skip-btn {
+  display: none !important;
+}@tailwind base;
 @tailwind components;
 @tailwind utilities;