@contentstack/live-preview-utils 2.0.4 → 3.0.1

package/dist/modern/visualBuilder/visualBuilder.style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n    pointer-events: all;\n    svg {\n        pointer-events: none;\n    }\n    &:before {\n        content: attr(data-tooltip);\n        position: absolute;\n        bottom: 20px;\n        margin-bottom: 24px;\n        padding: 12px;\n        border-radius: 4px;\n        width: max-content;\n        max-width: 200px;\n        color: #fff;\n        font-family: Inter;\n        font-size: 0.75rem;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 132%; /* 0.99rem */\n        letter-spacing: 0.015rem;\n        background: #767676;\n    }\n    &:after {\n        content: \"\";\n        position: absolute;\n        bottom: 28px;\n        /* the arrow */\n        border: 10px solid #000;\n        border-color: #767676 transparent transparent transparent;\n    }\n`;\n\nexport function visualBuilderStyles() {\n    return {\n        \"visual-builder__container\": css`\n            --outline-transition: all 0.15s ease-in;\n            font-family: \"Inter\", sans-serif;\n        `,\n        \"visual-builder__cursor\": css`\n            visibility: hidden;\n            height: 0;\n\n            &.visible {\n                visibility: visible;\n                position: fixed;\n                top: 0;\n                left: 0;\n                z-index: 2147483647 !important;\n\n                color: #fff;\n\n                height: auto;\n                padding: 0 10px;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                pointer-events: none !important;\n                position: fixed !important;\n                cursor: none;\n            }\n        `,\n        \"visual-builder__overlay__wrapper\": css`\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100vh;\n            visibility: hidden;\n            z-index: 99999;\n\n            pointer-events: none;\n\n            &.visible {\n                visibility: visible;\n            }\n        `,\n        \"visual-builder__overlay--outline\": css`\n            position: absolute;\n            outline: 4px solid #715cdd;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__overlay\": css`\n            background: rgba(0, 0, 0, 0.3);\n            box-sizing: content-box;\n            pointer-events: all;\n            position: absolute;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__add-button\": css`\n            position: absolute;\n            pointer-events: all;\n\n            background: #ffffff;\n            color: #475161;\n\n            border-radius: 4px;\n            border: 1px solid #6c5ce7;\n\n            height: 32px;\n            min-width: 32px;\n            max-width: 180px;\n            padding: 8px 6px;\n            transform: translate(-50%, -50%);\n\n            font-weight: 600;\n            color: #6c5ce7;\n            overflow: hidden;\n\n            z-index: 2147483647 !important;\n\n            display: grid;\n            grid-template-columns: min-content 0fr;\n            align-content: center;\n            gap: 0;\n\n            transition:\n                grid-template-columns 0.25s,\n                left 0.15s ease-in,\n                top 0.15s ease-in,\n                gap 0.15s ease-in;\n\n            &:has(.visual-builder__add-button-label):hover {\n                grid-template-columns: min-content 1fr;\n                gap: 8px;\n                padding: 8px 16px;\n            }\n\n            svg {\n                fill: #6c5ce7;\n            }\n\n            &:disabled {\n                border-color: #bbbec3;\n                cursor: not-allowed;\n            }\n\n            &:disabled svg {\n                fill: #bbbec3;\n            }\n        `,\n        \"visual-builder__add-button-label\": css`\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        `,\n        \"visual-builder__start-editing-btn\": css`\n            z-index: 1000;\n            text-decoration: none;\n            position: fixed;\n            bottom: 30px;\n            right: 30px;\n            box-shadow:\n                0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n                0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n                0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n            display: inline-flex;\n            padding: 0.5rem 1rem;\n            justify-content: center;\n            align-items: center;\n            gap: 0.5rem;\n\n            border-radius: 4px;\n            border: 1px solid transparent;\n            background: #6c5ce7;\n            transition:\n                background-color 0.15s ease-in-out,\n                border-color 0.15s ease-in-out,\n                box-shadow 0.15s ease-in-out,\n                -webkit-box-shadow 0.15s ease-in-out;\n\n            &:hover {\n                background-color: #5d50be;\n            }\n            &:focus {\n                outline: none;\n                box-shadow: 0 0 0 2px #ada4f4;\n            }\n            & > span {\n                color: #fff;\n                /* Body/P1 Bold */\n                font-size: 1rem;\n                font-family: Inter;\n                font-weight: 600;\n                line-height: 150%;\n                letter-spacing: 0.01rem;\n                text-transform: capitalize;\n            }\n\n            & > svg {\n                color: #fff;\n                font-size: 1rem;\n                font-family: Inter;\n                font-weight: 600;\n                line-height: 150%;\n                letter-spacing: 0.01rem;\n                text-transform: capitalize;\n            }\n        `,\n        \"visual-builder__cursor-icon\": css`\n            height: 40px;\n            width: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: #5d50be;\n            border-radius: 50%;\n            position: absolute;\n            top: 0;\n            left: 0;\n        `,\n        \"visual-builder__cursor-pointer\": css`\n            position: absolute;\n            top: -8px;\n            left: -8px;\n        `,\n        \"visual-builder__cursor-icon--loader\": css`\n            animation: visual-builder__spinner 1s linear infinite;\n        `,\n        \"visual-builder__focused-toolbar\": css`\n            position: absolute;\n            transform: translateY(-100%);\n            z-index: 100000;\n            gap: 8px;\n            width: 0;\n            display: flex;\n            align-items: end;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n            padding: 4px 8px !important;\n            background: #6c5ce7;\n            color: #fff;\n            z-index: 1;\n            border-radius: 2px !important;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: fit-content;\n\n            &:disabled {\n                filter: contrast(0.7);\n            }\n\n            .visual-builder__focused-toolbar__text {\n                padding-right: 3px;\n                height: 16px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n            pointer-events: none;\n            color: #5d50be;\n            padding: 4px !important;\n            margin-bottom: 3px;\n            display: none;\n            width: fit-content;\n            position: absolute;\n            z-index: 100000;\n        `,\n        \"field-label-dropdown-open\": css`\n            .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n                pointer-events: all;\n                visibility: visible;\n                display: initial;\n            }\n\n            .visual-builder__button--secondary:hover {\n                background-color: #6c5ce7;\n                color: #f9f8ff;\n            }\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n            display: flex;\n            flex-direction: column-reverse;\n            position: relative;\n        `,\n        \"visual-builder__focused-toolbar__field-label-container\": css`\n            display: flex;\n            column-gap: 0.5rem;\n            align-items: center;\n        `,\n        \"visual-builder__button\": css`\n            background-color: transparent;\n            border: 1px solid transparent;\n            border-radius: 4px;\n            font-size: 16px;\n            font-weight: 600;\n            line-height: 100%;\n            padding: 8px 16px;\n            text-align: center;\n            z-index: 2147483647 !important;\n            transition:\n                color 0.15s ease-in-out,\n                background-color 0.15s ease-in-out,\n                border-color 0.15s ease-in-out,\n                box-shadow 0.15s ease-in-out;\n            // vertical-align: middle;\n        `,\n        \"visual-builder__button--primary\": css`\n            background-color: #6c5ce7;\n            color: #fff;\n\n            &:hover {\n                background-color: #5d50be;\n            }\n        `,\n        \"visual-builder__button--secondary\": css`\n            background-color: #f9f8ff;\n            border: 1px solid #6c5ce7;\n            color: #6c5ce7;\n        `,\n        \"visual-builder__button--edit\": css`\n            svg {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #475161;\n                }\n            }\n        `,\n        \"visual-builder__button-loader\": css`\n            svg.loader {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #ffffff;\n                }\n            }\n        `,\n        \"visual-builder__button--comment-loader\": css`\n            svg.loader {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #475161;\n                }\n            }\n        `,\n        \"visual-builder__field-icon\": css`\n            svg {\n                height: 16px;\n                width: 16px;\n                margin-right: 5px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__button-group\": css`\n            display: flex;\n            background: #fff;\n            border-radius: 2px;\n            height: 100%;\n            padding: 4px !important;\n            z-index: 2147483647 !important;\n\n            &:has(.visual-builder__button) {\n                padding: 2px;\n                gap: 8px;\n            }\n\n            .visual-builder__button:hover {\n                background-color: #f5f5f5;\n\n                svg {\n                    color: #5d50be;\n                }\n            }\n\n            .visual-builder__button {\n                background-color: #fff;\n                border-color: transparent;\n                color: #475161;\n                padding: 4px;\n                min-width: 32px;\n                min-height: 32px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__text\": css`\n            font-family: Inter, \"sans-serif\";\n            font-size: 0.75rem;\n            font-style: normal;\n            font-weight: 400;\n            line-height: 150%;\n            letter-spacing: 0.015rem;\n            max-width: 150px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            text-wrap: nowrap;\n        `,\n        \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n            height: 40px;\n            z-index: 2147483647 !important;\n\n            svg {\n                height: 100%;\n                width: 100%;\n            }\n        `,\n        \"visual-builder__rotate--90\": css`\n            transform: rotate(90deg);\n        `,\n        \"visual-builder__focused-toolbar--field-disabled\": css`\n            pointer-events: none;\n            cursor: not-allowed;\n            .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n                background: #909090;\n            }\n        `,\n        \"visual-builder__cursor-disabled\": css`\n            .visual-builder__cursor-icon {\n                background: #909090;\n            }\n\n            .visual-builder__cursor-pointer path {\n                fill: #909090;\n            }\n        `,\n        \"visual-builder__tooltip\": css`\n            ${tooltipBaseStyle}\n\n            &:before {\n                display: none;\n            }\n\n            &:hover:before,\n            &:hover:after {\n                display: block;\n                z-index: 2147483647 !important;\n            }\n\n            &:after {\n                display: none;\n            }\n        `,\n        \"visual-builder__tooltip--bottom\": css`\n            &:before {\n                bottom: -66px;\n            }\n            &:after {\n                bottom: -6px;\n                transform: rotate(180deg);\n            }\n        `,\n\n        \"visual-builder__tooltip--persistent\": css`\n            ${tooltipBaseStyle}\n\n            &:before {\n                display: block;\n            }\n\n            &:after {\n                display: block;\n            }\n        `,\n        \"visual-builder__empty-block\": css`\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n            gap: 1rem;\n            min-height: 100px;\n        `,\n        \"visual-builder__empty-block-title\": css`\n            font-size: 0.95rem;\n            font-family: Inter;\n            font-weight: 400;\n            line-height: 100%;\n            color: #647696;\n        `,\n        \"visual-builder__empty-block-add-button\": css`\n            height: 32px;\n            border-radius: 4px;\n            background: #f9f8ff;\n            border-color: #6c5ce7;\n            border-width: 1px;\n            padding: 8px 16px 8px 16px;\n            font-size: 0.9rem;\n            font-family: Inter;\n            font-weight: 600;\n            color: #6c5ce7;\n            padding-block: 0px;\n            letter-spacing: 0.01rem;\n        `,\n        \"visual-builder__hover-outline\": css`\n            position: absolute;\n            outline: 2px dashed #6c5ce7;\n            transition: var(--outline-transition);\n            z-index: 2147483647 !important;\n        `,\n        \"visual-builder__hover-outline--hidden\": css`\n            visibility: hidden;\n        `,\n        \"visual-builder__hover-outline--unclickable\": css`\n            pointer-events: none;\n        `,\n        \"visual-builder__hover-outline--disabled\": css`\n            outline: 2px dashed #909090;\n        `,\n        \"visual-builder__default-cursor--disabled\": css`\n            cursor: none;\n        `,\n        \"visual-builder__draft-field\": css`\n            outline: 2px dashed #eb5646;\n        `,\n        \"visual-builder__variant-field\": css`\n            outline: 2px solid #bd59fa;\n        `,\n        \"visual-builder__pseudo-editable-element\": css`\n            z-index: 99999 !important;\n        `,\n        // cslp error styles\n        \"visual-builder__button-error\": css`\n            background-color: #ffeeeb;\n            padding: 0px !important;\n            &:hover {\n                background-color: #ffeeeb;\n            }\n        `,\n        \"visual-builder__focused-toolbar__error\": css`\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            column-gap: 3px;\n            padding: 4px 8px;\n        `,\n        \"visual-builder__focused-toolbar__error-text\": css`\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 18px;\n            color: #a31b00;\n        `,\n        \"visual-builder__focused-toolbar__error-toolip\": css`\n            position: absolute;\n            width: 400px;\n            background-color: red;\n            left: 0;\n            top: -7px;\n            transform: translateY(-100%);\n            background-color: #767676;\n            border-radius: 4px;\n            box-shadow:\n                0px 1px 10px 0px #6c5ce733,\n                0px 5px 5px 0px #0000001f,\n                0px 2px 4px 0px #00000024;\n            padding: 12px;\n            text-align: left;\n\n            &:before {\n                content: \"\";\n                position: absolute;\n                bottom: -3px;\n                left: 4%;\n                transform: translateX(-50%) rotate(45deg);\n                width: 10px;\n                height: 10px;\n                background-color: #767676;\n            }\n\n            > p {\n                margin: 0;\n                color: #ffffff;\n                font-size: 14px;\n                font-weight: 600;\n                line-height: 21px;\n                margin-bottom: 4px;\n            }\n\n            > span {\n                color: #ffffff;\n                font-size: 12px;\n                font-weight: 400;\n                line-height: 18px;\n            }\n        `,\n        \"variant-field-revert-component\": css`\n            position: relative;\n            display: inline-block;\n            z-index: 2147483647 !important;\n        `,\n        \"variant-field-revert-component__dropdown-content\": css`\n            position: absolute;\n            background-color: #ffffff;\n            min-width: max-content;\n            box-shadow:\n                0 4px 15px 0 rgba(108, 92, 231, 0.2),\n                0 3px 14px 3px rgba(0, 0, 0, 0.12),\n                0 8px 10px 1px rgba(0, 0, 0, 0.14);\n            z-index: 2147483647 !important;\n            margin-top: 4px;\n            padding: 4px 0px;\n            border-radius: 2px;\n        `,\n        \"variant-field-revert-component__dropdown-content__list-item\": css`\n            color: black;\n            padding: 9.6px 16px;\n            text-decoration: none;\n            display: block;\n            font-size: 0.75rem;\n            height: 32px;\n            line-height: 2rem;\n            display: flex;\n            align-items: center;\n            z-index: 2147483647 !important;\n            cursor: pointer;\n            &:hover {\n                background-color: #f1f1f1;\n            }\n            &:hover > span {\n                color: #5d50be;\n            }\n            & > span {\n                margin-top: 4px;\n                margin-bottom: 4px;\n            }\n        `,\n        \"visual-builder__no-cursor-style\": css`\n            cursor: none !important;\n        `,\n        \"visual-builder__field-toolbar-container\": css`\n            display: flex;\n            flex-direction: column-reverse;\n            z-index: 2147483647 !important;\n        `,\n        \"visual-builder__variant-button\": css`\n            display: flex;\n            min-width: 3rem !important;\n            gap: 0.25rem;\n            align-items: center;\n            justify-content: center;\n            display: flex;\n            & svg path {\n                fill: #475161;\n            }\n        `,\n    };\n}\n\nexport const VisualBuilderGlobalStyles = `\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n        \n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n`;\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "2.0.4",
+    "version": "3.0.1",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",
@@ -24,13 +24,12 @@
     ],
     "sideEffects": false,
     "scripts": {
-        "build": "rimraf dist && tsup",
-        "build-webpack": "rimraf dist && webpack --config webpack.prod.js",
-        "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-        "test:watch": "jest --watch",
-        "test:coverage": "jest src --coverage --watchAll --coverageDirectory=\"coverage\"",
-        "dev": "webpack --config webpack.dev.js",
-        "prepare": "npm run build && husky install",
+        "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
+        "test": "vitest",
+        "test:once": "vitest run",
+        "test:coverage": "vitest --coverage",
+        "dev": "tsup --watch",
+        "prepare": "husky install",
         "lint": "eslint src",
         "lint:fix": "eslint --fix",
         "prettier": "prettier src --check",
@@ -44,57 +43,62 @@
     "author": "Contentstack",
     "license": "MIT",
     "devDependencies": {
-        "@babel/core": "^7.2.2",
-        "@babel/preset-env": "^7.3.1",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@types/jest": "^27.0.1",
+        "@contentstack/advanced-post-message": "^0.0.2",
+        "@eslint/js": "^9.10.0",
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/preact": "^3.2.4",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jsdom": "^21.1.6",
+        "@types/lodash-es": "^4.17.12",
         "@types/mustache": "^4.2.2",
-        "@types/post-robot": "^10.0.6",
+        "@types/react": "^18.2.57",
+        "@types/react-dom": "^18.2.19",
         "@types/ssri": "^7.1.5",
         "@types/uuid": "^8.3.1",
-        "@typescript-eslint/eslint-plugin": "^4.31.1",
-        "@typescript-eslint/parser": "^4.31.1",
-        "babel-loader": "^8.0.5",
-        "css-loader": "^5.2.2",
+        "@vitest/coverage-v8": "^2.1.2",
+        "@vitest/ui": "^2.1.2",
         "esbuild-plugin-file-path-extensions": "^2.1.0",
         "eslint": "^7.32.0",
-        "eslint-config-prettier": "^8.6.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-only-warn": "^1.1.0",
+        "eslint-plugin-react": "^7.36.0",
+        "globals": "^15.9.0",
         "husky": "^8.0.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "jest-fetch-mock": "^3.0.3",
-        "mini-css-extract-plugin": "^2.3.0",
-        "prettier": "^2.8.4",
+        "jsdom": "^25.0.0",
+        "prettier": "^3.3.3",
         "prettier-eslint": "^15.0.1",
         "ssri": "^11.0.0",
-        "style-loader": "^2.0.0",
-        "ts-jest": "^29.1.2",
-        "ts-loader": "^9.4.2",
         "ts-node": "^10.9.2",
+        "tsc": "^2.0.4",
         "tsup": "^8.0.1",
+        "tsx": "^4.19.1",
         "typedoc": "^0.25.13",
         "typescript": "^5.4.5",
-        "webpack": "^5.91.0",
-        "webpack-cli": "^4.8.0",
-        "webpack-dev-server": "^4.7.4",
-        "webpack-merge": "^5.8.0"
+        "typescript-eslint": "^8.5.0",
+        "vitest": "^2.1.0"
     },
     "repository": {
         "type": "git",
         "url": "https://github.com/contentstack/live-preview-sdk.git"
     },
     "dependencies": {
+        "@preact/compat": "^17.1.2",
+        "@preact/signals": "^1.2.2",
+        "classnames": "^2.5.1",
+        "deepsignal": "^1.5.0",
         "goober": "^2.1.14",
-        "just-camel-case": "^4.0.2",
         "lodash-es": "^4.17.21",
-        "morphdom": "^2.6.1",
         "mustache": "^4.2.0",
-        "post-robot": "8.0.31",
+        "preact": "^10.19.5",
         "uuid": "^8.3.2"
     },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
+    },
     "lint-staged": {
         "src/**/*.{ts,css,md}": [
-            "npm run prettier:fix"
+            "npm run prettier:fix",
+            "npm run lint:fix"
         ]
     }
 }

