@mastra/playground-ui 45.0.0 → 45.1.0-alpha.1

package/dist/style.css

@@ -221,6 +221,7 @@
     --spacing-40: 10rem;
     --spacing-44: 11rem;
     --spacing-48: 12rem;
+    --spacing-52: 13rem;
     --spacing-56: 14rem;
     --spacing-60: 15rem;
     --spacing-64: 16rem;
@@ -784,6 +785,10 @@
     bottom: var(--spacing-0);
   }
 
+  .bottom-\[calc\(100\%\+0\.5rem\)\] {
+    bottom: calc(100% + .5rem);
+  }
+
   .-left-2 {
     left: calc(var(--spacing-2) * -1);
   }
@@ -950,6 +955,10 @@
     }
   }
 
+  .-m-1 {
+    margin: calc(var(--spacing-1) * -1);
+  }
+
   .m-0 {
     margin: var(--spacing-0);
   }
@@ -1600,6 +1609,10 @@
     height: var(--height-dropdown-max-height);
   }
 
+  .h-dvh {
+    height: 100dvh;
+  }
+
   .h-form-default {
     height: var(--spacing-form-default);
   }
@@ -1697,6 +1710,10 @@
     max-height: inherit;
   }
 
+  .max-h-\[min\(14rem\,32dvh\)\] {
+    max-height: min(14rem, 32dvh);
+  }
+
   .max-h-\[min\(20rem\,var\(--available-height\)\)\] {
     max-height: min(20rem, var(--available-height));
   }
@@ -1713,6 +1730,10 @@
     max-height: 100%;
   }
 
+  .max-h-none {
+    max-height: none;
+  }
+
   .min-h-0 {
     min-height: var(--spacing-0);
   }
@@ -1761,6 +1782,10 @@
     min-height: var(--spacing-72);
   }
 
+  .min-h-dvh {
+    min-height: 100dvh;
+  }
+
   .min-h-form-md {
     min-height: var(--spacing-form-md);
   }
@@ -2070,6 +2095,10 @@
     max-width: var(--available-width);
   }
 
+  .max-w-\(--chat-column\) {
+    max-width: var(--chat-column);
+  }
+
   .max-w-\(--sidebar-width-mobile\) {
     max-width: var(--sidebar-width-mobile);
   }
@@ -2082,6 +2111,10 @@
     max-width: var(--container-3xl);
   }
 
+  .max-w-4 {
+    max-width: var(--spacing-4);
+  }
+
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
@@ -2098,6 +2131,10 @@
     max-width: var(--spacing-44);
   }
 
+  .max-w-52 {
+    max-width: var(--spacing-52);
+  }
+
   .max-w-60 {
     max-width: var(--spacing-60);
   }
@@ -2142,6 +2179,10 @@
     max-width: calc(100vw - 2rem);
   }
 
+  .max-w-\[min\(56rem\,calc\(100vw-2rem\)\)\] {
+    max-width: min(56rem, 100vw - 2rem);
+  }
+
   .max-w-dropdown-max-height {
     max-width: var(--container-dropdown-max-height);
   }
@@ -2182,10 +2223,22 @@
     min-width: var(--spacing-0);
   }
 
+  .min-w-4 {
+    min-width: var(--spacing-4);
+  }
+
+  .min-w-5 {
+    min-width: var(--spacing-5);
+  }
+
   .min-w-6 {
     min-width: var(--spacing-6);
   }
 
+  .min-w-7 {
+    min-width: var(--spacing-7);
+  }
+
   .min-w-32 {
     min-width: var(--spacing-32);
   }
@@ -2254,6 +2307,10 @@
     flex-grow: 1;
   }
 
+  .basis-4 {
+    flex-basis: var(--spacing-4);
+  }
+
   .border-collapse {
     border-collapse: collapse;
   }
@@ -2288,6 +2345,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-x-0 {
+    --tw-translate-x: var(--spacing-0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .translate-x-1 {
     --tw-translate-x: var(--spacing-1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3420,6 +3482,14 @@
     border-left-color: #0000;
   }
 
+  .bg-\(--chat-surface\) {
+    background-color: var(--chat-surface);
+  }
+
+  .bg-\(--chat-veil\) {
+    background-color: var(--chat-veil);
+  }
+
   .bg-\[var\(--data-list-sticky-header-background\)\] {
     background-color: var(--data-list-sticky-header-background);
   }
@@ -4008,6 +4078,26 @@
     }
   }
 
+  .bg-surface4\/60 {
+    background-color: var(--color-surface4);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface4\/60 {
+      background-color: color-mix(in oklab, var(--color-surface4) 60%, transparent);
+    }
+  }
+
+  .bg-surface4\/70 {
+    background-color: var(--color-surface4);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface4\/70 {
+      background-color: color-mix(in oklab, var(--color-surface4) 70%, transparent);
+    }
+  }
+
   .bg-surface5, .bg-surface5\/80 {
     background-color: var(--color-surface5);
   }
@@ -4342,6 +4432,10 @@
     padding-block: 3px;
   }
 
+  .pe-\(--chat-inset-end\) {
+    padding-inline-end: var(--chat-inset-end);
+  }
+
   .pt-0 {
     padding-top: var(--spacing-0);
   }
@@ -4374,6 +4468,10 @@
     padding-top: var(--spacing-4);
   }
 
+  .pt-5 {
+    padding-top: var(--spacing-5);
+  }
+
   .pt-6 {
     padding-top: var(--spacing-6);
   }
@@ -4442,6 +4540,10 @@
     padding-right: var(--spacing-12);
   }
 
+  .pb-\(--chat-gutter\) {
+    padding-bottom: var(--chat-gutter);
+  }
+
   .pb-0 {
     padding-bottom: var(--spacing-0);
   }
