agentic-ui-libs 1.1.0-beta.8 → 1.2.0-beta.1

package/dist/assets/agentic-ui-libs.css

@@ -9167,6 +9167,9 @@ body {
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .collapse {
   visibility: collapse;
 }
@@ -9188,18 +9191,21 @@ body {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-4 {
+  bottom: 16px;
+}
 .bottom-full {
   bottom: 100%;
 }
 .left-0 {
   left: 0px;
 }
-.left-1 {
-  left: 4px;
-}
 .left-1\/2 {
   left: 50%;
 }
+.left-2 {
+  left: 8px;
+}
 .left-4 {
   left: 16px;
 }
@@ -9233,9 +9239,6 @@ body {
 .top-1\/2 {
   top: 50%;
 }
-.top-2 {
-  top: 8px;
-}
 .top-4 {
   top: 16px;
 }
@@ -9302,6 +9305,10 @@ body {
   margin-left: 8px;
   margin-right: 8px;
 }
+.mx-4 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
 .mx-\[24px\] {
   margin-left: 24px;
   margin-right: 24px;
@@ -9366,15 +9373,15 @@ body {
 .ml-0 {
   margin-left: 0px;
 }
-.ml-0\.5 {
-  margin-left: 2px;
-}
 .ml-1 {
   margin-left: 4px;
 }
 .ml-14 {
   margin-left: 56px;
 }
+.ml-16 {
+  margin-left: 64px;
+}
 .ml-2 {
   margin-left: 8px;
 }
@@ -9411,6 +9418,9 @@ body {
 .mt-1 {
   margin-top: 4px;
 }
+.mt-1\.5 {
+  margin-top: 6px;
+}
 .mt-2 {
   margin-top: 8px;
 }
@@ -9511,6 +9521,9 @@ body {
 .h-2 {
   height: 8px;
 }
+.h-2\.5 {
+  height: 10px;
+}
 .h-24 {
   height: 96px;
 }
@@ -9556,18 +9569,12 @@ body {
 .h-\[16px\] {
   height: 16px;
 }
-.h-\[18px\] {
-  height: 18px;
-}
 .h-\[1px\] {
   height: 1px;
 }
 .h-\[20px\] {
   height: 20px;
 }
-.h-\[22px\] {
-  height: 22px;
-}
 .h-\[24px\] {
   height: 24px;
 }
@@ -9694,6 +9701,9 @@ body {
 .w-12 {
   width: 48px;
 }
+.w-16 {
+  width: 64px;
+}
 .w-2 {
   width: 8px;
 }
@@ -9775,9 +9785,6 @@ body {
 .w-\[180px\] {
   width: 180px;
 }
-.w-\[18px\] {
-  width: 18px;
-}
 .w-\[190px\] {
   width: 190px;
 }
@@ -9796,8 +9803,11 @@ body {
 .w-\[220px\] {
   width: 220px;
 }
-.w-\[22px\] {
-  width: 22px;
+.w-\[232px\] {
+  width: 232px;
+}
+.w-\[242px\] {
+  width: 242px;
 }
 .w-\[24px\] {
   width: 24px;
@@ -9808,6 +9818,9 @@ body {
 .w-\[256px\] {
   width: 256px;
 }
+.w-\[265px\] {
+  width: 265px;
+}
 .w-\[280px\] {
   width: 280px;
 }
@@ -9987,6 +10000,10 @@ body {
 .shrink-0 {
   flex-shrink: 0;
 }
+.-translate-x-1 {
+  --tw-translate-x: -4px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -10053,6 +10070,22 @@ body {
 .animate-\[ai-popup-scale-in_0\.3s_cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
   animation: ai-popup-scale-in 0.3s cubic-bezier(0.4,0,0.2,1);
 }
+.animate-\[fadeInUp_0\.2s_ease-out\] {
+  animation: fadeInUp 0.2s ease-out;
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -10086,6 +10119,9 @@ body {
 .cursor-grab {
   cursor: grab;
 }
+.cursor-grabbing {
+  cursor: grabbing;
+}
 .cursor-help {
   cursor: help;
 }
@@ -10127,6 +10163,9 @@ body {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
 .items-start {
   align-items: flex-start;
 }
@@ -10255,6 +10294,9 @@ body {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -10365,6 +10407,9 @@ body {
 .border-2 {
   border-width: 2px;
 }
+.border-4 {
+  border-width: 4px;
+}
 .border-\[1\.5px\] {
   border-width: 1.5px;
 }
@@ -10384,6 +10429,9 @@ body {
 .border-l {
   border-left-width: 1px;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
 .border-l-\[3px\] {
   border-left-width: 3px;
 }
@@ -10417,10 +10465,22 @@ body {
 .\!border-blue-600 {
   border-color: var(--colors-blue-600, #1570EF) !important;
 }
+.border-\[\#004EEB\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 78 235 / var(--tw-border-opacity, 1));
+}
 .border-\[\#155EEF\] {
   --tw-border-opacity: 1;
   border-color: rgb(21 94 239 / var(--tw-border-opacity, 1));
 }
+.border-\[\#6A11CB\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(106 17 203 / var(--tw-border-opacity, 1));
+}
+.border-\[\#84ADFF\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(132 173 255 / var(--tw-border-opacity, 1));
+}
 .border-\[\#D0D5DD\] {
   --tw-border-opacity: 1;
   border-color: rgb(208 213 221 / var(--tw-border-opacity, 1));
@@ -10441,6 +10501,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(240 68 56 / var(--tw-border-opacity, 1));
 }
+.border-\[\#FECDCA\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 205 202 / var(--tw-border-opacity, 1));
+}
 .border-\[\#d0d5dd\] {
   --tw-border-opacity: 1;
   border-color: rgb(208 213 221 / var(--tw-border-opacity, 1));
@@ -10453,6 +10517,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
 }
+.border-amber-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
+}
 .border-black\/5 {
   border-color: rgb(0 0 0 / 0.05);
 }
@@ -10523,6 +10591,10 @@ body {
 .border-r-gray-900 {
   border-right-color: var(--colors-gray-light-mode-900, #101828);
 }
+.border-r-slate-800 {
+  --tw-border-opacity: 1;
+  border-right-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
+}
 .border-t-gray-600 {
   border-top-color: var(--colors-gray-light-mode-600, #475467);
 }
@@ -10532,6 +10604,10 @@ body {
 .\!bg-blue-500 {
   background-color: var(--colors-blue-500, #2E90FA) !important;
 }
+.bg-\[\#004EEB\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 78 235 / var(--tw-bg-opacity, 1));
+}
 .bg-\[\#155EEF\] {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 239 / var(--tw-bg-opacity, 1));
@@ -10540,10 +10616,22 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(29 41 57 / var(--tw-bg-opacity, 1));
 }
+.bg-\[\#2970FF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(41 112 255 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#344054\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 64 84 / var(--tw-bg-opacity, 1));
+}
 .bg-\[\#B2DDFF\] {
   --tw-bg-opacity: 1;
   background-color: rgb(178 221 255 / var(--tw-bg-opacity, 1));
 }
+.bg-\[\#D0D5DD\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 213 221 / var(--tw-bg-opacity, 1));
+}
 .bg-\[\#D1FADF\] {
   --tw-bg-opacity: 1;
   background-color: rgb(209 250 223 / var(--tw-bg-opacity, 1));
@@ -10606,6 +10694,10 @@ body {
 .bg-amber-500\/20 {
   background-color: rgb(245 158 11 / 0.2);
 }
+.bg-amber-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
+}
 .bg-background {
   background-color: var(--colors-background-bg-primary, #FFFFFF);
 }
@@ -10731,6 +10823,10 @@ body {
 .bg-red-900\/30 {
   background-color: rgb(127 29 29 / 0.3);
 }
+.bg-slate-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
 .bg-slate-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
@@ -10793,6 +10889,11 @@ body {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.from-\[\#EAECF0\] {
+  --tw-gradient-from: #EAECF0 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(234 236 240 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-blue-500 {
   --tw-gradient-from: var(--colors-blue-500, #2E90FA) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
@@ -10898,6 +10999,9 @@ body {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 2px;
+}
 .p-1 {
   padding: 4px;
 }
@@ -11084,10 +11188,6 @@ body {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.py-px {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
 .pb-1 {
   padding-bottom: 4px;
 }
@@ -11115,6 +11215,9 @@ body {
 .pl-4 {
   padding-left: 16px;
 }
+.pl-6 {
+  padding-left: 24px;
+}
 .pl-\[16px\] {
   padding-left: 16px;
 }
@@ -11127,12 +11230,15 @@ body {
 .pl-\[8px\] {
   padding-left: 8px;
 }
-.pr-12 {
-  padding-right: 48px;
+.pr-2 {
+  padding-right: 8px;
 }
 .pr-3 {
   padding-right: 12px;
 }
+.pr-6 {
+  padding-right: 24px;
+}
 .pr-\[12px\] {
   padding-right: 12px;
 }
@@ -11366,6 +11472,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(212 68 241 / var(--tw-text-opacity, 1));
 }
+.text-\[\#F79009\] {
+  --tw-text-opacity: 1;
+  color: rgb(247 144 9 / var(--tw-text-opacity, 1));
+}
 .text-amber-400 {
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
@@ -11574,11 +11684,21 @@ body {
   --tw-shadow-colored: 0 24px 48px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0px_1px_3px_0px_rgba\(16\2c 24\2c 40\2c 0\.08\)\2c 0px_1px_2px_0px_rgba\(16\2c 24\2c 40\2c 0\.08\)\] {
+  --tw-shadow: 0px 1px 3px 0px rgba(16,24,40,0.08),0px 1px 2px 0px rgba(16,24,40,0.08);
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-\[0px_20px_24px_-4px_rgba\(16\2c 24\2c 40\2c 0\.08\)\2c 0px_8px_8px_-4px_rgba\(16\2c 24\2c 40\2c 0\.03\)\] {
   --tw-shadow: 0px 20px 24px -4px rgba(16,24,40,0.08),0px 8px 8px -4px rgba(16,24,40,0.03);
   --tw-shadow-colored: 0px 20px 24px -4px var(--tw-shadow-color), 0px 8px 8px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0px_4px_8px_-2px_rgba\(16\2c 24\2c 40\2c 0\.08\)\2c 0px_2px_4px_-2px_rgba\(16\2c 24\2c 40\2c 0\.08\)\] {
+  --tw-shadow: 0px 4px 8px -2px rgba(16,24,40,0.08),0px 2px 4px -2px rgba(16,24,40,0.08);
+  --tw-shadow-colored: 0px 4px 8px -2px var(--tw-shadow-color), 0px 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg {
   --tw-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
   --tw-shadow-colored: 0px 12px 16px -4px var(--tw-shadow-color);
@@ -11638,8 +11758,8 @@ body {
   --tw-backdrop-blur: blur(4px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
-.transition-\[flex\] {
-  transition-property: flex;
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -11680,12 +11800,6 @@ body {
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-\[250ms\] {
-  transition-duration: 250ms;
-}
-.ease-\[cubic-bezier\(0\.4\2c 0\2c 0\.2\2c 1\)\] {
-  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
-}
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -11715,6 +11829,7 @@ body {
 /* Common utility classes from kore-kit */
 .cursor-pointer { cursor: pointer; }
 .flex-shrink-0 { flex-shrink: 0 !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
 .pointer-events-auto { pointer-events: auto !important; }
 .pointer-events-none { pointer-events: none !important; }
 /* Border utilities matching kore-kit pattern - full shorthand for Angular/Bootstrap compatibility */
@@ -11802,6 +11917,14 @@ body {
 .tracing-table-with-pagination .tracing-table-grid .ag-pinned-left-cols-container {
   border-right: 1px solid var(--colors-border-border-primary, #D0D5DD);
 }
+.placeholder\:text-\[\#98A2B3\]::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(152 162 179 / var(--tw-text-opacity, 1));
+}
+.placeholder\:text-\[\#98A2B3\]::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(152 162 179 / var(--tw-text-opacity, 1));
+}
 .placeholder\:text-gray-400::-moz-placeholder {
   color: var(--colors-gray-light-mode-400, #98A2B3);
 }
@@ -11845,17 +11968,30 @@ body {
 .hover\:border-error-600:hover {
   border-color: var(--colors-error-600, #D92D20);
 }
-.hover\:border-gray-300:hover {
-  border-color: var(--colors-gray-light-mode-300, #D0D5DD);
-}
 .hover\:bg-\[\#1249C4\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(18 73 196 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-\[\#EFF4FF\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 244 255 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-\[\#F2F4F7\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-\[\#FEF3F2\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-amber-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-amber-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-black\/10:hover {
   background-color: rgb(0 0 0 / 0.1);
 }
@@ -11865,12 +12001,6 @@ body {
 .hover\:bg-black\/\[0\.02\]:hover {
   background-color: rgb(0 0 0 / 0.02);
 }
-.hover\:bg-black\/\[0\.03\]:hover {
-  background-color: rgb(0 0 0 / 0.03);
-}
-.hover\:bg-black\/\[0\.08\]:hover {
-  background-color: rgb(0 0 0 / 0.08);
-}
 .hover\:bg-blue-100:hover {
   background-color: var(--colors-blue-100, #D1E9FF);
 }
@@ -11959,10 +12089,22 @@ body {
 .hover\:font-medium:hover {
   font-weight: 500;
 }
+.hover\:text-\[\#1849A9\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(24 73 169 / var(--tw-text-opacity, 1));
+}
 .hover\:text-\[\#344054\]:hover {
   --tw-text-opacity: 1;
   color: rgb(52 64 84 / var(--tw-text-opacity, 1));
 }
+.hover\:text-\[\#667085\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(102 112 133 / var(--tw-text-opacity, 1));
+}
+.hover\:text-\[\#F04438\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(240 68 56 / var(--tw-text-opacity, 1));
+}
 .hover\:text-blue-300:hover {
   color: var(--colors-blue-300, #84CAFF);
 }
@@ -12023,11 +12165,6 @@ body {
   --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color), 0 0 0 4px var(--tw-shadow-color) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
-.hover\:shadow:hover {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-lg:hover {
   --tw-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
   --tw-shadow-colored: 0px 12px 16px -4px var(--tw-shadow-color);
@@ -12122,6 +12259,9 @@ body {
   opacity: 0.5;
 }
 .disabled\:pointer-events-none:disabled { pointer-events: none !important; }
+.group:hover .group-hover\:visible {
+  visibility: visible;
+}
 .group:hover .group-hover\:text-slate-200 {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity, 1));
@@ -12133,6 +12273,12 @@ body {
   opacity: 1;
 }
 @media (min-width: 640px) {
+  .sm\:inline {
+    display: inline;
+  }
+  .sm\:hidden {
+    display: none;
+  }
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -12155,9 +12301,6 @@ body {
   }
 }
 @media (prefers-color-scheme: dark) {
-  .dark\:border-gray-700 {
-    border-color: var(--colors-gray-light-mode-700, #344054);
-  }
   .dark\:bg-gray-900 {
     background-color: var(--colors-gray-light-mode-900, #101828);
   }
@@ -12173,26 +12316,20 @@ body {
   .dark\:to-gray-700 {
     --tw-gradient-to: var(--colors-gray-light-mode-700, #344054) var(--tw-gradient-to-position);
   }
+  .dark\:text-blue-400 {
+    color: var(--colors-blue-400, #53B1FD);
+  }
   .dark\:text-gray-100 {
     color: var(--colors-gray-light-mode-100, #F2F4F7);
   }
-  .dark\:text-gray-400 {
-    color: var(--colors-gray-light-mode-400, #98A2B3);
-  }
   .dark\:placeholder\:text-gray-600::-moz-placeholder {
     color: var(--colors-gray-light-mode-600, #475467);
   }
   .dark\:placeholder\:text-gray-600::placeholder {
     color: var(--colors-gray-light-mode-600, #475467);
   }
-  .dark\:hover\:border-gray-600:hover {
-    border-color: var(--colors-gray-light-mode-600, #475467);
-  }
-  .dark\:hover\:bg-gray-700:hover {
-    background-color: var(--colors-gray-light-mode-700, #344054);
-  }
-  .dark\:hover\:text-gray-100:hover {
-    color: var(--colors-gray-light-mode-100, #F2F4F7);
+  .dark\:hover\:text-blue-300:hover {
+    color: var(--colors-blue-300, #84CAFF);
   }
 }
 .json-view {
@@ -12345,21 +12482,199 @@ body {
 }
 /* K-MD-Editor Styles - Minimal CSS (Tailwind handles most styling) */
 
+/* ============================================================================
+   Tippy.js Base CSS - Required for popup rendering
+   Note: tippy.js/dist/tippy.css is not imported as a dependency to avoid 
+   bundle conflicts. These are the essential styles needed.
+   ============================================================================ */
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+  opacity: 0;
+}
+
+[data-tippy-root] {
+  max-width: calc(100vw - 10px);
+}
+
+.tippy-box {
+  position: relative;
+  background-color: transparent;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: normal;
+  outline: 0;
+  transition-property: transform, visibility, opacity;
+}
+
+.tippy-content {
+  position: relative;
+  padding: 0;
+  z-index: 1;
+}
+
+/* Remove default arrow - we don't use it for menus */
+.tippy-arrow {
+  display: none;
+}
+
 /* ============================================================================
    Tippy.js / BubbleMenu Overrides (Required for popup positioning)
    ============================================================================ */
 
 [data-tippy-root] {
   z-index: 99999 !important;
+  pointer-events: auto !important;
 }
 
 .tippy-box {
   pointer-events: auto !important;
   z-index: 99999 !important;
+  background-color: transparent !important;
+  max-width: none !important;
 }
 
 .tippy-content {
   pointer-events: auto !important;
+  padding: 0 !important;
+}
+
+/* Ensure tippy menu items are interactive */
+.tippy-box * {
+  pointer-events: auto !important;
+}
+
+/* ============================================================================
+   SlashMenu / MentionMenu Styles (for tippy popups)
+   These menus are appended to the editor container (.k-md-editor) for proper
+   CSS scoping when this library is used in other applications.
+   ============================================================================ */
+
+/* Ensure tippy popups inside editor have proper z-index */
+.k-md-editor .tippy-box {
+  z-index: 50;
+}
+
+.k-md-editor [data-tippy-root] {
+  z-index: 50;
+}
+
+.k-md-editor-slash-menu {
+  background: #ffffff;
+  border: 1px solid #eaecf0;
+  border-radius: 12px;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  overflow: hidden;
+  min-width: 240px;
+  max-width: 400px;
+  max-height: 400px;
+}
+
+.k-md-editor-slash-menu__header {
+  padding: 8px 12px;
+  border-bottom: 1px solid #eaecf0;
+}
+
+.k-md-editor-slash-menu__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #f9fafb;
+  border: 1px solid #eaecf0;
+  border-radius: 8px;
+}
+
+.k-md-editor-slash-menu__search input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  color: #101828;
+}
+
+.k-md-editor-slash-menu__search input::-moz-placeholder {
+  color: #98a2b3;
+}
+
+.k-md-editor-slash-menu__search input::placeholder {
+  color: #98a2b3;
+}
+
+.k-md-editor-slash-menu__content {
+  overflow-y: auto;
+  max-height: 320px;
+  padding: 4px;
+}
+
+.k-md-editor-slash-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.1s;
+}
+
+.k-md-editor-slash-menu__item:hover,
+.k-md-editor-slash-menu__item--selected {
+  background-color: #f2f4f7;
+}
+
+.k-md-editor-slash-menu__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: #f2f4f7;
+  border-radius: 6px;
+  color: #667085;
+  flex-shrink: 0;
+}
+
+.k-md-editor-slash-menu__item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.k-md-editor-slash-menu__item-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #101828;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k-md-editor-slash-menu__item-description {
+  font-size: 11px;
+  color: #667085;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k-md-editor-slash-menu__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  color: #667085;
+  font-size: 13px;
+}
+
+.k-md-editor-slash-menu__empty {
+  padding: 24px;
+  text-align: center;
+  color: #667085;
+  font-size: 13px;
 }
 
 /* ============================================================================
@@ -12367,15 +12682,20 @@ body {
    ============================================================================ */
 
 .k-md-editor {
+  /* Figma design tokens */
   --k-md-editor-bg: #ffffff;
-  --k-md-editor-text: #1f2937;
-  --k-md-editor-text-muted: #6b7280;
-  --k-md-editor-border: #e5e7eb;
-  --k-md-editor-border-focus: #3b82f6;
-  --k-md-editor-selection: #dbeafe;
-  --k-md-editor-code-bg: #f3f4f6;
-  --k-md-editor-link: #2563eb;
-  --k-md-editor-placeholder: #9ca3af;
+  --k-md-editor-text: #101828;
+  --k-md-editor-text-muted: #667085;
+  --k-md-editor-text-placeholder: #98A2B3;
+  --k-md-editor-border: #d0d5dd;
+  --k-md-editor-border-secondary: #EAECF0;
+  --k-md-editor-border-focus: #155EEF;
+  --k-md-editor-selection: #EFF4FF;
+  --k-md-editor-code-bg: #f2f4f7;
+  --k-md-editor-link: #004EEB;
+  --k-md-editor-placeholder: #98A2B3;
+  --k-md-editor-brand-primary: #155EEF;
+  --k-md-editor-brand-secondary: #004EEB;
 
   position: relative;
   width: 100%;
@@ -12995,6 +13315,134 @@ body {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
+/* ============================================================================
+   AI Design Panel Styles
+   ============================================================================ */
+
+/* Animation for panel slide in */
+@keyframes slideInFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+[data-id="md-editor-ai-design-panel"] {
+  animation: slideInFromRight 0.25s ease-out;
+}
+
+/* ============================================================================
+   Bottom Toolbar Styles
+   ============================================================================ */
+
+/* Animation for AI dropdown fadeIn */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================================================
+   Preview Mode Styles
+   ============================================================================ */
+
+.k-md-editor__preview {
+  padding: 16px 20px;
+  min-height: 100%;
+}
+
+.k-md-editor__preview h1 {
+  font-size: 1.875rem;
+  font-weight: 600;
+  margin: 1.5em 0 0.5em;
+  line-height: 1.3;
+}
+
+.k-md-editor__preview h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.5em 0 0.5em;
+  line-height: 1.3;
+}
+
+.k-md-editor__preview h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1.5em 0 0.5em;
+  line-height: 1.3;
+}
+
+.k-md-editor__preview p {
+  margin: 0 0 0.75em;
+}
+
+.k-md-editor__preview ul,
+.k-md-editor__preview ol {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.k-md-editor__preview code {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.9em;
+  background-color: var(--k-md-editor-code-bg);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+}
+
+.k-md-editor__preview pre {
+  background-color: var(--k-md-editor-code-bg);
+  padding: 12px 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.k-md-editor__preview blockquote {
+  border-left: 3px solid var(--k-md-editor-border);
+  margin: 0.75em 0;
+  padding-left: 1em;
+  color: var(--k-md-editor-text-muted);
+}
+
+.k-md-editor__preview a {
+  color: var(--k-md-editor-link);
+  text-decoration: none;
+}
+
+.k-md-editor__preview a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================================================
+   Variable Chip Simplified Styles
+   ============================================================================ */
+
+.k-md-editor-variable-chip {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.k-md-editor-variable-chip__text {
+  display: inline;
+}
+
+/* ============================================================================
+   Block Actions (Delete button on right)
+   ============================================================================ */
+
+.k-md-editor-block-actions {
+  margin-right: 8px;
+}
+
 /* ============================================================================
    Print Styles
    ============================================================================ */
@@ -13005,7 +13453,9 @@ body {
     color: black;
   }
 
-  .k-md-editor-drag-handle-container {
+  .k-md-editor-drag-handle-container,
+  .k-md-editor-block-actions,
+  [data-id="md-editor-bottom-toolbar"] {
     display: none;
   }
 }