package/dist/legacy/compare.cjs

@@ -1,140 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/compare.ts
-var compare_exports = {};
-__export(compare_exports, {
-  handleWebCompare: () => handleWebCompare
-});
-module.exports = __toCommonJS(compare_exports);
-var import_compare = require("./styles/compare.cjs");
-var import_compare2 = require("./utils/compare.cjs");
-var voidElements = /* @__PURE__ */ new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-var LEAF_CSLP_SELECTOR = "[data-cslp]:not(:has([data-cslp]))";
-function handleWebCompare() {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return;
-  }
-  import("post-robot").then((postRobot) => {
-    (0, import_compare.loadCompareGlobalStyle)();
-    (0, import_compare2.registerCompareElement)();
-    postRobot.on("send-current-base-route", async () => {
-      return { url: window.location.href.split("?")[0] };
-    });
-    postRobot.on("send-cslp-data", async () => {
-      const elements = Array.from(
-        document.querySelectorAll(LEAF_CSLP_SELECTOR)
-      );
-      const map = {};
-      for (const element of elements) {
-        const cslp = element.getAttribute("data-cslp");
-        if (element.hasAttributes() && voidElements.has(element.tagName.toLowerCase())) {
-          let attributes = "";
-          for (const attr of element.attributes) {
-            attributes += `${attr.name} -> ${attr.value}
-`;
-          }
-          map[cslp] = attributes;
-        } else {
-          map[cslp] = element.innerHTML;
-        }
-      }
-      return map;
-    });
-    const mergeColors = (className = ".cs-compare--added") => {
-      const elements = Array.from(document.querySelectorAll(className));
-      for (let i = 1; i < elements.length; i++) {
-        const prev = elements[i - 1];
-        const next = elements[i];
-        if (prev.nextElementSibling === next)
-          prev.appendChild(prev.nextSibling);
-      }
-    };
-    postRobot.on("diff-value", async ({ data }) => {
-      const { diff, type } = data;
-      const operation = type === "base" ? "removed" : "added";
-      const elements = Array.from(
-        document.querySelectorAll(LEAF_CSLP_SELECTOR)
-      );
-      for (const element of elements) {
-        const path = element.getAttribute("data-cslp");
-        if (!diff[path])
-          continue;
-        if (voidElements.has(element.tagName.toLowerCase())) {
-          element.classList.add(`cs-compare__void--${operation}`);
-        } else {
-          element.innerHTML = diff[path];
-        }
-      }
-      mergeColors(`.cs-compare--${operation}`);
-    });
-    postRobot.on("remove-diff", async () => {
-      const elements = Array.from(
-        document.querySelectorAll("cs-compare")
-      );
-      for (const element of elements) {
-        const parent = element.parentElement;
-        while (element.firstChild) {
-          parent.insertBefore(element.firstChild, element);
-        }
-        parent.removeChild(element);
-      }
-      const voidElements2 = Array.from(
-        document.querySelectorAll(
-          ".cs-compare__void--added, .cs-compare__void--removed"
-        )
-      );
-      for (const element of voidElements2) {
-        element.classList.remove("cs-compare__void--added");
-        element.classList.remove("cs-compare__void--removed");
-      }
-    });
-  });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  handleWebCompare
-});
-//# sourceMappingURL=compare.cjs.map

package/dist/legacy/compare.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/compare.ts"],"sourcesContent":["import { loadCompareGlobalStyle } from \"./styles/compare\";\nimport { registerCompareElement } from \"./utils/compare\";\n\nconst voidElements = new Set([\n    \"area\",\n    \"base\",\n    \"br\",\n    \"col\",\n    \"embed\",\n    \"hr\",\n    \"img\",\n    \"input\",\n    \"keygen\",\n    \"link\",\n    \"meta\",\n    \"param\",\n    \"source\",\n    \"track\",\n    \"wbr\",\n]);\n\nconst LEAF_CSLP_SELECTOR = \"[data-cslp]:not(:has([data-cslp]))\";\n\nexport function handleWebCompare() {\n    // Check if window and document are available\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n        // Server-side, don't execute client-specific logic\n        return;\n    }\n\n    // Client-side logic\n    import(\"post-robot\").then((postRobot) => {\n        loadCompareGlobalStyle();\n        registerCompareElement();\n\n        postRobot.on(\"send-current-base-route\", async () => {\n            return { url: window.location.href.split(\"?\")[0] };\n        });\n\n        postRobot.on(\"send-cslp-data\", async () => {\n            const elements = Array.from(\n                document.querySelectorAll(LEAF_CSLP_SELECTOR)\n            );\n            const map: Record<string, string> = {};\n            for (const element of elements) {\n                const cslp = element.getAttribute(\"data-cslp\")!;\n                if (\n                    element.hasAttributes() &&\n                    voidElements.has(element.tagName.toLowerCase())\n                ) {\n                    let attributes = \"\";\n                    for (const attr of element.attributes) {\n                        attributes += `${attr.name} -> ${attr.value}\\n`;\n                    }\n                    map[cslp] = attributes;\n                } else {\n                    map[cslp] = element.innerHTML;\n                }\n            }\n            return map;\n        });\n\n        const mergeColors = (className = \".cs-compare--added\") => {\n            const elements = Array.from(document.querySelectorAll(className));\n            for (let i = 1; i < elements.length; i++) {\n                const prev = elements[i - 1];\n                const next = elements[i];\n                if (prev.nextElementSibling === next)\n                    prev.appendChild(prev.nextSibling!);\n            }\n        };\n\n        postRobot.on(\"diff-value\", async ({ data }) => {\n            const { diff, type } = data;\n            const operation = type === \"base\" ? \"removed\" : \"added\";\n            const elements = Array.from(\n                document.querySelectorAll(LEAF_CSLP_SELECTOR)\n            );\n            for (const element of elements) {\n                const path = element.getAttribute(\"data-cslp\")!;\n                if (!diff[path]) continue;\n\n                if (voidElements.has(element.tagName.toLowerCase())) {\n                    element.classList.add(`cs-compare__void--${operation}`);\n                } else {\n                    element.innerHTML = diff[path];\n                }\n            }\n\n            mergeColors(`.cs-compare--${operation}`);\n        });\n\n        postRobot.on(\"remove-diff\", async () => {\n            // unwrap the cs-compare tags\n            const elements = Array.from(\n                document.querySelectorAll(\"cs-compare\")\n            );\n            for (const element of elements) {\n                const parent = element.parentElement!;\n                while (element.firstChild) {\n                    parent.insertBefore(element.firstChild, element);\n                }\n                parent.removeChild(element);\n            }\n            // remove classes cs-compare__void--added and cs-compare__void--removed\n            const voidElements = Array.from(\n                document.querySelectorAll(\n                    \".cs-compare__void--added, .cs-compare__void--removed\"\n                )\n            );\n            for (const element of voidElements) {\n                element.classList.remove(\"cs-compare__void--added\");\n                element.classList.remove(\"cs-compare__void--removed\");\n            }\n        });\n    });\n}\n"],"mappings":"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","names":["import_compare","voidElements"]}

