@mhamz.01/easyflow-texteditor 0.1.41 → 0.1.43

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/tooltip/tooltip.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/tooltip/tooltip.css */
 .tiptap-tooltip {
   --tt-tooltip-bg: var(--tt-gray-light-900);
   --tt-tooltip-text: var(--white);
@@ -43,7 +43,7 @@
   color: var(--tt-kbd);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-colors.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-colors.css */
 .tiptap-button {
   --tt-button-default-bg-color: var(--tt-gray-light-a-100);
   --tt-button-hover-bg-color: var(--tt-gray-light-200);
@@ -279,7 +279,7 @@
   --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-group.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-group.css */
 .tiptap-button-group {
   position: relative;
   display: flex;
@@ -300,7 +300,7 @@
   align-items: center;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button.css */
 .tiptap-button {
   font-size: 0.875rem;
   font-weight: 500;
@@ -563,7 +563,7 @@
   color: var(--tt-button-disabled-icon-color);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/separator/separator.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/separator/separator.css */
 .tiptap-separator {
   --tt-link-border-color: var(--tt-gray-light-a-200);
 }
@@ -584,7 +584,7 @@
   width: 1px;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/toolbar/toolbar.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/toolbar/toolbar.css */
 :root {
   --tt-toolbar-height: 2.75rem;
   --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
@@ -692,7 +692,7 @@
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/image-upload-node/image-upload-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/image-upload-node/image-upload-node.css */
 z {
   --tiptap-image-upload-active: var(--tt-brand-color-500);
   --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
@@ -896,7 +896,7 @@ z {
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/blockquote-node/blockquote-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/blockquote-node/blockquote-node.css */
 .tiptap.ProseMirror {
   --blockquote-bg-color: var(--tt-gray-light-900);
 }
@@ -926,7 +926,7 @@ z {
   border-radius: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/code-block-node/code-block-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/code-block-node/code-block-node.css */
 .tiptap.ProseMirror {
   --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
   --tt-inline-code-text-color: var(--tt-gray-light-a-700);
@@ -971,7 +971,7 @@ z {
   color: inherit;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css */
 .tiptap.ProseMirror {
   --horizontal-rule-color: var(--tt-gray-light-a-200);
 }
@@ -990,7 +990,7 @@ z {
   padding-bottom: 0.75rem;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/list-node/list-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/list-node/list-node.css */
 .tiptap.ProseMirror {
   --tt-checklist-bg-color: var(--tt-gray-light-a-100);
   --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
@@ -1115,7 +1115,7 @@ z {
   min-width: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/image-node/image-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/image-node/image-node.css */
 .tiptap.ProseMirror img {
   max-width: 100%;
   height: auto;
@@ -1140,7 +1140,7 @@ z {
   margin: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-node/heading-node/heading-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-node/heading-node/heading-node.css */
 .tiptap.ProseMirror h1,
 .tiptap.ProseMirror h2,
 .tiptap.ProseMirror h3,
@@ -1180,7 +1180,7 @@ z {
   margin-top: 2em;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-colors.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-colors.css */
 .tiptap-badge {
   --tt-badge-border-color: var(--tt-gray-light-a-200);
   --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
@@ -1378,7 +1378,7 @@ z {
   --tt-badge-icon-color-emphasized: var( --tt-brand-color-900 );
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-group.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-group.css */
 .tiptap-badge-group {
   align-items: center;
   display: flex;
@@ -1392,7 +1392,7 @@ z {
   flex-direction: row;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge.css */
 .tiptap-badge {
   font-size: 0.625rem;
   font-weight: 700;
@@ -1470,7 +1470,7 @@ z {
   color: var(--tt-badge-icon-color-subdued);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css */
 .tiptap-dropdown-menu {
   --tt-dropdown-menu-bg-color: var(--white);
   --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
@@ -1517,7 +1517,7 @@ z {
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/card/card.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/card/card.css */
 z {
   --tiptap-card-bg-color: var(--white);
   --tiptap-card-border-color: var(--tt-gray-light-a-100);
@@ -1586,7 +1586,7 @@ z {
   color: var(--tiptap-card-group-label-color);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/popover/popover.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/popover/popover.css */
 .tiptap-popover {
   --tt-popover-bg-color: var(--white);
   --tt-popover-border-color: var(--tt-gray-light-a-100);
@@ -1633,7 +1633,7 @@ z {
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css */
 .tiptap-button-highlight {
   position: relative;
   width: 1.25rem;
@@ -1667,7 +1667,7 @@ z {
   filter: brightness(180%);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-ui-primitive/input/input.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-ui-primitive/input/input.css */
 :root {
   --tiptap-input-placeholder: var(--tt-gray-light-a-400);
 }
@@ -1707,7 +1707,7 @@ z {
   align-items: stretch;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/components/tiptap-templates/simple/simple-editor.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/components/tiptap-templates/simple/simple-editor.css */
 body {
   --tt-toolbar-height: 44px;
   --tt-theme-text: var(--tt-gray-dark-900);
@@ -1851,7 +1851,7 @@ table .column-resize-handle {
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/styles/index.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/styles/index.css */
 .tiptap.ProseMirror {
   --blockquote-bg-color: var(--tt-gray-light-900);
 }
@@ -3724,8 +3724,8 @@ z {
   color: var(--tt-kbd);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-34372-6RsyBlGF3jgk/easyflow-texteditor/src/styles/_variables.css */
-:root {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-33344-7pApYCYch4nl/easyflow-texteditor/src/styles/_variables.css */
+easyflow-editor {
   overflow-wrap: break-word;
   text-size-adjust: none;
   text-rendering: optimizeLegibility;
@@ -3841,14 +3841,14 @@ z {
   --tt-destructive-contrast: 8%;
   --tt-foreground-contrast: 8%;
 }
-:root,
-:root *,
-:root ::before,
-:root ::after {
+easyflow-editor .easyflow-editor,
+easyflow-editor .easyflow-editor *,
+easyflow-editor .easyflow-editor *::before,
+easyflow-editor .easyflow-editor *::after {
   box-sizing: border-box;
   transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
 }
-:root {
+easyflow-editor {
   --tt-bg-color: var(--white);
   --tt-border-color: var(--tt-gray-light-a-200);
   --tt-border-color-tint: var(--tt-gray-light-a-100);
@@ -3859,7 +3859,7 @@ z {
   --tt-card-bg-color: var(--white);
   --tt-card-border-color: var(--tt-gray-light-a-100);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-bg-color: var(--black);
   --tt-border-color: var(--tt-gray-dark-a-200);
   --tt-border-color-tint: var(--tt-gray-dark-a-100);
@@ -3875,7 +3875,7 @@ z {
     0px 6px 8px 0px rgba(0, 0, 0, 0.22),
     0px 2px 3px 0px rgba(0, 0, 0, 0.12);
 }
-:root {
+easyflow-editor {
   --tt-color-text-gray: hsl(45, 2%, 46%);
   --tt-color-text-brown: hsl(19, 31%, 47%);
   --tt-color-text-orange: hsl(30, 89%, 45%);
@@ -3895,7 +3895,7 @@ z {
   --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
   --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-text-gray: hsl(0, 0%, 61%);
   --tt-color-text-brown: hsl(18, 35%, 58%);
   --tt-color-text-orange: hsl(25, 53%, 53%);
@@ -3915,7 +3915,7 @@ z {
   --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
   --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
 }
-:root {
+easyflow-editor {
   --tt-color-highlight-yellow: #fef9c3;
   --tt-color-highlight-green: #dcfce7;
   --tt-color-highlight-blue: #e0f2fe;
@@ -3935,7 +3935,7 @@ z {
   --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
   --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-highlight-yellow: #6b6524;
   --tt-color-highlight-green: #509568;
   --tt-color-highlight-blue: #6e92aa;
@@ -4432,9 +4432,6 @@ z {
   .h-px {
     height: 1px;
   }
-  .h-screen {
-    height: 100vh;
-  }
   .h-svh {
     height: 100svh;
   }
@@ -4723,10 +4720,10 @@ z {
     }
   }
   .border-input {
-    border-color: var(--input);
+    border-color: var(--ef-input);
   }
   .border-sidebar-border {
-    border-color: var(--sidebar-border);
+    border-color: var(--ef-sidebar-border);
   }
   .border-t-transparent {
     border-top-color: transparent;
@@ -4735,10 +4732,10 @@ z {
     border-left-color: transparent;
   }
   .bg-accent {
-    background-color: var(--accent);
+    background-color: var(--ef-accent);
   }
   .bg-background {
-    background-color: var(--background);
+    background-color: var(--ef-background);
   }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
@@ -4747,28 +4744,28 @@ z {
     }
   }
   .bg-border {
-    background-color: var(--border);
+    background-color: var(--ef-border);
   }
   .bg-destructive {
-    background-color: var(--destructive);
+    background-color: var(--ef-destructive);
   }
   .bg-foreground {
-    background-color: var(--foreground);
+    background-color: var(--ef-foreground);
   }
   .bg-popover {
-    background-color: var(--popover);
+    background-color: var(--ef-popover);
   }
   .bg-primary {
-    background-color: var(--primary);
+    background-color: var(--ef-primary);
   }
   .bg-secondary {
-    background-color: var(--secondary);
+    background-color: var(--ef-secondary);
   }
   .bg-sidebar {
-    background-color: var(--sidebar);
+    background-color: var(--ef-sidebar);
   }
   .bg-sidebar-border {
-    background-color: var(--sidebar-border);
+    background-color: var(--ef-sidebar-border);
   }
   .bg-transparent {
     background-color: transparent;
@@ -4777,7 +4774,7 @@ z {
     fill: currentcolor;
   }
   .fill-foreground {
-    fill: var(--foreground);
+    fill: var(--ef-foreground);
   }
   .p-0 {
     padding: calc(var(--spacing) * 0);
@@ -4896,36 +4893,36 @@ z {
     color: #a3a3a8;
   }
   .text-background {
-    color: var(--background);
+    color: var(--ef-background);
   }
   .text-foreground {
-    color: var(--foreground);
+    color: var(--ef-foreground);
   }
   .text-muted-foreground {
-    color: var(--muted-foreground);
+    color: var(--ef-muted-foreground);
   }
   .text-popover-foreground {
-    color: var(--popover-foreground);
+    color: var(--ef-popover-foreground);
   }
   .text-primary {
-    color: var(--primary);
+    color: var(--ef-primary);
   }
   .text-primary-foreground {
-    color: var(--primary-foreground);
+    color: var(--ef-primary-foreground);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
   .text-secondary-foreground {
-    color: var(--secondary-foreground);
+    color: var(--ef-secondary-foreground);
   }
   .text-sidebar-foreground {
-    color: var(--sidebar-foreground);
+    color: var(--ef-sidebar-foreground);
   }
   .text-sidebar-foreground\/70 {
-    color: var(--sidebar-foreground);
+    color: var(--ef-sidebar-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+      color: color-mix(in oklab, var(--ef-sidebar-foreground) 70%, transparent);
     }
   }
   .text-white {
@@ -5008,10 +5005,10 @@ z {
       var(--tw-shadow);
   }
   .ring-sidebar-ring {
-    --tw-ring-color: var(--sidebar-ring);
+    --tw-ring-color: var(--ef-sidebar-ring);
   }
   .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
+    --tw-ring-offset-color: var(--ef-background);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -5313,7 +5310,7 @@ z {
   }
   .group-data-\[variant\=floating\]\:border-sidebar-border {
     &:is(:where(.group)[data-variant=floating] *) {
-      border-color: var(--sidebar-border);
+      border-color: var(--ef-sidebar-border);
     }
   }
   .group-data-\[variant\=floating\]\:shadow-sm {
@@ -5330,7 +5327,7 @@ z {
   .peer-hover\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button):hover ~ *) {
       @media (hover: hover) {
-        color: var(--sidebar-accent-foreground);
+        color: var(--ef-sidebar-accent-foreground);
       }
     }
   }
@@ -5346,7 +5343,7 @@ z {
   }
   .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button)[data-active=true] ~ *) {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
@@ -5366,18 +5363,18 @@ z {
   }
   .selection\:bg-primary {
     & *::selection {
-      background-color: var(--primary);
+      background-color: var(--ef-primary);
     }
     &::selection {
-      background-color: var(--primary);
+      background-color: var(--ef-primary);
     }
   }
   .selection\:text-primary-foreground {
     & *::selection {
-      color: var(--primary-foreground);
+      color: var(--ef-primary-foreground);
     }
     &::selection {
-      color: var(--primary-foreground);
+      color: var(--ef-primary-foreground);
     }
   }
   .file\:inline-flex {
@@ -5415,12 +5412,12 @@ z {
   }
   .file\:text-foreground {
     &::file-selector-button {
-      color: var(--foreground);
+      color: var(--ef-foreground);
     }
   }
   .placeholder\:text-muted-foreground {
     &::placeholder {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .after\:absolute {
@@ -5491,16 +5488,16 @@ z {
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
       }
     }
   }
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--ef-accent) 50%, transparent);
         }
       }
     }
@@ -5508,9 +5505,9 @@ z {
   .hover\:bg-accent\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 80%, transparent);
+          background-color: color-mix(in oklab, var(--ef-accent) 80%, transparent);
         }
       }
     }
@@ -5518,9 +5515,9 @@ z {
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+          background-color: color-mix(in oklab, var(--ef-destructive) 90%, transparent);
         }
       }
     }
@@ -5528,9 +5525,9 @@ z {
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--primary);
+        background-color: var(--ef-primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+          background-color: color-mix(in oklab, var(--ef-primary) 90%, transparent);
         }
       }
     }
@@ -5538,9 +5535,9 @@ z {
   .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--secondary);
+        background-color: var(--ef-secondary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+          background-color: color-mix(in oklab, var(--ef-secondary) 80%, transparent);
         }
       }
     }
@@ -5548,7 +5545,7 @@ z {
   .hover\:bg-sidebar-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--sidebar-accent);
+        background-color: var(--ef-sidebar-accent);
       }
     }
   }
@@ -5562,14 +5559,14 @@ z {
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--accent-foreground);
+        color: var(--ef-accent-foreground);
       }
     }
   }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--sidebar-accent-foreground);
+        color: var(--ef-sidebar-accent-foreground);
       }
     }
   }
@@ -5611,7 +5608,7 @@ z {
     &:hover {
       @media (hover: hover) {
         &:is(:where(.group)[data-collapsible=offcanvas] *) {
-          background-color: var(--sidebar);
+          background-color: var(--ef-sidebar);
         }
       }
     }
@@ -5621,19 +5618,19 @@ z {
       @media (hover: hover) {
         &::after {
           content: var(--tw-content);
-          background-color: var(--sidebar-border);
+          background-color: var(--ef-sidebar-border);
         }
       }
     }
   }
   .focus\:bg-accent {
     &:focus {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .focus\:text-accent-foreground {
     &:focus {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .focus\:text-red-600 {
@@ -5654,7 +5651,7 @@ z {
   }
   .focus\:ring-ring {
     &:focus {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--ef-ring);
     }
   }
   .focus\:ring-offset-2 {
@@ -5675,7 +5672,7 @@ z {
   }
   .focus-visible\:border-ring {
     &:focus-visible {
-      border-color: var(--ring);
+      border-color: var(--ef-ring);
     }
   }
   .focus-visible\:ring-2 {
@@ -5702,17 +5699,17 @@ z {
   }
   .focus-visible\:ring-destructive\/20 {
     &:focus-visible {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
       }
     }
   }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--ef-ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-ring) 50%, transparent);
       }
     }
   }
@@ -5724,12 +5721,12 @@ z {
   }
   .active\:bg-sidebar-accent {
     &:active {
-      background-color: var(--sidebar-accent);
+      background-color: var(--ef-sidebar-accent);
     }
   }
   .active\:text-sidebar-accent-foreground {
     &:active {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .disabled\:pointer-events-none {
@@ -5759,7 +5756,7 @@ z {
   }
   .has-data-\[variant\=inset\]\:bg-sidebar {
     &:has(*[data-variant=inset]) {
-      background-color: var(--sidebar);
+      background-color: var(--ef-sidebar);
     }
   }
   .has-\[\>svg\]\:px-2\.5 {
@@ -5789,20 +5786,20 @@ z {
   }
   .aria-invalid\:border-destructive {
     &[aria-invalid=true] {
-      border-color: var(--destructive);
+      border-color: var(--ef-destructive);
     }
   }
   .aria-invalid\:ring-destructive\/20 {
     &[aria-invalid=true] {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
       }
     }
   }
   .data-\[active\=true\]\:bg-sidebar-accent {
     &[data-active=true] {
-      background-color: var(--sidebar-accent);
+      background-color: var(--ef-sidebar-accent);
     }
   }
   .data-\[active\=true\]\:font-medium {
@@ -5813,7 +5810,7 @@ z {
   }
   .data-\[active\=true\]\:text-sidebar-accent-foreground {
     &[data-active=true] {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .data-\[disabled\]\:pointer-events-none {
@@ -5863,12 +5860,12 @@ z {
   }
   .data-\[selected\=true\]\:bg-accent {
     &[data-selected=true] {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .data-\[selected\=true\]\:text-accent-foreground {
     &[data-selected=true] {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
@@ -5948,22 +5945,22 @@ z {
   }
   .data-\[state\=open\]\:bg-accent {
     &[data-state=open] {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .data-\[state\=open\]\:bg-secondary {
     &[data-state=open] {
-      background-color: var(--secondary);
+      background-color: var(--ef-secondary);
     }
   }
   .data-\[state\=open\]\:text-accent-foreground {
     &[data-state=open] {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .data-\[state\=open\]\:text-muted-foreground {
     &[data-state=open] {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .data-\[state\=open\]\:opacity-100 {
@@ -6013,7 +6010,7 @@ z {
     &[data-state=open] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--sidebar-accent);
+          background-color: var(--ef-sidebar-accent);
         }
       }
     }
@@ -6022,22 +6019,22 @@ z {
     &[data-state=open] {
       &:hover {
         @media (hover: hover) {
-          color: var(--sidebar-accent-foreground);
+          color: var(--ef-sidebar-accent-foreground);
         }
       }
     }
   }
   .data-\[variant\=destructive\]\:text-destructive {
     &[data-variant=destructive] {
-      color: var(--destructive);
+      color: var(--ef-destructive);
     }
   }
   .data-\[variant\=destructive\]\:focus\:bg-destructive\/10 {
     &[data-variant=destructive] {
       &:focus {
-        background-color: var(--destructive);
+        background-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+          background-color: color-mix(in oklab, var(--ef-destructive) 10%, transparent);
         }
       }
     }
@@ -6045,7 +6042,7 @@ z {
   .data-\[variant\=destructive\]\:focus\:text-destructive {
     &[data-variant=destructive] {
       &:focus {
-        color: var(--destructive);
+        color: var(--ef-destructive);
       }
     }
   }
@@ -6158,22 +6155,22 @@ z {
   }
   .dark\:border-input {
     @media (prefers-color-scheme: dark) {
-      border-color: var(--input);
+      border-color: var(--ef-input);
     }
   }
   .dark\:bg-destructive\/60 {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--destructive);
+      background-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--ef-destructive) 60%, transparent);
       }
     }
   }
   .dark\:bg-input\/30 {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--input);
+      background-color: var(--ef-input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--ef-input) 30%, transparent);
       }
     }
   }
@@ -6186,9 +6183,9 @@ z {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--accent);
+          background-color: var(--ef-accent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+            background-color: color-mix(in oklab, var(--ef-accent) 50%, transparent);
           }
         }
       }
@@ -6198,9 +6195,9 @@ z {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--input);
+          background-color: var(--ef-input);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--input) 50%, transparent);
+            background-color: color-mix(in oklab, var(--ef-input) 50%, transparent);
           }
         }
       }
@@ -6209,9 +6206,9 @@ z {
   .dark\:focus-visible\:ring-destructive\/40 {
     @media (prefers-color-scheme: dark) {
       &:focus-visible {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 40%, transparent);
         }
       }
     }
@@ -6219,9 +6216,9 @@ z {
   .dark\:aria-invalid\:ring-destructive\/40 {
     @media (prefers-color-scheme: dark) {
       &[aria-invalid=true] {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 40%, transparent);
         }
       }
     }
@@ -6230,9 +6227,9 @@ z {
     @media (prefers-color-scheme: dark) {
       &[data-variant=destructive] {
         &:focus {
-          background-color: var(--destructive);
+          background-color: var(--ef-destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+            background-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
           }
         }
       }
@@ -6262,7 +6259,7 @@ z {
   }
   .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
     & [cmdk-group-heading] {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .\[\&_\[cmdk-group\]\]\:px-2 {
@@ -6328,14 +6325,14 @@ z {
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
     & svg:not([class*=text-]) {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
     &[data-variant=destructive] {
       :is(& > *) {
         &:is(svg) {
-          color: var(--destructive) !important;
+          color: var(--ef-destructive) !important;
         }
       }
     }
@@ -6365,7 +6362,7 @@ z {
   }
   .\[\&\>svg\]\:text-sidebar-accent-foreground {
     & > svg {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
@@ -6406,7 +6403,7 @@ z {
 @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; }
 @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
-:root {
+easyflow-editor {
   overflow-wrap: break-word;
   text-size-adjust: none;
   text-rendering: optimizeLegibility;
@@ -6521,15 +6518,15 @@ z {
   --tt-accent-contrast: 8%;
   --tt-destructive-contrast: 8%;
   --tt-foreground-contrast: 8%;
-  &,
-  *,
-  ::before,
-  ::after {
+  .easyflow-editor,
+  .easyflow-editor *,
+  .easyflow-editor *::before,
+  .easyflow-editor *::after {
     box-sizing: border-box;
     transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
   }
 }
-:root {
+easyflow-editor {
   --tt-bg-color: var(--white);
   --tt-border-color: var(--tt-gray-light-a-200);
   --tt-border-color-tint: var(--tt-gray-light-a-100);
@@ -6540,7 +6537,7 @@ z {
   --tt-card-bg-color: var(--white);
   --tt-card-border-color: var(--tt-gray-light-a-100);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-bg-color: var(--black);
   --tt-border-color: var(--tt-gray-dark-a-200);
   --tt-border-color-tint: var(--tt-gray-dark-a-100);
@@ -6556,7 +6553,7 @@ z {
     0px 6px 8px 0px rgba(0, 0, 0, 0.22),
     0px 2px 3px 0px rgba(0, 0, 0, 0.12);
 }
-:root {
+easyflow-editor {
   --tt-color-text-gray: hsl(45, 2%, 46%);
   --tt-color-text-brown: hsl(19, 31%, 47%);
   --tt-color-text-orange: hsl(30, 89%, 45%);
@@ -6576,7 +6573,7 @@ z {
   --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
   --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-text-gray: hsl(0, 0%, 61%);
   --tt-color-text-brown: hsl(18, 35%, 58%);
   --tt-color-text-orange: hsl(25, 53%, 53%);
@@ -6596,7 +6593,7 @@ z {
   --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
   --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
 }
-:root {
+easyflow-editor {
   --tt-color-highlight-yellow: #fef9c3;
   --tt-color-highlight-green: #dcfce7;
   --tt-color-highlight-blue: #e0f2fe;
@@ -6616,7 +6613,7 @@ z {
   --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
   --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-highlight-yellow: #6b6524;
   --tt-color-highlight-green: #509568;
   --tt-color-highlight-blue: #6e92aa;
@@ -6718,42 +6715,31 @@ z {
     transform: rotate(360deg);
   }
 }
-* {
-  border-color: #1e1e1e;
+.easyflow-editor {
+  * {
+    border-color: #1e1e1e;
+  }
 }
-:root {
+.easyflow-editor {
   --radius: 0.625rem;
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --ef-background: oklch(0.145 0 0);
+  --ef-foreground: oklch(0.985 0 0);
+  --ef-card: oklch(0.205 0 0);
+  --ef-card-foreground: oklch(0.985 0 0);
+  --ef-popover: oklch(0.205 0 0);
+  --ef-popover-foreground: oklch(0.985 0 0);
+  --ef-primary: oklch(0.922 0 0);
+  --ef-primary-foreground: oklch(0.205 0 0);
+  --ef-secondary: oklch(0.269 0 0);
+  --ef-secondary-foreground: oklch(0.985 0 0);
+  --ef-muted: oklch(0.269 0 0);
+  --ef-muted-foreground: oklch(0.708 0 0);
+  --ef-border: oklch(1 0 0 / 10%);
+  --ef-input: oklch(1 0 0 / 15%);
+  --ef-ring: oklch(0.556 0 0);
+  --ef-sidebar: oklch(0.205 0 0);
+  --ef-sidebar-foreground: oklch(0.985 0 0);
+  --ef-sidebar-border: oklch(1 0 0 / 10%);
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }