@superblocksteam/library 2.0.119-next.0 → 2.0.119

package/dist/{style.css → lib/index.css}

@@ -1,10 +1,13 @@
 :root {
+  /* Edit mode z-index values */
   --sb-edit-z-index-high: 1010;
   --sb-edit-z-index-mid: 1002;
   --sb-edit-z-index-base: 1001;
   --primary-rect-color: #0087e0;
 }
 
+/* A class that sets the child anchor-name to a variable that is set in react */
+/* First level is the suspense provider, second level is the component */
 .sb-anchor-name {
   anchor-name: var(--anchor-name);
 }
@@ -15,41 +18,46 @@
   }
 }
 
+/**
+* Used to drag *new* components into the canvas.
+* It's a full height/width layer above the editor canvas.
+* Triggers the draggable preview box for the new component to be dropped.
+**/
 .sb-new-component-dragging-layer {
+  position: fixed;
   width: 100vw;
   height: 100vh;
   z-index: var(--sb-edit-z-index-high);
-  position: fixed;
 }
 
 .sb-interaction-layer-wrapper {
   z-index: var(--sb-edit-z-index-high);
-  width: 0;
   height: 0;
+  width: 0;
   top: 0;
   left: 0;
 }
 
 .sb-edit-drag-preview {
-  pointer-events: none;
-  background: #e0000029;
+  background: rgba(224, 0, 0, 0.16);
   border: 1px solid red;
+  box-shadow: inset 0 0 0 3px rgba(224, 0, 0, 0.16);
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 0 3px #e0000029;
+  pointer-events: none;
 
   &[data-is-valid-drop="true"] {
     border: 1px solid var(--primary-rect-color);
-    background: #0087e029;
-    box-shadow: inset 0 0 0 3px #0087e029;
+    background: rgba(0, 135, 224, 0.16);
+    box-shadow: inset 0 0 0 3px rgba(0, 135, 224, 0.16);
   }
 }
 
 .sb-edit-selection-rect {
+  position: absolute;
   border: 2px solid var(--primary-rect-color);
   pointer-events: none;
   z-index: var(--sb-edit-z-index-base);
-  position: absolute;
 
   &.sb-edit-focus {
     border: 1px solid var(--primary-rect-color);
@@ -60,211 +68,225 @@
   }
 
   &.sb-edit-target-mode.sb-edit-focus {
-    background: #7c4ff80a;
     border: 1px solid #c2b9dd;
+    background: rgba(124, 79, 248, 0.04);
   }
 }
 
+/* ai target mode */
+
 .sb-target-mode-border {
+  position: absolute;
   top: anchor(top);
   left: anchor(left);
   right: anchor(right);
   bottom: anchor(bottom);
   pointer-events: none;
-  position: absolute;
 }
 
-.sb-target-mode-border-top-right, .sb-target-mode-border-top-left, .sb-target-mode-border-bottom-right, .sb-target-mode-border-bottom-left {
-  box-sizing: border-box;
+.sb-target-mode-border-top-right,
+.sb-target-mode-border-top-left,
+.sb-target-mode-border-bottom-right,
+.sb-target-mode-border-bottom-left {
   width: 12px;
   height: 12px;
   position: absolute;
+  box-sizing: border-box;
 }
 
 .sb-target-mode-border-top-right {
-  border-top: 2px solid #7c4ff8;
-  border-left: 2px solid #7c4ff8;
   top: 0;
   left: 0;
+  border-top: 2px solid rgba(124, 79, 248, 1);
+  border-left: 2px solid rgba(124, 79, 248, 1);
 }
 
 .sb-target-mode-border-top-left {
-  border-top: 2px solid #7c4ff8;
-  border-right: 2px solid #7c4ff8;
   top: 0;
   right: 0;
+  border-top: 2px solid rgba(124, 79, 248, 1);
+  border-right: 2px solid rgba(124, 79, 248, 1);
 }
 
 .sb-target-mode-border-bottom-right {
-  border-bottom: 2px solid #7c4ff8;
-  border-right: 2px solid #7c4ff8;
   bottom: 0;
   right: 0;
+  border-bottom: 2px solid rgba(124, 79, 248, 1);
+  border-right: 2px solid rgba(124, 79, 248, 1);
 }
 
 .sb-target-mode-border-bottom-left {
-  border-bottom: 2px solid #7c4ff8;
-  border-left: 2px solid #7c4ff8;
   bottom: 0;
   left: 0;
+  border-bottom: 2px solid rgba(124, 79, 248, 1);
+  border-left: 2px solid rgba(124, 79, 248, 1);
 }
 
+/*
+  Handles for resizing the selection rect.
+  These are the little circles that appear when you select a widget
+  Used in interaction-rect-handles.tsx
+*/
+
 .resize-handle {
-  border: 1px solid var(--primary-rect-color);
+  position: absolute;
   width: 12px;
   height: 12px;
+  background-color: white;
+  border: 1px solid var(--primary-rect-color);
+  border-radius: 50%;
   z-index: var(--sb-edit-z-index-high);
   pointer-events: auto;
-  background-color: #fff;
-  border-radius: 50%;
-  position: absolute;
 
-  & .bp5-popover-target {
+  .bp5-popover-target {
     width: 100%;
     height: 100%;
   }
 
   &.top-left-resize-handle {
-    cursor: nw-resize;
     top: -6px;
     left: -6px;
+    cursor: nw-resize;
   }
 
   &.top-right-resize-handle {
-    cursor: ne-resize;
     top: -6px;
     right: -6px;
+    cursor: ne-resize;
   }
 
   &.bottom-right-resize-handle {
-    cursor: se-resize;
     bottom: -6px;
     right: -6px;
+    cursor: se-resize;
   }
 
   &.bottom-left-resize-handle {
-    cursor: sw-resize;
     bottom: -6px;
     left: -6px;
+    cursor: sw-resize;
   }
 
   &.top-resize-handle {
-    cursor: ns-resize;
-    pointer-events: auto;
-    background-color: #0000;
-    border: none;
-    width: auto;
-    height: 12px;
     top: -6px;
     left: 0;
     right: 0;
+    height: 12px;
+    width: auto;
+    cursor: ns-resize;
+    background-color: transparent;
+    border: none;
+    pointer-events: auto;
   }
 
   &.right-resize-handle {
-    cursor: ew-resize;
-    pointer-events: auto;
-    background-color: #0000;
-    border: none;
-    width: 12px;
-    height: auto;
     top: 0;
-    bottom: 0;
     right: -6px;
+    bottom: 0;
+    width: 12px;
+    height: auto;
+    cursor: ew-resize;
+    background-color: transparent;
+    border: none;
+    pointer-events: auto;
   }
 
   &.bottom-resize-handle {
-    cursor: ns-resize;
-    pointer-events: auto;
-    background-color: #0000;
-    border: none;
-    width: auto;
-    height: 12px;
     bottom: -6px;
     left: 0;
     right: 0;
+    height: 12px;
+    width: auto;
+    cursor: ns-resize;
+    background-color: transparent;
+    border: none;
+    pointer-events: auto;
   }
 
   &.left-resize-handle {
-    cursor: ew-resize;
-    pointer-events: auto;
-    background-color: #0000;
-    border: none;
-    width: 12px;
-    height: auto;
     top: 0;
-    bottom: 0;
     left: -6px;
+    bottom: 0;
+    width: 12px;
+    height: auto;
+    cursor: ew-resize;
+    background-color: transparent;
+    border: none;
+    pointer-events: auto;
   }
 }
 
-.resize-handle-edge:after {
+.resize-handle-edge::after {
+  position: absolute;
   content: "";
+  border-radius: 3px;
   border: 1px solid var(--primary-rect-color);
+  background: rgb(255, 255, 255);
   box-sizing: border-box;
-  background: #fff;
-  border-radius: 3px;
-  transition: height .2s ease-in-out;
-  position: absolute;
+  transition: height 0.2s ease-in-out;
 }
 
-.left-resize-handle-edge:after {
+.left-resize-handle-edge::after {
   width: 6px;
   height: 16px;
   top: calc(50% - 8px);
   left: calc(50% - 2px);
 }
 
-.right-resize-handle-edge:after {
+.right-resize-handle-edge::after {
   width: 6px;
   height: 16px;
   top: calc(50% - 8px);
   right: calc(50% - 2px);
 }
 
-.top-resize-handle-edge:after {
+.top-resize-handle-edge::after {
   width: 16px;
   height: 6px;
-  top: calc(50% - 2px);
   left: calc(50% - 8px);
+  top: calc(50% - 2px);
 }
 
-.bottom-resize-handle-edge:after {
+.bottom-resize-handle-edge::after {
   width: 16px;
   height: 6px;
-  bottom: calc(50% - 2px);
   left: calc(50% - 8px);
+  bottom: calc(50% - 2px);
 }
 
 .bp5-unstyled-popover > .bp5-popover-content {
-  background: none !important;
   padding: 0 !important;
+  background: none !important;
 }
 
 .sb-edit-interaction-rect-actions {
-  position-try-fallbacks: flip-block, --actions-below-header;
   position: absolute;
+  /* This will flip the name pill when anchored */
+  position-try-fallbacks: flip-block, --actions-below-header;
 }
 
 .sb-edit-selection-name-pill {
   max-width: 140px;
 }
 
-.sb-edit-selection-name-pill, .sb-edit-add-to-chat-button, .sb-edit-edit-component-button {
-  color: #fff;
+.sb-edit-selection-name-pill,
+.sb-edit-add-to-chat-button,
+.sb-edit-edit-component-button {
+  cursor: pointer !important;
+  display: block;
+  font-size: 11px;
+  color: white;
+  padding: 2px 4px;
   white-space: nowrap;
   background-color: var(--primary-rect-color);
+  border-radius: 3px;
+  overflow: hidden;
   text-overflow: ellipsis;
   z-index: var(--sb-edit-z-index-mid);
   border: none;
-  border-radius: 3px;
   outline: none;
-  padding: 2px 4px;
-  font-size: 11px;
-  display: block;
-  overflow: hidden;
-  cursor: pointer !important;
 
-  & * {
+  * {
     cursor: pointer !important;
   }
 
@@ -272,30 +294,36 @@
     box-shadow: 0px 3px 8px -1px var(--primary-rect-color);
   }
 
-  &:active, &:focus {
+  &:active,
+  &:focus {
     background-color: var(--primary-rect-color);
-    opacity: .8;
+    opacity: 0.8;
   }
 }
 
-.sb-edit-actions-target-mode .sb-edit-selection-name-pill:not([data-pill-type="SELECTED"]), .sb-edit-actions-target-mode .sb-edit-add-to-chat-button, .sb-edit-actions-target-mode .sb-edit-edit-component-button {
-  background-color: #643adf;
+.sb-edit-actions-target-mode
+  .sb-edit-selection-name-pill:not([data-pill-type="SELECTED"]),
+.sb-edit-actions-target-mode .sb-edit-add-to-chat-button,
+.sb-edit-actions-target-mode .sb-edit-edit-component-button {
+  background-color: rgba(100, 58, 223, 1);
 
   &:hover {
-    box-shadow: 0 3px 8px -1px #643adf;
+    box-shadow: 0px 3px 8px -1px rgba(100, 58, 223, 1);
   }
 
-  &:active, &:focus {
-    background-color: #4d32a0;
+  &:active,
+  &:focus {
+    background-color: rgb(77, 50, 160);
   }
 }
 
-.sb-edit-add-to-chat-button, .sb-edit-edit-component-button {
-  justify-content: center;
-  align-items: center;
+.sb-edit-add-to-chat-button,
+.sb-edit-edit-component-button {
   display: flex;
+  align-items: center;
+  justify-content: center;
 
-  & svg {
+  svg {
     width: 16px;
     height: 16px;
   }
@@ -307,31 +335,30 @@
 }
 
 .sb-reparent-rect {
+  position: absolute;
   border: 1px solid var(--primary-rect-color);
   pointer-events: none;
   z-index: var(--sb-edit-z-index-base);
-  animation: 2s infinite radial-gradient-animation;
-  position: absolute;
+  animation: radial-gradient-animation 2s infinite;
 }
 
 @keyframes radial-gradient-animation {
   0% {
-    box-shadow: inset 0 0 #0087e080;
+    box-shadow: inset 0 0 0 0 rgba(0, 135, 224, 0.5);
   }
-
   100% {
-    box-shadow: inset 0 0 20px 20px #0087e01a;
+    box-shadow: inset 0 0 20px 20px rgba(0, 135, 224, 0.1);
   }
 }
 
 .sb-edit-drop-placeholder {
+  position: absolute;
   pointer-events: none;
   z-index: var(--sb-edit-z-index-base);
-  position: absolute;
 
   &[data-is-active="true"] {
     border: 1px solid var(--primary-rect-color);
-    box-shadow: inset 0 0 0 3px #0087e029;
+    box-shadow: inset 0 0 0 3px rgba(0, 135, 224, 0.16);
   }
 
   &[data-is-valid-drop="false"] {
@@ -340,12 +367,12 @@
 }
 
 .sb-edit-drop-target-outline {
+  position: absolute;
   pointer-events: none;
   z-index: var(--sb-edit-z-index-base);
   border: 1px dashed var(--primary-rect-color);
   width: 100%;
   height: 100%;
-  position: absolute;
   top: 0;
   left: 0;
 
@@ -353,3 +380,6 @@
     border-color: #f45252;
   }
 }
+
+
+/*# sourceMappingURL=index.css.map*/

package/dist/lib/index.css.map

@@ -0,0 +1 @@
+{"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  --primary-rect-color: #0087e0;\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 var(--primary-rect-color);\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 var(--primary-rect-color);\n  pointer-events: none;\n  z-index: var(--sb-edit-z-index-base);\n\n  &.sb-edit-focus {\n    border: 1px solid var(--primary-rect-color);\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 var(--primary-rect-color);\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 var(--primary-rect-color);\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  max-width: 140px;\n}\n\n.sb-edit-selection-name-pill,\n.sb-edit-add-to-chat-button,\n.sb-edit-edit-component-button {\n  cursor: pointer !important;\n  display: block;\n  font-size: 11px;\n  color: white;\n  padding: 2px 4px;\n  white-space: nowrap;\n  background-color: var(--primary-rect-color);\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  * {\n    cursor: pointer !important;\n  }\n\n  &:hover {\n    box-shadow: 0px 3px 8px -1px var(--primary-rect-color);\n  }\n\n  &:active,\n  &:focus {\n    background-color: var(--primary-rect-color);\n    opacity: 0.8;\n  }\n}\n\n.sb-edit-actions-target-mode\n  .sb-edit-selection-name-pill:not([data-pill-type=\"SELECTED\"]),\n.sb-edit-actions-target-mode .sb-edit-add-to-chat-button,\n.sb-edit-actions-target-mode .sb-edit-edit-component-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.sb-edit-edit-component-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: 16px;\n    height: 16px;\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 var(--primary-rect-color);\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 var(--primary-rect-color);\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 var(--primary-rect-color);\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;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;;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;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"}

package/dist/lib/index.d.ts

@@ -5,7 +5,7 @@ import * as React$2 from "react";
 import React$1, { LegacyRef, ReactNode, createElement } from "react";
 import { OrchestratorViewMode, PlaceholderInfo, Profile } from "@superblocksteam/shared";
 import { AiContextMode, AppToEditorMessage, Catalog, CatalogWithInternalDetails, ComponentRegistryShareState, ConsoleLogEntry, CreateChild, CreateChild as CreateChild$1, CreateRequest, DeleteMeLibraryApi, DeleteRequest, EditOperationPayload, EditOperationType, EditOperations, EditorConfig as EditorConfig$1, Entity, EntityOutputProp, ExecutionTimingBreakdown, InitData, InteractionMode, PayloadAction, PropertyInfo, ReparentRequest, RuntimeErrorData, RuntimeSyncComposite, SbApiRunOptions, SbElement, SbSelector, SetPropertiesRequest, SetPropertyRequest, SourceLocation, TransactionInfo, UrlState, ViteMessage, ViteMessageKind, WithBindingIdentifier } from "@superblocksteam/library-shared/types";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CompiledApi, IntegrationDeclaration } from "@superblocksteam/sdk-api";
 import { Graph } from "@dagrejs/graphlib";
 import { XYCoord } from "react-dnd";
@@ -94,7 +94,7 @@ declare const SbProvider: ({
   children?: React$1.ReactNode;
   className?: string;
   context?: SuperblocksAppContext;
-}) => _$react_jsx_runtime0.JSX.Element;
+}) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/internal-details/lib/evaluator/entity-types.d.ts
 type SingleInputProp<T = EntityOutputProp, ARGS extends any[] = any[]> = T extends Callback ? Callback<ARGS> : T;
@@ -449,7 +449,8 @@ type ExecutionEventRequest = {
     placeHoldersInfo?: Record<string, PlaceholderInfo>;
   };
 };
-type Resolutions = Record<string, // name of the field: eg: "range", for the range field let's say the code is {{[1,2,3]}}
+type Resolutions = Record<string,
+// name of the field: eg: "range", for the range field let's say the code is {{[1,2,3]}}
 {
   value: any;
   bindings: any[];
@@ -515,9 +516,13 @@ interface SdkApiMetadata {
   isStreaming: boolean;
   /** Declared integrations for this API */
   integrations: Array<{
-    /** Key used in the API code to reference this integration */key: string; /** Plugin ID (e.g., "postgres", "slack") */
-    pluginId: string; /** Integration name (e.g., "Production Postgres") */
-    name: string; /** Integration ID (UUID) */
+    /** Key used in the API code to reference this integration */
+    key: string;
+    /** Plugin ID (e.g., "postgres", "slack") */
+    pluginId: string;
+    /** Integration name (e.g., "Production Postgres") */
+    name: string;
+    /** Integration ID (UUID) */
     id: string;
   }>;
   /** Entry point file path relative to app root (e.g. "server/apis/GetUsers/api.ts") */
@@ -607,9 +612,12 @@ type FromParentToChildMessageTypesMap = {
     agents: AgentInfo[];
     logContext: Record<string, unknown>;
     featureFlags?: Record<string, unknown>;
-    sessionRecordingKey?: string; /** Selected integration profile for API execution */
-    profile?: SdkProfileInfo; /** Current git branch name (editor mode only) */
-    branchName?: string; /** Deployed/preview commit ID (non-editor modes) */
+    sessionRecordingKey?: string;
+    /** Selected integration profile for API execution */
+    profile?: SdkProfileInfo;
+    /** Current git branch name (editor mode only) */
+    branchName?: string;
+    /** Deployed/preview commit ID (non-editor modes) */
     commitId?: string;
     /**
      * DP routing config mapping profile keys to DP URLs.
@@ -621,7 +629,9 @@ type FromParentToChildMessageTypesMap = {
   };
   "sb-editor-request-bootstrap": void;
   "sb-update-active-agents": {
-    /** Pre-filtered URLs for current profile (cloud org fallback) */agentUrls: string[]; /** All active on-premise agents for local profile filtering */
+    /** Pre-filtered URLs for current profile (cloud org fallback) */
+    agentUrls: string[];
+    /** All active on-premise agents for local profile filtering */
     agents: AgentInfo[];
     /**
      * DP routing config mapping profile keys to DP URLs.
@@ -1425,12 +1435,12 @@ type ManagedPropsList = Array<ManagedProp & {
  * Merges shared and variant properties for union types without creating intersections
  * Variant properties override shared properties with the same key
  */
-type MergeUnionVariant<SHARED extends Record<string, Prop<any, any>>, VARIANT extends Record<string, Prop<any, any>>> = Omit<SHARED, keyof VARIANT> & VARIANT;
+type MergeUnionVariant<SHARED$1 extends Record<string, Prop<any, any>>, VARIANT extends Record<string, Prop<any, any>>> = Omit<SHARED$1, keyof VARIANT> & VARIANT;
 /**
  * Converts a union type to an intersection type
  * Used to merge multiple section props into a single props type
  */
-type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends ((x: infer I extends U) => void) ? I : never;
+type UnionToIntersection<U$1> = (U$1 extends any ? (x: U$1) => void : never) extends ((x: infer I extends U$1) => void) ? I : never;
 /**
  * Controls how default values affect property optionality
  * - RequiredIfDefault: Properties with default values become required
@@ -1457,6 +1467,7 @@ type ExtractProps<T, DefaultsBehavior extends DefaultValueBehavior, IsEvaluated
 /**
  * Handles non Prop types, aka our default types and CSS props
  */
+
 type SectionPropertiesPanelConfig = {
   showHeader?: boolean;
   isDefaultOpen?: boolean;
@@ -1482,6 +1493,7 @@ type InternalProps<Definition extends PropertiesDefinition, FlattenedProps = Ent
  * - All properties are optional regardless of defaults
  * - Properties accept InputProp values (bindings/functions)
  */
+
 type PropertiesDefinition = Record<string, Section>;
 type SectionDefinition<T extends Record<string, Prop<any, any>>> = {
   props: T;
@@ -1491,7 +1503,8 @@ type SectionDefinition<T extends Record<string, Prop<any, any>>> = {
   subHeader?: string;
 };
 type SectionPropRecord<Props = Record<string, any>> = Partial<{ [K in keyof Props]: Prop<Props[K], any> }>;
-declare class Section<TProps = any, // Component props type for validation
+declare class Section<TProps = any,
+// Component props type for validation
 T extends SectionPropRecord<TProps> = SectionPropRecord<TProps>> {
   readonly category: PropsCategory;
   props: T;
@@ -1563,15 +1576,15 @@ declare class Prop<Type extends DataType, _HasDefault extends boolean = false, _
    * ```
    */
   static record<T extends CompositeInputs>(props: T): RecordProp<T>;
-  static union<SHARED extends Record<string, Prop<unknown, boolean>>, VARIANTS extends UnionVariant<SHARED>[] = UnionVariant<SHARED>[]>(props: {
-    shared: SHARED;
-    variants: VARIANTS;
-  }): UnionProp<SHARED, VARIANTS, VARIANTS extends readonly any[] ? { [I in keyof VARIANTS]: SHARED & VARIANTS[I] }[number] : never>;
+  static union<SHARED$1 extends Record<string, Prop<unknown, boolean>>, VARIANTS$1 extends UnionVariant<SHARED$1>[] = UnionVariant<SHARED$1>[]>(props: {
+    shared: SHARED$1;
+    variants: VARIANTS$1;
+  }): UnionProp<SHARED$1, VARIANTS$1, VARIANTS$1 extends readonly any[] ? { [I in keyof VARIANTS$1]: SHARED$1 & VARIANTS$1[I] }[number] : never>;
   default(de: SingleInputProp<DataType>): Prop<Type, true>;
   contextual<TContext extends any[] | undefined = any[]>(computedArgs?: EvaluateOrValueComputedArgs): Prop<Type, _HasDefault, TContext>;
   setName(name: string): this;
   propertiesPanel<CT extends ControlType>(schema: Omit<Partial<PropertiesPanelDisplay<Type, CT>>, "isTriggerProperty">): this;
-  setDisplayProperty<K extends keyof PropertiesPanelDisplay<Type>>(property: K, value: PropertiesPanelDisplay<Type>[K]): this;
+  setDisplayProperty<K$1 extends keyof PropertiesPanelDisplay<Type>>(property: K$1, value: PropertiesPanelDisplay<Type>[K$1]): this;
   docs(docs: Exclude<PropertyForData<DataType>["docs"], undefined>): this;
   build(): ManagedProp<Type>;
   toDefinition(props: Record<string, unknown>): WidgetPropertyDefinition<DataType> | undefined;
@@ -1629,13 +1642,13 @@ declare class FunctionProp<ARGS extends any[] = any[], RETURN = any> extends Pro
   actionPanel(panel?: ActionPanel): this;
   getActionPanel(): ActionPanel | undefined;
 }
-type UnionVariant<SHARED extends Record<string, Prop<any>>> = { [K in keyof SHARED]: Prop<any> };
-declare class UnionProp<SHARED extends Record<string, Prop<unknown, boolean>>, VARIANTS extends UnionVariant<SHARED>[] = UnionVariant<SHARED>[], _OUTPUT = (VARIANTS extends readonly any[] ? { [I in keyof VARIANTS]: SHARED & VARIANTS[I] }[number] : never)> extends Prop<any> {
+type UnionVariant<SHARED$1 extends Record<string, Prop<any>>> = { [K in keyof SHARED$1]: Prop<any> };
+declare class UnionProp<SHARED$1 extends Record<string, Prop<unknown, boolean>>, VARIANTS$1 extends UnionVariant<SHARED$1>[] = UnionVariant<SHARED$1>[], _OUTPUT = (VARIANTS$1 extends readonly any[] ? { [I in keyof VARIANTS$1]: SHARED$1 & VARIANTS$1[I] }[number] : never)> extends Prop<any> {
   typeString: "union";
-  shared: SHARED;
-  variants: VARIANTS;
-  constructor(shared: SHARED, variants: VARIANTS);
-  getProps(): SHARED & Record<string, Prop<any, false, undefined>>;
+  shared: SHARED$1;
+  variants: VARIANTS$1;
+  constructor(shared: SHARED$1, variants: VARIANTS$1);
+  getProps(): SHARED$1 & Record<string, Prop<any, false, undefined>>;
 }
 //#endregion
 //#region src/lib/user-facing/components/app/props.d.ts
@@ -1659,7 +1672,7 @@ declare const App: (({
   context
 }: InternalProps<typeof propertiesDefinition> & {
   context?: SuperblocksAppContext;
-}) => _$react_jsx_runtime0.JSX.Element) & {
+}) => react_jsx_runtime0.JSX.Element) & {
   displayName: string;
 };
 //#endregion
@@ -1717,10 +1730,10 @@ declare const PageNotFound: ({
   buttonText?: string;
   onButtonClick?: () => void;
   hideActions?: boolean;
-}) => _$react_jsx_runtime0.JSX.Element;
+}) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/internal-details/internal-components/route-load-error.d.ts
-declare function RouteLoadError(): _$react_jsx_runtime0.JSX.Element;
+declare function RouteLoadError(): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/internal-details/use-api.d.ts
 declare global {
@@ -1746,6 +1759,7 @@ type ApiInterfaces<Name extends string> = Name extends keyof SuperblocksAPIRegis
  * When SDK APIs are enabled, paths point to `/server/apis/<name>/api.ts`.
  * When using legacy YAML mode, paths point to `/apis/<name>/api.yaml`.
  */
+
 /** Helper type to extract input type from a CompiledApi */
 type ApiInput<T> = T extends CompiledApi<infer TInput, any> ? TInput : never;
 /** Helper type to extract output type from a CompiledApi */