package/dist/legacy/compare.js

@@ -1,105 +0,0 @@
-// src/compare.ts
-import { loadCompareGlobalStyle } from "./styles/compare.js";
-import { registerCompareElement } from "./utils/compare.js";
-var voidElements = /* @__PURE__ */ new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-var LEAF_CSLP_SELECTOR = "[data-cslp]:not(:has([data-cslp]))";
-function handleWebCompare() {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return;
-  }
-  import("post-robot").then((postRobot) => {
-    loadCompareGlobalStyle();
-    registerCompareElement();
-    postRobot.on("send-current-base-route", async () => {
-      return { url: window.location.href.split("?")[0] };
-    });
-    postRobot.on("send-cslp-data", async () => {
-      const elements = Array.from(
-        document.querySelectorAll(LEAF_CSLP_SELECTOR)
-      );
-      const map = {};
-      for (const element of elements) {
-        const cslp = element.getAttribute("data-cslp");
-        if (element.hasAttributes() && voidElements.has(element.tagName.toLowerCase())) {
-          let attributes = "";
-          for (const attr of element.attributes) {
-            attributes += `${attr.name} -> ${attr.value}
-`;
-          }
-          map[cslp] = attributes;
-        } else {
-          map[cslp] = element.innerHTML;
-        }
-      }
-      return map;
-    });
-    const mergeColors = (className = ".cs-compare--added") => {
-      const elements = Array.from(document.querySelectorAll(className));
-      for (let i = 1; i < elements.length; i++) {
-        const prev = elements[i - 1];
-        const next = elements[i];
-        if (prev.nextElementSibling === next)
-          prev.appendChild(prev.nextSibling);
-      }
-    };
-    postRobot.on("diff-value", async ({ data }) => {
-      const { diff, type } = data;
-      const operation = type === "base" ? "removed" : "added";
-      const elements = Array.from(
-        document.querySelectorAll(LEAF_CSLP_SELECTOR)
-      );
-      for (const element of elements) {
-        const path = element.getAttribute("data-cslp");
-        if (!diff[path])
-          continue;
-        if (voidElements.has(element.tagName.toLowerCase())) {
-          element.classList.add(`cs-compare__void--${operation}`);
-        } else {
-          element.innerHTML = diff[path];
-        }
-      }
-      mergeColors(`.cs-compare--${operation}`);
-    });
-    postRobot.on("remove-diff", async () => {
-      const elements = Array.from(
-        document.querySelectorAll("cs-compare")
-      );
-      for (const element of elements) {
-        const parent = element.parentElement;
-        while (element.firstChild) {
-          parent.insertBefore(element.firstChild, element);
-        }
-        parent.removeChild(element);
-      }
-      const voidElements2 = Array.from(
-        document.querySelectorAll(
-          ".cs-compare__void--added, .cs-compare__void--removed"
-        )
-      );
-      for (const element of voidElements2) {
-        element.classList.remove("cs-compare__void--added");
-        element.classList.remove("cs-compare__void--removed");
-      }
-    });
-  });
-}
-export {
-  handleWebCompare
-};
-//# sourceMappingURL=compare.js.map