@@ -5186,6 +5288,21 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-\[0_1px_2px_-1px_oklch\(0\%_0_0deg\/10\%\)\,0_8px_20px_-12px_oklch\(0\%_0_0deg\/25\%\)\] {
+    --tw-shadow: 0 1px 2px -1px var(--tw-shadow-color, oklch(0% 0 0 / .1)), 0 8px 20px -12px var(--tw-shadow-color, oklch(0% 0 0 / .25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_8px_24px_-20px_rgb\(0_0_0_\/_0\.55\)\] {
+    --tw-shadow: 0 8px 24px -20px var(--tw-shadow-color, #0000008c);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_10px_28px_-22px_rgb\(0_0_0_\/_0\.6\)\] {
+    --tw-shadow: 0 10px 28px -22px var(--tw-shadow-color, #0009);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-card {
     --tw-shadow: 0 2px 8px var(--tw-shadow-color, oklch(0% 0 0 / .4));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5377,6 +5494,18 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[background-color\,border-color\,color\,transform\] {
+    transition-property: background-color, border-color, color, transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[background-color\,border-color\] {
+    transition-property: background-color, border-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[background-color\,scale\] {
     transition-property: background-color, scale;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5449,6 +5578,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[padding\] {
+    transition-property: padding;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[stroke-dashoffset\,transform\] {
     transition-property: stroke-dashoffset, transform;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5605,6 +5740,36 @@
     user-select: none;
   }
 
+  .\[--chat-column\:44rem\] {
+    --chat-column: 44rem;
+  }
+
+  .\[--chat-column\:48rem\] {
+    --chat-column: 48rem;
+  }
+
+  .\[--chat-gutter\:0\.75rem\] {
+    --chat-gutter: .75rem;
+  }
+
+  .\[--chat-inset-end\:0px\] {
+    --chat-inset-end: 0px;
+  }
+
+  .\[--chat-surface\:var\(--color-surface2\)\] {
+    --chat-surface: var(--color-surface2);
+  }
+
+  .\[--chat-veil\:color-mix\(in_oklab\,var\(--chat-surface\)_70\%\,transparent\)\] {
+    --chat-veil: var(--chat-surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--chat-veil\:color-mix\(in_oklab\,var\(--chat-surface\)_70\%\,transparent\)\] {
+      --chat-veil: color-mix(in oklab,var(--chat-surface) 70%,transparent);
+    }
+  }
+
   .\[--studio-frame-inset\:0\.5rem\] {
     --studio-frame-inset: .5rem;
   }
@@ -5834,6 +5999,10 @@
     display: flex;
   }
 
+  .group-data-\[selected\=true\]\:text-neutral6:is(:where(.group)[data-selected="true"] *) {
+    color: var(--color-neutral6);
+  }
+
   .group-data-\[separator\=\'active\'\]\/separator\:h-12:is(:where(.group\/separator)[data-separator="active"] *) {
     height: var(--spacing-12);
   }
@@ -6391,6 +6560,10 @@
       scale: 1.02;
     }
 
+    .hover\:border-border1:hover {
+      border-color: var(--color-border1);
+    }
+
     .hover\:border-border2:hover {
       border-color: var(--color-border2);
     }
@@ -6833,6 +7006,10 @@
     scale: .98;
   }
 
+  .active\:scale-\[0\.99\]:active {
+    scale: .99;
+  }
+
   .active\:cursor-grabbing:active {
     cursor: grabbing;
   }
@@ -7175,6 +7352,18 @@
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
+  .data-\[active\=true\]\:border-border1[data-active="true"] {
+    border-color: var(--color-border1);
+  }
+
+  .data-\[active\=true\]\:bg-surface4[data-active="true"] {
+    background-color: var(--color-surface4);
+  }
+
+  .data-\[active\=true\]\:text-neutral6[data-active="true"] {
+    color: var(--color-neutral6);
+  }
+
   .data-\[active\=true\]\:opacity-100[data-active="true"] {
     opacity: 1;
   }
@@ -7733,10 +7922,20 @@
     color: var(--color-neutral6);
   }
 
-  .data-\[selected\=true\]\:bg-surface4[data-selected="true"] {
+  .data-\[selected\=true\]\:border-border1[data-selected="true"] {
+    border-color: var(--color-border1);
+  }
+
+  .data-\[selected\=true\]\:bg-surface4[data-selected="true"], .data-\[selected\=true\]\:bg-surface4\/80[data-selected="true"] {
     background-color: var(--color-surface4);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[selected\=true\]\:bg-surface4\/80[data-selected="true"] {
+      background-color: color-mix(in oklab, var(--color-surface4) 80%, transparent);
+    }
+  }
+
   .data-\[selected\=true\]\:text-neutral6[data-selected="true"] {
     color: var(--color-neutral6);
   }
@@ -8008,6 +8207,10 @@
       max-width: calc(100vw - 2rem);
     }
 
+    .sm\:max-w-\[min\(56rem\,calc\(100vw-2rem\)\)\] {
+      max-width: min(56rem, 100vw - 2rem);
+    }
+
     .sm\:max-w-lg {
       max-width: var(--container-lg);
     }
@@ -8076,6 +8279,26 @@
       display: inline-flex;
     }
 
+    .md\:h-full {
+      height: 100%;
+    }
+
+    .md\:max-h-none {
+      max-height: none;
+    }
+
+    .md\:grid-cols-\[13rem_minmax\(0\,1fr\)\] {
+      grid-template-columns: 13rem minmax(0, 1fr);
+    }
+
+    .md\:grid-rows-none {
+      grid-template-rows: none;
+    }
+
+    .md\:px-5 {
+      padding-inline: var(--spacing-5);
+    }
+
     .md\:px-10 {
       padding-inline: var(--spacing-10);
     }
@@ -8215,6 +8438,11 @@
     }
   }
 
+  .rtl\:translate-x-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    --tw-translate-x: var(--spacing-0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .rtl\:translate-x-1\/2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     --tw-translate-x: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -8506,11 +8734,87 @@
     padding-top: var(--spacing-0);
   }
 
-  .\[\&_\[cmdk-item\]_svg\]\:size-5 [cmdk-item] svg, .\[\&_\[data-slot\=command-input-wrapper\]_svg\]\:size-5 [data-slot="command-input-wrapper"] svg {
+  .\[\&_\[cmdk-item\]_svg\]\:size-5 [cmdk-item] svg {
+    width: var(--spacing-5);
+    height: var(--spacing-5);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:h-14 [data-slot="command-input-wrapper"] {
+    height: var(--spacing-14);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:shrink-0 [data-slot="command-input-wrapper"] {
+    flex-shrink: 0;
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:rounded-xl [data-slot="command-input-wrapper"] {
+    border-radius: var(--radius-xl);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:border [data-slot="command-input-wrapper"] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:border-border1 [data-slot="command-input-wrapper"] {
+    border-color: var(--color-border1);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:bg-surface3 [data-slot="command-input-wrapper"] {
+    background-color: var(--color-surface3);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:px-4 [data-slot="command-input-wrapper"] {
+    padding-inline: var(--spacing-4);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:pr-11 [data-slot="command-input-wrapper"] {
+    padding-right: var(--spacing-11);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:shadow-\[0_6px_18px_-16px_rgb\(0_0_0_\/_0\.55\)\] [data-slot="command-input-wrapper"] {
+    --tw-shadow: 0 6px 18px -16px var(--tw-shadow-color, #0000008c);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:transition-\[border-color\,box-shadow\] [data-slot="command-input-wrapper"] {
+    transition-property: border-color, box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:duration-150 [data-slot="command-input-wrapper"] {
+    --tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\]\:ease-out [data-slot="command-input-wrapper"] {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]_svg\]\:size-5 [data-slot="command-input-wrapper"] svg {
     width: var(--spacing-5);
     height: var(--spacing-5);
   }
 
+  .\[\&_\[data-slot\=command-input-wrapper\]_svg\]\:text-neutral4 [data-slot="command-input-wrapper"] svg {
+    color: var(--color-neutral4);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\:focus-within\]\:border-border1 [data-slot="command-input-wrapper"]:focus-within {
+    border-color: var(--color-border1);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\:focus-within\]\:bg-surface3 [data-slot="command-input-wrapper"]:focus-within {
+    background-color: var(--color-surface3);
+  }
+
+  .\[\&_\[data-slot\=command-input-wrapper\]\:focus-within\]\:shadow-\[0_8px_22px_-18px_rgb\(0_0_0_\/_0\.6\)\] [data-slot="command-input-wrapper"]:focus-within {
+    --tw-shadow: 0 8px 22px -18px var(--tw-shadow-color, #0009);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .\[\&_code\]\:bg-surface4 code {
     background-color: var(--color-surface4);
   }
@@ -8875,14 +9179,26 @@
     padding-inline: var(--spacing-2);
   }
 
+  :is(.\*\*\:\[\[cmdk-group-heading\]\]\:px-3 *)[cmdk-group-heading] {
+    padding-inline: var(--spacing-3);
+  }
+
   :is(.\*\*\:\[\[cmdk-group-heading\]\]\:pt-1\.5 *)[cmdk-group-heading] {
     padding-top: var(--spacing-1_5);
   }
 
+  :is(.\*\*\:\[\[cmdk-group-heading\]\]\:pt-3 *)[cmdk-group-heading] {
+    padding-top: var(--spacing-3);
+  }
+
   :is(.\*\*\:\[\[cmdk-group-heading\]\]\:pb-1 *)[cmdk-group-heading] {
     padding-bottom: var(--spacing-1);
   }
 
+  :is(.\*\*\:\[\[cmdk-group-heading\]\]\:pb-2 *)[cmdk-group-heading] {
+    padding-bottom: var(--spacing-2);
+  }
+
   :is(.\*\*\:\[\[cmdk-group-heading\]\]\:tracking-wider *)[cmdk-group-heading] {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -8896,6 +9212,10 @@
     text-transform: uppercase;
   }
 
+  :is(.\*\*\:\[\[cmdk-group\]\]\:p-0 *)[cmdk-group] {
+    padding: var(--spacing-0);
+  }
+
   :is(.\*\*\:\[\[cmdk-group\]\]\:px-2 *)[cmdk-group] {
     padding-inline: var(--spacing-2);
   }
@@ -8904,10 +9224,26 @@
     height: var(--spacing-12);
   }
 
+  :is(.\*\*\:\[\[cmdk-input\]\]\:h-full *)[cmdk-input] {
+    height: 100%;
+  }
+
+  :is(.\*\*\:\[\[cmdk-input\]\]\:text-ui-md *)[cmdk-input] {
+    font-size: var(--text-ui-md);
+  }
+
   :is(.\*\*\:\[\[cmdk-item\]\]\:px-2 *)[cmdk-item] {
     padding-inline: var(--spacing-2);
   }
 
+  :is(.\*\*\:\[\[cmdk-item\]\]\:px-3 *)[cmdk-item] {
+    padding-inline: var(--spacing-3);
+  }
+
+  :is(.\*\*\:\[\[cmdk-item\]\]\:py-2\.5 *)[cmdk-item] {
+    padding-block: var(--spacing-2_5);
+  }
+
   :is(.\*\*\:\[\[cmdk-item\]\]\:py-3 *)[cmdk-item] {
     padding-block: var(--spacing-3);
   }
@@ -9298,6 +9634,11 @@
     margin-left: auto;
   }
 
+  .\[\&\>svg\]\:\!size-4 > svg {
+    width: var(--spacing-4) !important;
+    height: var(--spacing-4) !important;
+  }
+
   .\[\&\>svg\]\:size-3 > svg {
     width: var(--spacing-3);
     height: var(--spacing-3);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "45.0.0",
+  "version": "45.1.0-alpha.1",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -150,8 +150,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.36.0",
-    "@mastra/react": "1.3.4"
+    "@mastra/client-js": "^1.36.1-alpha.1",
+    "@mastra/react": "1.3.5-alpha.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -190,10 +190,10 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
     "@internal/lint": "0.0.119",
-    "@mastra/client-js": "^1.36.0",
-    "@mastra/core": "1.55.0",
     "@mastra/memory": "1.24.0",
-    "@mastra/react": "1.3.4"
+    "@mastra/react": "1.3.5-alpha.1",
+    "@mastra/core": "1.56.0-alpha.1",
+    "@mastra/client-js": "^1.36.1-alpha.1"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/message-scroller-hooks-CdsHnth6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"message-scroller-hooks-CdsHnth6.js","sources":["../src/ds/components/MessageScroller/message-scroller-context.ts","../src/ds/components/MessageScroller/message-scroller-hooks.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';\nexport type MessageScrollerButtonDirection = 'start' | 'end';\nexport type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';\n\nexport type MessageScrollerScrollOptions = {\n  align?: MessageScrollerScrollAlign;\n  behavior?: ScrollBehavior;\n  scrollMargin?: number;\n};\n\nexport type MessageScrollerScrollable = {\n  start: boolean;\n  end: boolean;\n};\n\nexport type MessageScrollerVisibility = {\n  currentAnchorId: string | undefined;\n  visibleMessageIds: string[];\n};\n\nexport type MessageScrollerActionsContextValue = {\n  registerItem: (messageId: string, element: HTMLElement, scrollAnchor: boolean) => () => void;\n  scrollToEnd: (options?: MessageScrollerScrollOptions) => boolean;\n  scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean;\n  scrollToStart: (options?: MessageScrollerScrollOptions) => boolean;\n  setContentElement: (element: HTMLDivElement | null) => void;\n  setRootElement: (element: HTMLDivElement | null) => void;\n  setViewportElement: (element: HTMLDivElement | null) => void;\n  syncAfterScroll: () => void;\n};\n\nexport const DEFAULT_SCROLLABLE: MessageScrollerScrollable = { start: false, end: false };\nexport const DEFAULT_VISIBILITY: MessageScrollerVisibility = { currentAnchorId: undefined, visibleMessageIds: [] };\nexport const DEFAULT_SCROLL_EDGE_THRESHOLD = 8;\nexport const DEFAULT_SCROLL_MARGIN = 0;\nexport const DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK = 64;\n\nexport const MessageScrollerActionsContext = React.createContext<MessageScrollerActionsContextValue | null>(null);\nexport const MessageScrollerScrollableContext = React.createContext<MessageScrollerScrollable | null>(null);\nexport const MessageScrollerVisibilityContext = React.createContext<MessageScrollerVisibility | null>(null);\n\nconst useRequiredContext = <TValue>(context: React.Context<TValue | null>, hookName: string) => {\n  const value = React.useContext(context);\n  if (!value) throw new Error(`${hookName} must be used within MessageScrollerProvider.`);\n  return value;\n};\n\nexport const useRequiredMessageScrollerActionsContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerActionsContext, hookName);\n\nexport const useRequiredMessageScrollerScrollableContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerScrollableContext, hookName);\n\nexport const useRequiredMessageScrollerVisibilityContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerVisibilityContext, hookName);\n","import * as React from 'react';\n\nimport {\n  MessageScrollerActionsContext,\n  MessageScrollerScrollableContext,\n  MessageScrollerVisibilityContext,\n  useRequiredMessageScrollerActionsContext,\n  useRequiredMessageScrollerScrollableContext,\n  useRequiredMessageScrollerVisibilityContext,\n} from './message-scroller-context';\n\nexport const useMessageScroller = () => {\n  const { scrollToEnd, scrollToMessage, scrollToStart } =\n    useRequiredMessageScrollerActionsContext('useMessageScroller');\n  return React.useMemo(\n    () => ({ scrollToEnd, scrollToMessage, scrollToStart }),\n    [scrollToEnd, scrollToMessage, scrollToStart],\n  );\n};\n\nexport const useOptionalMessageScroller = () => {\n  const context = React.useContext(MessageScrollerActionsContext);\n  return React.useMemo(() => {\n    if (!context) return undefined;\n    return {\n      scrollToEnd: context.scrollToEnd,\n      scrollToMessage: context.scrollToMessage,\n      scrollToStart: context.scrollToStart,\n    };\n  }, [context]);\n};\n\nexport const useMessageScrollerScrollable = () => {\n  const { start, end } = useRequiredMessageScrollerScrollableContext('useMessageScrollerScrollable');\n  return React.useMemo(() => ({ start, end }), [end, start]);\n};\n\nexport const useOptionalMessageScrollerScrollable = () => {\n  const context = React.useContext(MessageScrollerScrollableContext);\n  return React.useMemo(() => (context ? { start: context.start, end: context.end } : undefined), [context]);\n};\n\nexport const useMessageScrollerVisibility = () => {\n  const { currentAnchorId, visibleMessageIds } =\n    useRequiredMessageScrollerVisibilityContext('useMessageScrollerVisibility');\n  return React.useMemo(() => ({ currentAnchorId, visibleMessageIds }), [currentAnchorId, visibleMessageIds]);\n};\n\nexport const useOptionalMessageScrollerVisibility = () => {\n  const context = React.useContext(MessageScrollerVisibilityContext);\n  return React.useMemo(\n    () =>\n      context\n        ? {\n            currentAnchorId: context.currentAnchorId,\n            visibleMessageIds: context.visibleMessageIds,\n          }\n        : undefined,\n    [context],\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/message-scroller-hooks-DdXqrmC2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"message-scroller-hooks-DdXqrmC2.cjs","sources":["../src/ds/components/MessageScroller/message-scroller-context.ts","../src/ds/components/MessageScroller/message-scroller-hooks.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';\nexport type MessageScrollerButtonDirection = 'start' | 'end';\nexport type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';\n\nexport type MessageScrollerScrollOptions = {\n  align?: MessageScrollerScrollAlign;\n  behavior?: ScrollBehavior;\n  scrollMargin?: number;\n};\n\nexport type MessageScrollerScrollable = {\n  start: boolean;\n  end: boolean;\n};\n\nexport type MessageScrollerVisibility = {\n  currentAnchorId: string | undefined;\n  visibleMessageIds: string[];\n};\n\nexport type MessageScrollerActionsContextValue = {\n  registerItem: (messageId: string, element: HTMLElement, scrollAnchor: boolean) => () => void;\n  scrollToEnd: (options?: MessageScrollerScrollOptions) => boolean;\n  scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean;\n  scrollToStart: (options?: MessageScrollerScrollOptions) => boolean;\n  setContentElement: (element: HTMLDivElement | null) => void;\n  setRootElement: (element: HTMLDivElement | null) => void;\n  setViewportElement: (element: HTMLDivElement | null) => void;\n  syncAfterScroll: () => void;\n};\n\nexport const DEFAULT_SCROLLABLE: MessageScrollerScrollable = { start: false, end: false };\nexport const DEFAULT_VISIBILITY: MessageScrollerVisibility = { currentAnchorId: undefined, visibleMessageIds: [] };\nexport const DEFAULT_SCROLL_EDGE_THRESHOLD = 8;\nexport const DEFAULT_SCROLL_MARGIN = 0;\nexport const DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK = 64;\n\nexport const MessageScrollerActionsContext = React.createContext<MessageScrollerActionsContextValue | null>(null);\nexport const MessageScrollerScrollableContext = React.createContext<MessageScrollerScrollable | null>(null);\nexport const MessageScrollerVisibilityContext = React.createContext<MessageScrollerVisibility | null>(null);\n\nconst useRequiredContext = <TValue>(context: React.Context<TValue | null>, hookName: string) => {\n  const value = React.useContext(context);\n  if (!value) throw new Error(`${hookName} must be used within MessageScrollerProvider.`);\n  return value;\n};\n\nexport const useRequiredMessageScrollerActionsContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerActionsContext, hookName);\n\nexport const useRequiredMessageScrollerScrollableContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerScrollableContext, hookName);\n\nexport const useRequiredMessageScrollerVisibilityContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerVisibilityContext, hookName);\n","import * as React from 'react';\n\nimport {\n  MessageScrollerActionsContext,\n  MessageScrollerScrollableContext,\n  MessageScrollerVisibilityContext,\n  useRequiredMessageScrollerActionsContext,\n  useRequiredMessageScrollerScrollableContext,\n  useRequiredMessageScrollerVisibilityContext,\n} from './message-scroller-context';\n\nexport const useMessageScroller = () => {\n  const { scrollToEnd, scrollToMessage, scrollToStart } =\n    useRequiredMessageScrollerActionsContext('useMessageScroller');\n  return React.useMemo(\n    () => ({ scrollToEnd, scrollToMessage, scrollToStart }),\n    [scrollToEnd, scrollToMessage, scrollToStart],\n  );\n};\n\nexport const useOptionalMessageScroller = () => {\n  const context = React.useContext(MessageScrollerActionsContext);\n  return React.useMemo(() => {\n    if (!context) return undefined;\n    return {\n      scrollToEnd: context.scrollToEnd,\n      scrollToMessage: context.scrollToMessage,\n      scrollToStart: context.scrollToStart,\n    };\n  }, [context]);\n};\n\nexport const useMessageScrollerScrollable = () => {\n  const { start, end } = useRequiredMessageScrollerScrollableContext('useMessageScrollerScrollable');\n  return React.useMemo(() => ({ start, end }), [end, start]);\n};\n\nexport const useOptionalMessageScrollerScrollable = () => {\n  const context = React.useContext(MessageScrollerScrollableContext);\n  return React.useMemo(() => (context ? { start: context.start, end: context.end } : undefined), [context]);\n};\n\nexport const useMessageScrollerVisibility = () => {\n  const { currentAnchorId, visibleMessageIds } =\n    useRequiredMessageScrollerVisibilityContext('useMessageScrollerVisibility');\n  return React.useMemo(() => ({ currentAnchorId, visibleMessageIds }), [currentAnchorId, visibleMessageIds]);\n};\n\nexport const useOptionalMessageScrollerVisibility = () => {\n  const context = React.useContext(MessageScrollerVisibilityContext);\n  return React.useMemo(\n    () =>\n      context\n        ? {\n            currentAnchorId: context.currentAnchorId,\n            visibleMessageIds: context.visibleMessageIds,\n          }\n        : undefined,\n    [context],\n  );\n};\n"],"names":["React"],"mappings":"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"}