@superblocksteam/library 2.0.55 → 2.0.56-next.1

package/package.json

@@ -1,23 +1,33 @@
 {
   "name": "@superblocksteam/library",
-  "version": "2.0.55",
+  "version": "2.0.56-next.1",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime/index.d.ts",
+      "import": "./dist/jsx-runtime/index.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime/index.d.ts",
+      "import": "./dist/jsx-dev-runtime/index.js"
     },
     "./package.json": "./package.json",
-    "./index.css": "./dist/index.css"
+    "./index.css": "./dist/lib/index.css"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "react": ">= 18",
-    "react-dom": ">= 18"
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router": "7.x"
   },
   "dependencies": {
+    "@dagrejs/graphlib": "2.2.4",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@oddbird/css-anchor-positioning": "^0.4.0",
@@ -38,8 +48,8 @@
     "@react-hook/resize-observer": "1.2.6",
     "@superblocksteam/fast-deep-equal": "3.1.4",
     "@superblocksteam/iso-currency": "2.0.0",
-    "@superblocksteam/library-shared": "2.0.55",
-    "@superblocksteam/shared": "0.9503.0",
+    "@superblocksteam/library-shared": "2.0.56-next.1",
+    "@superblocksteam/shared": "0.9543.7",
     "apca-w3": "^0.1.9",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "3.3.3",
@@ -60,18 +70,19 @@
     "moment": "2.29.4",
     "moment-timezone": "0.5.46",
     "normalize.css": "8.0.1",
+    "postcss": "^8.5.6",
     "posthog-js": "^1.258.3",
     "react-dnd": "^16.0.1",
     "react-hotkeys-hook": "3.3.1",
     "react-json-view-lite": "^2.4.1",
     "react-player": "2.3.1",
-    "react-router": "^7.0.2",
     "react-svg": "^16.1.29",
     "rfdc": "^1.3.0",
     "shallowequal": "1.1.0",
     "sonner": "^2.0.7",
     "styled-components": "5.3.11",
     "stylis": "^4.2.0",
+    "tailwindcss": "^4.1.13",
     "tinycolor2": "^1.6.0",
     "use-debounce": "^10.0.4",
     "yaml": "^2.7.0"
@@ -84,13 +95,15 @@
     "@types/apca-w3": "^0.1.3",
     "@types/downloadjs": "1.4.3",
     "@types/lodash": "^4.17.15",
-    "@types/node": "^20",
+    "@types/node": "^20.17.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/shallowequal": "^1.1.5",
     "@types/styled-components": "5.1.4",
     "@types/stylis": "^4.2.0",
     "@types/tinycolor2": "^1.4.6",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
     "@vitest/eslint-plugin": "^1.3.16",
     "@vitest/ui": "^3.2.0",
     "eslint": "^9.34.0",
@@ -104,16 +117,16 @@
     "globals": "^15.13.0",
     "jest-junit": "^16.0.0",
     "jsdom": "^26.1.0",
+    "playwright": "^1.56.0",
     "prettier": "^3.5.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^7.2.0",
+    "react-router": "^7.9.4",
     "ts-morph": "^25.0.0",
     "tsdown": "^0.15.0",
     "tsx": "^4.19.2",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.41.0",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.4",
+    "vitest-browser-react": "^1.0.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.css","names":[],"sources":["../src/edit-mode/edit-style.css"],"sourcesContent":[":root {\n  /* Edit mode z-index values */\n  --sb-edit-z-index-high: 1010;\n  --sb-edit-z-index-mid: 1002;\n  --sb-edit-z-index-base: 1001;\n}\n\n/* A class that sets the child anchor-name to a variable that is set in react */\n/* First level is the suspense provider, second level is the component */\n.sb-anchor-name {\n  anchor-name: var(--anchor-name);\n}\n\n.sb-draggable-wrapper {\n  &[data-is-dragged=\"true\"] {\n    visibility: hidden;\n  }\n}\n\n/**\n* Used to drag *new* components into the canvas.\n* It's a full height/width layer above the editor canvas.\n* Triggers the draggable preview box for the new component to be dropped.\n**/\n.sb-new-component-dragging-layer {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  z-index: var(--sb-edit-z-index-high);\n}\n\n.sb-interaction-layer-wrapper {\n  z-index: var(--sb-edit-z-index-high);\n  height: 0;\n  width: 0;\n  top: 0;\n  left: 0;\n}\n\n.sb-edit-drag-preview {\n  background: rgba(224, 0, 0, 0.16);\n  border: 1px solid red;\n  box-shadow: inset 0 0 0 3px rgba(224, 0, 0, 0.16);\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n\n  &[data-is-valid-drop=\"true\"] {\n    border: 1px solid #0087e0;\n    background: rgba(0, 135, 224, 0.16);\n    box-shadow: inset 0 0 0 3px rgba(0, 135, 224, 0.16);\n  }\n}\n\n.sb-edit-selection-rect {\n  position: absolute;\n  border: 2px solid #0087e0;\n  pointer-events: none;\n  z-index: var(--sb-edit-z-index-base);\n\n  &.sb-edit-focus {\n    border: 1px solid #0087e0;\n  }\n\n  &.sb-edit-error {\n    border: 1px solid #f45252;\n    background: rgba(252, 190, 190, 0.3);\n  }\n\n  &.sb-edit-target {\n    border: 2px solid #c2b9dd;\n  }\n\n  &.sb-edit-target-mode.sb-edit-focus {\n    border: 1px solid #c2b9dd;\n    background: rgba(124, 79, 248, 0.04);\n  }\n}\n\n/* ai target mode */\n\n.sb-target-mode-border {\n  position: absolute;\n  top: anchor(top);\n  left: anchor(left);\n  right: anchor(right);\n  bottom: anchor(bottom);\n  pointer-events: none;\n}\n\n.sb-target-mode-border-top-right,\n.sb-target-mode-border-top-left,\n.sb-target-mode-border-bottom-right,\n.sb-target-mode-border-bottom-left {\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  box-sizing: border-box;\n}\n\n.sb-target-mode-border-top-right {\n  top: 0;\n  left: 0;\n  border-top: 2px solid rgba(124, 79, 248, 1);\n  border-left: 2px solid rgba(124, 79, 248, 1);\n}\n\n.sb-target-mode-border-top-left {\n  top: 0;\n  right: 0;\n  border-top: 2px solid rgba(124, 79, 248, 1);\n  border-right: 2px solid rgba(124, 79, 248, 1);\n}\n\n.sb-target-mode-border-bottom-right {\n  bottom: 0;\n  right: 0;\n  border-bottom: 2px solid rgba(124, 79, 248, 1);\n  border-right: 2px solid rgba(124, 79, 248, 1);\n}\n\n.sb-target-mode-border-bottom-left {\n  bottom: 0;\n  left: 0;\n  border-bottom: 2px solid rgba(124, 79, 248, 1);\n  border-left: 2px solid rgba(124, 79, 248, 1);\n}\n\n/*\n  Handles for resizing the selection rect.\n  These are the little circles that appear when you select a widget\n  Used in interaction-rect-handles.tsx\n*/\n\n.resize-handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background-color: white;\n  border: 1px solid #0087e0;\n  border-radius: 50%;\n  z-index: var(--sb-edit-z-index-high);\n  pointer-events: auto;\n\n  .bp5-popover-target {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.top-left-resize-handle {\n    top: -6px;\n    left: -6px;\n    cursor: nw-resize;\n  }\n\n  &.top-right-resize-handle {\n    top: -6px;\n    right: -6px;\n    cursor: ne-resize;\n  }\n\n  &.bottom-right-resize-handle {\n    bottom: -6px;\n    right: -6px;\n    cursor: se-resize;\n  }\n\n  &.bottom-left-resize-handle {\n    bottom: -6px;\n    left: -6px;\n    cursor: sw-resize;\n  }\n\n  &.top-resize-handle {\n    top: -6px;\n    left: 0;\n    right: 0;\n    height: 12px;\n    width: auto;\n    cursor: ns-resize;\n    background-color: transparent;\n    border: none;\n    pointer-events: auto;\n  }\n\n  &.right-resize-handle {\n    top: 0;\n    right: -6px;\n    bottom: 0;\n    width: 12px;\n    height: auto;\n    cursor: ew-resize;\n    background-color: transparent;\n    border: none;\n    pointer-events: auto;\n  }\n\n  &.bottom-resize-handle {\n    bottom: -6px;\n    left: 0;\n    right: 0;\n    height: 12px;\n    width: auto;\n    cursor: ns-resize;\n    background-color: transparent;\n    border: none;\n    pointer-events: auto;\n  }\n\n  &.left-resize-handle {\n    top: 0;\n    left: -6px;\n    bottom: 0;\n    width: 12px;\n    height: auto;\n    cursor: ew-resize;\n    background-color: transparent;\n    border: none;\n    pointer-events: auto;\n  }\n}\n\n.resize-handle-edge::after {\n  position: absolute;\n  content: \"\";\n  border-radius: 3px;\n  border: 1px solid rgb(0, 135, 224);\n  background: rgb(255, 255, 255);\n  box-sizing: border-box;\n  transition: height 0.2s ease-in-out;\n}\n\n.left-resize-handle-edge::after {\n  width: 6px;\n  height: 16px;\n  top: calc(50% - 8px);\n  left: calc(50% - 2px);\n}\n\n.right-resize-handle-edge::after {\n  width: 6px;\n  height: 16px;\n  top: calc(50% - 8px);\n  right: calc(50% - 2px);\n}\n\n.top-resize-handle-edge::after {\n  width: 16px;\n  height: 6px;\n  left: calc(50% - 8px);\n  top: calc(50% - 2px);\n}\n\n.bottom-resize-handle-edge::after {\n  width: 16px;\n  height: 6px;\n  left: calc(50% - 8px);\n  bottom: calc(50% - 2px);\n}\n\n.bp5-unstyled-popover > .bp5-popover-content {\n  padding: 0 !important;\n  background: none !important;\n}\n\n.sb-edit-interaction-rect-actions {\n  position: absolute;\n  /* This will flip the name pill when anchored */\n  position-try-fallbacks: flip-block, --actions-below-header;\n}\n\n.sb-edit-selection-name-pill,\n.sb-edit-add-to-chat-button {\n  cursor: pointer;\n  display: block;\n  font-size: 11px;\n  color: white;\n  padding: 2px 4px;\n  white-space: nowrap;\n  background-color: #0087e0;\n  border-radius: 3px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  z-index: var(--sb-edit-z-index-mid);\n  border: none;\n  outline: none;\n\n  &:hover {\n    box-shadow: 0px 3px 8px -1px #0087e0;\n  }\n\n  &:active,\n  &:focus {\n    background-color: #0373be;\n  }\n}\n\n.sb-edit-actions-target-mode .sb-edit-selection-name-pill,\n.sb-edit-actions-target-mode .sb-edit-add-to-chat-button {\n  background-color: rgba(100, 58, 223, 1);\n\n  &:hover {\n    box-shadow: 0px 3px 8px -1px rgba(100, 58, 223, 1);\n  }\n\n  &:active,\n  &:focus {\n    background-color: rgb(77, 50, 160);\n  }\n}\n\n.sb-edit-add-to-chat-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n}\n\n@position-try --actions-below-header {\n  margin-bottom: -24px;\n  margin-right: 3px;\n}\n\n.sb-reparent-rect {\n  position: absolute;\n  border: 1px solid #0087e0;\n  pointer-events: none;\n  z-index: var(--sb-edit-z-index-base);\n  animation: radial-gradient-animation 2s infinite;\n}\n\n@keyframes radial-gradient-animation {\n  0% {\n    box-shadow: inset 0 0 0 0 rgba(0, 135, 224, 0.5);\n  }\n  100% {\n    box-shadow: inset 0 0 20px 20px rgba(0, 135, 224, 0.1);\n  }\n}\n\n.sb-edit-drop-placeholder {\n  position: absolute;\n  pointer-events: none;\n  z-index: var(--sb-edit-z-index-base);\n\n  &[data-is-active=\"true\"] {\n    border: 1px solid #0087e0;\n    box-shadow: inset 0 0 0 3px rgba(0, 135, 224, 0.16);\n  }\n\n  &[data-is-valid-drop=\"false\"] {\n    border-color: #f45252;\n  }\n}\n\n.sb-edit-drop-target-outline {\n  position: absolute;\n  pointer-events: none;\n  z-index: var(--sb-edit-z-index-base);\n  border: 1px dashed #0087e0;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n\n  &[data-invalid-target=\"true\"] {\n    border-color: #f45252;\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}