package/dist/legacy/compare.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/compare.ts"],"sourcesContent":["import { loadCompareGlobalStyle } from \"./styles/compare\";\nimport { registerCompareElement } from \"./utils/compare\";\n\nconst voidElements = new Set([\n    \"area\",\n    \"base\",\n    \"br\",\n    \"col\",\n    \"embed\",\n    \"hr\",\n    \"img\",\n    \"input\",\n    \"keygen\",\n    \"link\",\n    \"meta\",\n    \"param\",\n    \"source\",\n    \"track\",\n    \"wbr\",\n]);\n\nconst LEAF_CSLP_SELECTOR = \"[data-cslp]:not(:has([data-cslp]))\";\n\nexport function handleWebCompare() {\n    // Check if window and document are available\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n        // Server-side, don't execute client-specific logic\n        return;\n    }\n\n    // Client-side logic\n    import(\"post-robot\").then((postRobot) => {\n        loadCompareGlobalStyle();\n        registerCompareElement();\n\n        postRobot.on(\"send-current-base-route\", async () => {\n            return { url: window.location.href.split(\"?\")[0] };\n        });\n\n        postRobot.on(\"send-cslp-data\", async () => {\n            const elements = Array.from(\n                document.querySelectorAll(LEAF_CSLP_SELECTOR)\n            );\n            const map: Record<string, string> = {};\n            for (const element of elements) {\n                const cslp = element.getAttribute(\"data-cslp\")!;\n                if (\n                    element.hasAttributes() &&\n                    voidElements.has(element.tagName.toLowerCase())\n                ) {\n                    let attributes = \"\";\n                    for (const attr of element.attributes) {\n                        attributes += `${attr.name} -> ${attr.value}\\n`;\n                    }\n                    map[cslp] = attributes;\n                } else {\n                    map[cslp] = element.innerHTML;\n                }\n            }\n            return map;\n        });\n\n        const mergeColors = (className = \".cs-compare--added\") => {\n            const elements = Array.from(document.querySelectorAll(className));\n            for (let i = 1; i < elements.length; i++) {\n                const prev = elements[i - 1];\n                const next = elements[i];\n                if (prev.nextElementSibling === next)\n                    prev.appendChild(prev.nextSibling!);\n            }\n        };\n\n        postRobot.on(\"diff-value\", async ({ data }) => {\n            const { diff, type } = data;\n            const operation = type === \"base\" ? \"removed\" : \"added\";\n            const elements = Array.from(\n                document.querySelectorAll(LEAF_CSLP_SELECTOR)\n            );\n            for (const element of elements) {\n                const path = element.getAttribute(\"data-cslp\")!;\n                if (!diff[path]) continue;\n\n                if (voidElements.has(element.tagName.toLowerCase())) {\n                    element.classList.add(`cs-compare__void--${operation}`);\n                } else {\n                    element.innerHTML = diff[path];\n                }\n            }\n\n            mergeColors(`.cs-compare--${operation}`);\n        });\n\n        postRobot.on(\"remove-diff\", async () => {\n            // unwrap the cs-compare tags\n            const elements = Array.from(\n                document.querySelectorAll(\"cs-compare\")\n            );\n            for (const element of elements) {\n                const parent = element.parentElement!;\n                while (element.firstChild) {\n                    parent.insertBefore(element.firstChild, element);\n                }\n                parent.removeChild(element);\n            }\n            // remove classes cs-compare__void--added and cs-compare__void--removed\n            const voidElements = Array.from(\n                document.querySelectorAll(\n                    \".cs-compare__void--added, .cs-compare__void--removed\"\n                )\n            );\n            for (const element of voidElements) {\n                element.classList.remove(\"cs-compare__void--added\");\n                element.classList.remove(\"cs-compare__void--removed\");\n            }\n        });\n    });\n}\n"],"mappings":"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","names":["voidElements"]}

package/dist/legacy/contentstack-live-preview-HOC.cjs

@@ -1,200 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/contentstack-live-preview-HOC.ts
-var contentstack_live_preview_HOC_exports = {};
-__export(contentstack_live_preview_HOC_exports, {
-  default: () => contentstack_live_preview_HOC_default
-});
-module.exports = __toCommonJS(contentstack_live_preview_HOC_exports);
-var import_uuid = require("uuid");
-var import_camelCase = __toESM(require("./utils/camelCase.cjs"), 1);
-var import_live_preview = __toESM(require("./live-preview.cjs"), 1);
-var import_defaults = require("./utils/defaults.cjs");
-var import_public_logger = require("./utils/public-logger.cjs");
-var import_compare = require("./compare.cjs");
-var import_handlePageTraversal = require("./utils/handlePageTraversal.cjs");
-var ContentstackLivePreview = {
-  livePreview: null,
-  userConfig: null,
-  subscribers: {},
-  configs: {
-    params: {}
-  },
-  init(userConfig = import_defaults.userInitData) {
-    if (typeof window !== "undefined") {
-      if (ContentstackLivePreview.livePreview) {
-        import_public_logger.PublicLogger.warn(
-          "You have already initialized the Live Preview SDK. So, any subsequent initialization returns the existing SDK instance."
-        );
-        return Promise.resolve(ContentstackLivePreview.livePreview);
-      } else {
-        (0, import_compare.handleWebCompare)();
-        (0, import_handlePageTraversal.handlePageTraversal)();
-        ContentstackLivePreview.livePreview = new import_live_preview.default(
-          userConfig
-        );
-        ContentstackLivePreview.livePreview.setOnChangeCallback(
-          ContentstackLivePreview.publish
-        );
-        ContentstackLivePreview.livePreview.setConfigFromParams(
-          ContentstackLivePreview.configs.params
-        );
-        ContentstackLivePreview.configs.params = {};
-        return Promise.resolve(ContentstackLivePreview.livePreview);
-      }
-    } else {
-      ContentstackLivePreview.userConfig = userConfig;
-    }
-  },
-  get hash() {
-    if (!ContentstackLivePreview.livePreview) {
-      const urlParams = new URLSearchParams(
-        ContentstackLivePreview.configs.params
-      );
-      return urlParams.get("live_preview") ?? "";
-    }
-    return ContentstackLivePreview.livePreview.hash;
-  },
-  /**
-   * Sets the live preview hash from the query param which is
-   * accessible via `hash` property.
-   * @param params query param in an object form
-   */
-  setConfigFromParams(params = {}) {
-    if (!ContentstackLivePreview.livePreview) {
-      ContentstackLivePreview.configs.params = params;
-      return;
-    }
-    ContentstackLivePreview.livePreview.setConfigFromParams(params);
-  },
-  publish() {
-    Object.values(
-      ContentstackLivePreview.subscribers
-    ).forEach((func) => {
-      func();
-    });
-  },
-  subscribe(callback) {
-    const callbackUid = (0, import_uuid.v4)();
-    ContentstackLivePreview.subscribers[callbackUid] = callback;
-    return callbackUid;
-  },
-  /**
-   * @type {function}
-   * @param onChangeCallback A function param to fetch the data from contentstack database
-   * @param config An optional object param, pass {skipInitialRender:Boolean} to skip init call to onChangeCallback
-   * @returns Subscribed Callback UID
-   */
-  onEntryChange(onChangeCallback, config) {
-    const { skipInitialRender = false } = config || {};
-    if (ContentstackLivePreview.userConfig) {
-      ContentstackLivePreview.livePreview = new import_live_preview.default(
-        ContentstackLivePreview.userConfig
-      );
-      ContentstackLivePreview.livePreview.setOnChangeCallback(
-        ContentstackLivePreview.publish
-      );
-      ContentstackLivePreview.livePreview.setConfigFromParams(
-        ContentstackLivePreview.configs.params
-      );
-      ContentstackLivePreview.configs.params = {};
-      ContentstackLivePreview.userConfig = null;
-    }
-    const callbackUid = ContentstackLivePreview.subscribe(onChangeCallback);
-    if (!skipInitialRender) {
-      onChangeCallback();
-    }
-    return callbackUid;
-  },
-  /**
-   * @type {function}
-   * @param onChangeCallback A function param to fetch the data from contentstack database on content change.
-   * @returns Subscribed Callback UID
-   */
-  onLiveEdit(onChangeCallback) {
-    return ContentstackLivePreview.onEntryChange(onChangeCallback, {
-      skipInitialRender: true
-    });
-  },
-  unsubscribeOnEntryChange(callback) {
-    if (typeof callback === "string") {
-      if (!ContentstackLivePreview.subscribers[callback]) {
-        import_public_logger.PublicLogger.warn("No subscriber found with the given id.");
-      }
-      delete ContentstackLivePreview.subscribers[callback];
-    } else if (typeof callback === "function") {
-      const isCallbackDeleted = Object.entries(
-        ContentstackLivePreview.subscribers
-      ).some(([uid, func]) => {
-        if (func === callback) {
-          delete ContentstackLivePreview.subscribers[uid];
-          return true;
-        }
-        return false;
-      });
-      if (!isCallbackDeleted) {
-        import_public_logger.PublicLogger.warn(
-          "No subscriber found with the given callback."
-        );
-      }
-    }
-  },
-  async getGatsbyDataFormat(sdkQuery, prefix) {
-    if (typeof sdkQuery.find === "function") {
-      return sdkQuery.toJSON().find().then((result) => {
-        return result.map((res) => {
-          return res.map((entry) => {
-            const dataTitle = (0, import_camelCase.default)(
-              `${prefix}_${sdkQuery.content_type_uid}`
-            );
-            return { [dataTitle]: entry };
-          });
-        });
-      }).catch((err) => {
-        console.error(err);
-      });
-    } else if (typeof sdkQuery.fetch === "function") {
-      return sdkQuery.toJSON().fetch().then((ent) => {
-        const dataTitle = (0, import_camelCase.default)(
-          `${prefix}_${sdkQuery.content_type_uid}`
-        );
-        const entry = { [dataTitle]: ent };
-        return entry;
-      }).catch((err) => {
-        console.error(err);
-      });
-    }
-  },
-  getSdkVersion() {
-    return "2.0.4";
-  }
-};
-var contentstack_live_preview_HOC_default = ContentstackLivePreview;
-//# sourceMappingURL=contentstack-live-preview-HOC.cjs.map