@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/esm/components/Snippet/Snippet.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Button } from '@memori.ai/ui';
-import { Copy } from 'lucide-react';
+import { Check, Copy } from 'lucide-react';
 import { prismSyntaxLangs } from '../../helpers/constants';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
@@ -72,7 +72,9 @@ const Snippet = ({ medium, className, preview = false, showCopyButton = true, })
             console.error('Failed to copy text:', error);
         }
     };
-    return (_jsx("div", { className: cx('memori-snippet', { 'memori-snippet--preview': preview }), children: _jsxs("div", { className: "memori-snippet--content", children: [_jsx("pre", { className: cx('line-numbers', className), "aria-labelledby": !!((_a = medium.title) === null || _a === void 0 ? void 0 : _a.length) ? `#snippet-${medium.mediumID}` : undefined, children: _jsx("code", { className: `language-${(_c = (_b = prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)) === null || _b === void 0 ? void 0 : _b.lang) !== null && _c !== void 0 ? _c : 'text'}`, "data-language": (_e = (_d = prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)) === null || _d === void 0 ? void 0 : _d.lang) !== null && _e !== void 0 ? _e : 'text', children: stripDocumentAttachmentTags((_f = medium.content) !== null && _f !== void 0 ? _f : '') }) }), showCopyButton && (_jsxs("div", { className: "memori-snippet--copy-wrapper", children: [copied && (_jsx("span", { className: "memori-snippet--copied-text", children: t('copied') || 'Copied!' })), _jsx(Button, { variant: "ghost", shape: "circle", className: "memori-snippet--copy-button", title: t('copy') || 'Copy', icon: _jsx(Copy, {}), onMouseDown: handleCopy })] }))] }) }));
+    return (_jsx("div", { className: cx('memori-snippet', { 'memori-snippet--preview': preview }), children: _jsxs("div", { className: "memori-snippet--content", children: [_jsx("pre", { className: cx('line-numbers', className), "aria-labelledby": !!((_a = medium.title) === null || _a === void 0 ? void 0 : _a.length) ? `#snippet-${medium.mediumID}` : undefined, children: _jsx("code", { className: `language-${(_c = (_b = prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)) === null || _b === void 0 ? void 0 : _b.lang) !== null && _c !== void 0 ? _c : 'text'}`, "data-language": (_e = (_d = prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)) === null || _d === void 0 ? void 0 : _d.lang) !== null && _e !== void 0 ? _e : 'text', children: stripDocumentAttachmentTags((_f = medium.content) !== null && _f !== void 0 ? _f : '') }) }), showCopyButton && (_jsx("div", { className: "memori-snippet--copy-wrapper", children: _jsx(Button, { variant: "ghost", shape: "circle", className: cx('memori-snippet--copy-button', {
+                            'memori-snippet--copy-button--copied': copied,
+                        }), title: copied ? t('copied') || 'Copied' : t('copy') || 'Copy', icon: copied ? _jsx(Check, {}) : _jsx(Copy, {}), onMouseDown: handleCopy }) }))] }) }));
 };
 export default Snippet;
 //# sourceMappingURL=Snippet.js.map

package/esm/components/Snippet/Snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snippet.js","sourceRoot":"","sources":["../../../src/components/Snippet/Snippet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Snippet.js","sourceRoot":"","sources":["../../../src/components/Snippet/Snippet.tsx"],"names":[],"mappings":"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"}

package/esm/components/StartPanel/StartPanel.css

@@ -7,27 +7,41 @@
     height: var(--memori-spacing-xl);
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--memori-primary);
+    border: var(--memori-border) solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
 }
 
 .memori--gamification-badge span {
-    font-size: var(--memori-text-size-large);
+    font-size: var(--memori-text-size-lg);
 }
 
 .memori-select--button,
 .memori-select--language-chooser,
 .memori-combobox--language-chooser {
-    min-width: 7rem;
+    min-width: 0;
+    max-width: 100%;
     background: transparent;
 }
 
 /* Combobox options are rendered in a portal, so they are not descendants of
    .memori-combobox--language-chooser. Target the popup and disabled items globally. */
 .memori-combobox__popup {
+    width: min(var(--anchor-width, 100%), calc(100dvw - 2 * var(--memori-spacing-md)));
+    min-width: 0;
+    max-width: calc(
+        100dvw - 2 * var(--memori-spacing-md) - env(safe-area-inset-left, 0px) -
+            env(safe-area-inset-right, 0px)
+    );
+    max-height: min(50dvh, 18rem);
+    box-sizing: border-box;
     box-shadow: var(--memori-shadow-lg);
+    overflow-x: hidden;
+}
+
+.memori-combobox__list {
+    max-height: min(40dvh, 14rem);
 }
 
 /* Disabled items are used as non-selectable section headers in the language
@@ -57,7 +71,7 @@
     align-self: flex-start;
     padding: 0;
     border: 0.5px solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: var(--memori-secondary-background);
     color: var(--memori-text-color) !important;
     overflow-y: auto;
@@ -81,9 +95,69 @@
     /* height: 100%; */
 }
 
+.memori--start-panel:has(> .memori--start-panel__footer) {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+.memori--start-panel:has(> .memori--start-panel__footer) .memori--cover {
+    flex-shrink: 0;
+}
+
+.memori--start-panel:has(> .memori--start-panel__footer) .memori--start-panel__body {
+    min-height: 0;
+    flex: 1 1 auto;
+    padding-bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.memori--start-panel__footer {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: var(--memori-spacing-md) var(--memori-spacing-md) var(--memori-spacing-lg);
+    margin-top: auto;
+    background: var(--memori-secondary-background);
+}
+
+.memori--start-panel__footer .memori--powered-by {
+    position: static !important;
+    z-index: auto;
+    bottom: auto;
+    left: auto;
+    display: inline-flex !important;
+    flex-shrink: 0;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    transform: none;
+    white-space: nowrap;
+}
+
+.memori--start-panel__footer .memori--powered-by-icon {
+    opacity: 0.8;
+}
+
+.memori--start-panel__footer .memori--powered-by-label {
+    color: inherit;
+}
+
+@media (max-width: 768px) {
+    .memori--start-panel__footer {
+        display: none;
+    }
+}
+
 .memori--title-container {
     position: relative;
     display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
     align-items: flex-start;
     padding: var(--memori-spacing-lg) 0;
     /* position: absolute;
@@ -122,6 +196,7 @@
     overflow: hidden;
     width: var(--memori-spacing-4xl);
     height: var(--memori-spacing-4xl);
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
@@ -135,13 +210,34 @@
 }
 
 .memori--title {
-    display: inline-block;
+    display: block;
+    overflow: hidden;
+    min-width: 0;
     margin: 0;
     margin-bottom: var(--memori-spacing-sm);
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-heading-large);
+    font-size: var(--memori-text-size-2xl);
     font-weight: var(--memori-text-weight-semibold);
     line-height: var(--memori-text-line-tight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori--title-row {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    align-items: center;
+    margin-bottom: var(--memori-spacing-sm);
+    gap: var(--memori-spacing-sm);
+}
+
+.memori--title-row .memori--title {
+    margin-bottom: 0;
+}
+
+.memori--title-row .blocked-memori-badge--wrapper {
+    flex-shrink: 0;
 }
 
 .memori--description,
@@ -150,7 +246,7 @@
     display: flex;
     flex-direction: column;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: var(--memori-text-line-relaxed);
 }
 
@@ -171,10 +267,102 @@
     display: block;
     min-width: 0;
     max-width: 100%;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: var(--memori-text-line-tight);
     overflow-wrap: break-word;
     overflow-x: hidden;
+    padding-inline-end: 8px;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    .memori--start-panel,
+    .memori--start-panel__body,
+    .memori--description-text,
+    .memori-chat-layout--start-panel-wrap {
+        scrollbar-color: color-mix(in oklch, var(--memori-text-color) 14%, transparent) transparent;
+        scrollbar-width: thin;
+    }
+
+    .memori--start-panel:hover,
+    .memori--start-panel:focus-within,
+    .memori--start-panel:active,
+    .memori--start-panel__body:hover,
+    .memori--start-panel__body:focus-within,
+    .memori--start-panel__body:active,
+    .memori--description-text:hover,
+    .memori--description-text:focus-within,
+    .memori--description-text:active,
+    .memori-chat-layout--start-panel-wrap:hover,
+    .memori-chat-layout--start-panel-wrap:focus-within,
+    .memori-chat-layout--start-panel-wrap:active {
+        scrollbar-color: color-mix(in oklch, var(--memori-text-color) 38%, transparent) transparent;
+    }
+}
+
+.memori--start-panel::-webkit-scrollbar,
+.memori--start-panel__body::-webkit-scrollbar,
+.memori--description-text::-webkit-scrollbar,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+.memori--start-panel::-webkit-scrollbar-track,
+.memori--start-panel__body::-webkit-scrollbar-track,
+.memori--description-text::-webkit-scrollbar-track,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-track {
+    margin: 4px 0;
+    background: transparent;
+}
+
+.memori--start-panel::-webkit-scrollbar-thumb,
+.memori--start-panel__body::-webkit-scrollbar-thumb,
+.memori--description-text::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-text-color) 14%, transparent);
+}
+
+.memori--start-panel:hover::-webkit-scrollbar-thumb,
+.memori--start-panel:focus-within::-webkit-scrollbar-thumb,
+.memori--start-panel:active::-webkit-scrollbar-thumb,
+.memori--start-panel__body:hover::-webkit-scrollbar-thumb,
+.memori--start-panel__body:focus-within::-webkit-scrollbar-thumb,
+.memori--start-panel__body:active::-webkit-scrollbar-thumb,
+.memori--description-text:hover::-webkit-scrollbar-thumb,
+.memori--description-text:focus-within::-webkit-scrollbar-thumb,
+.memori--description-text:active::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap:hover::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap:focus-within::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap:active::-webkit-scrollbar-thumb,
+.memori--start-panel::-webkit-scrollbar-thumb:hover,
+.memori--start-panel__body::-webkit-scrollbar-thumb:hover,
+.memori--description-text::-webkit-scrollbar-thumb:hover,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-text-color) 38%, transparent);
+}
+
+.memori--start-panel::-webkit-scrollbar-thumb:active,
+.memori--start-panel__body::-webkit-scrollbar-thumb:active,
+.memori--description-text::-webkit-scrollbar-thumb:active,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb:active {
+    background-color: color-mix(in oklch, var(--memori-text-color) 52%, transparent);
+}
+
+@media (hover: none) {
+    .memori--start-panel,
+    .memori--start-panel__body,
+    .memori--description-text,
+    .memori-chat-layout--start-panel-wrap {
+        scrollbar-color: color-mix(in oklch, var(--memori-text-color) 28%, transparent) transparent;
+    }
+
+    .memori--start-panel::-webkit-scrollbar-thumb,
+    .memori--start-panel__body::-webkit-scrollbar-thumb,
+    .memori--description-text::-webkit-scrollbar-thumb,
+    .memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb {
+        background-color: color-mix(in oklch, var(--memori-text-color) 28%, transparent);
+    }
 }
 
 .memori--description-text--full {
@@ -183,7 +371,7 @@
 
 .memori--start-privacy-explanation {
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-style: italic;
     font-weight: 350;
     opacity: 0.85;
@@ -197,8 +385,8 @@
 
 .memori--start-privacy-explanation-icon {
     display: flex;
-    width: var(--memori-text-size-large);
-    height: var(--memori-text-size-large);
+    width: var(--memori-text-size-lg);
+    height: var(--memori-text-size-lg);
     align-self: center;
 }
 
@@ -207,16 +395,7 @@
     padding-right: 0;
     padding-left: 0;
     color: var(--memori-primary);
-    font-size: var(--memori-text-size-small);
-}
-
-.memori--start-description {
-    margin-top: auto;
-    margin-top: var(--memori-spacing-sm);
-    margin-bottom: 0;
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-    opacity: 0.85;
+    font-size: var(--memori-text-size-sm);
 }
 
 .memori--title-container__content {
@@ -228,25 +407,37 @@
 
 .memori--language-row {
     display: flex;
+    min-width: 0;
+    max-width: 100%;
     flex-wrap: wrap;
     align-items: center;
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
     gap: 0.25rem;
 }
 
 .memori--language-row__combobox {
     width: 100%;
-    min-width: 7rem;
+    min-width: 0;
+    max-width: 100%;
+    gap: 0.25rem;
 }
 
 .memori--language-row__combobox .memori-combobox__label {
     display: block;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0;
     color: var(--memori-text-color);
-    font-size: 0.8125rem;
+    font-size: 0.75rem;
+    line-height: var(--memori-text-line-tight);
     opacity: 0.72;
 }
 
+.memori--language-row__combobox .memori-combobox__trigger {
+    min-height: 2.25rem;
+    padding: 0.375rem 0.75rem;
+    font-size: var(--memori-text-size-sm);
+    line-height: var(--memori-text-line-tight);
+}
+
 .memori--start-panel__divider {
     height: 0.5px;
     margin: 1rem 0;
@@ -261,7 +452,7 @@
     display: flex;
     align-items: center;
     padding: 0.625rem 0.875rem;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     margin-bottom: 1.25rem;
     background: var(--memori-main-background);
     gap: 0.625rem;
@@ -292,7 +483,7 @@
 .memori--settings-section {
     overflow: visible;
     border: 0.5px solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     margin-bottom: 1.25rem;
     background: var(--memori-main-background);
 }
@@ -315,7 +506,7 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--memori-radius-field);
+    border-radius: var(--memori-radius-control);
     margin-top: 1px;
 }
 
@@ -434,7 +625,7 @@
         justify-content: space-between;
         padding: 0.625rem 0.875rem;
         border: 1px solid var(--memori-border-color);
-        border-radius: var(--memori-radius-box);
+        border-radius: var(--memori-radius-control);
         margin-bottom: 0.625rem;
         background: var(--memori-main-background);
         color: var(--memori-text-color);
@@ -475,6 +666,12 @@
         text-align: left;
     }
 
+    .memori--description-text--expand-symbol,
+    .memori--description-text--collapse-symbol {
+        width: 100%;
+        justify-content: space-between;
+    }
+
     .memori--description-text > button svg,
     .memori--description-text .memori-expandable__button svg {
         margin-left: auto;
@@ -487,6 +684,13 @@
     .memori--settings-section__action {
         margin-top: 0;
     }
+
+    .memori-combobox__positioner {
+        max-width: calc(
+            100dvw - 2 * var(--memori-spacing-sm) - env(safe-area-inset-left, 0px) -
+                env(safe-area-inset-right, 0px)
+        );
+    }
 }
 
 .memori--description-text--collapsible > button {
@@ -527,6 +731,16 @@
     text-align: left;
 }
 
+.memori--title-container__content
+    .memori--description-text--collapsible:has(.memori--description-text--expand-symbol)
+    .memori-expandable__inner {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    text-overflow: ellipsis;
+}
+
 .memori--description-text--expand-symbol,
 .memori--description-text--collapse-symbol {
     display: inline-flex;
@@ -534,9 +748,21 @@
     color: var(--memori-primary);
     font-size: 0.8rem;
     font-weight: var(--memori-text-weight-medium);
+    gap: var(--memori-spacing-xs);
     line-height: 1.2;
 }
 
+.memori--description-text--toggle-chevron {
+    width: 0.85rem;
+    height: 0.85rem;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.memori--description-text--toggle-chevron--up {
+    transform: rotate(180deg);
+}
+
 /* The Expandable toggle is a memori-button ghost, which inherits a global
    `transform: scale(1.015)` on hover from @memori.ai/ui. Disable it here. */
 .memori-expandable.memori--description-text--collapsible .memori-button:hover:not(:disabled, .memori-button--disabled),
@@ -557,7 +783,7 @@
 .memori--privacy-popover-content-link {
     color: var(--memori-primary);
     cursor: pointer;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     text-decoration: underline;
 }
 
@@ -569,7 +795,7 @@
 .memori--language-chooser select optgroup {
     background: #fff;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-style: normal;
     font-weight: var(--memori-text-weight-bold);
 }
@@ -591,21 +817,22 @@
     height: var(--memori-spacing-xl);
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--memori-primary);
+    border: none;
     border-radius: 50%;
+    margin-right: var(--memori-spacing-md);
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
     color: var(--memori-text-color);
 }
 
 .memori--completions-enabled span {
-    font-size: var(--memori-text-size-large);
+    font-size: var(--memori-text-size-lg);
 }
 
 .memori--completions-enabled svg {
     overflow: visible;
-    width: var(--memori-text-size-base);
-    height: var(--memori-text-size-base);
+    width: var(--memori-text-size-md);
+    height: var(--memori-text-size-md);
 }
 
 .memori--board-of-experts + .memori--nsfw,
@@ -615,8 +842,8 @@
 
 .memori--board-of-experts svg {
     overflow: visible;
-    width: var(--memori-text-size-base);
-    height: var(--memori-text-size-base);
+    width: var(--memori-text-size-md);
+    height: var(--memori-text-size-md);
     fill: var(--memori-text-color);
 }
 
@@ -625,7 +852,7 @@
     align-items: flex-start;
     padding: 0.625rem 0.875rem;
     border: none;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     margin-bottom: 1.25rem;
     background: var(--memori-main-background);
     color: var(--memori-text-color);
@@ -684,7 +911,7 @@
     justify-content: space-between;
     padding: 0.625rem 0.75rem;
     border: 1px solid color-mix(in oklch, var(--memori-border-color) 80%, white);
-    border-radius: var(--memori-radius-field);
+    border-radius: var(--memori-radius-surface);
     margin-top: var(--memori-spacing-xs);
     gap: var(--memori-spacing-sm);
 }
@@ -758,11 +985,11 @@
     display: block;
     width: 100%;
     padding: var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-field);
+    border-radius: var(--memori-radius-tooltip);
     margin-top: var(--memori-spacing-xs);
     background: var(--memori-tooltip-background);
     color: var(--memori-tooltip-foreground);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: var(--memori-text-line-normal);
 }
 
@@ -793,7 +1020,7 @@
 .memori--deep-thought-disclaimer h3 {
     margin: 0;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
+    font-size: var(--memori-text-size-md);
     font-weight: var(--memori-text-weight-semibold);
     line-height: var(--memori-text-line-relaxed);
     overflow-wrap: anywhere;
@@ -810,8 +1037,8 @@
 }
 
 .memori--deep-thought-disclaimer .memori-tooltip .memori-tooltip--trigger svg {
-    width: var(--memori-text-size-heading-large);
-    height: var(--memori-text-size-heading-large);
+    width: var(--memori-text-size-2xl);
+    height: var(--memori-text-size-2xl);
     padding: var(--memori-spacing-xs);
     border: 1px solid color-mix(in oklch, var(--memori-info) 50%, var(--memori-border-color));
     border-radius: 50%;
@@ -840,11 +1067,21 @@
     outline-offset: var(--memori-focus-ring-offset);
 }
 
-/* Portal renders on document.body; website-assistant layout uses z-index up to 2^31-1 for the
-   fixed panel/trigger — without this, the popover stays underneath and looks “missing”. */
+/* Portal on widget root; tooltip/popover library z-index is 1300.
+   Hide while Floating UI is still applying coordinates so click-open
+   never flashes at viewport 0,0 (same pattern as ChatBubble addon tooltips). */
 .memori--privacy-popover-positioner,
 .memori--deep-thought-helper-tooltip-positioner {
-    z-index: 2147483647;
+    z-index: 1300;
+}
+
+.memori--privacy-popover-positioner[data-starting-style],
+.memori--privacy-popover-positioner[data-ending-style],
+.memori--deep-thought-helper-tooltip-positioner[data-starting-style],
+.memori--deep-thought-helper-tooltip-positioner[data-ending-style] {
+    opacity: 0 !important;
+    pointer-events: none;
+    visibility: hidden;
 }
 
 .memori--privacy-popover-popup {
@@ -852,11 +1089,11 @@
     max-height: min(50vh, 18rem);
     box-sizing: border-box;
     padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    border-radius: var(--memori-radius-field);
+    border-radius: var(--memori-radius-tooltip);
     background: var(--memori-tooltip-background);
     box-shadow: var(--memori-shadow-lg);
     color: var(--memori-tooltip-foreground);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     hyphens: auto;
     line-height: var(--memori-text-line-normal);
     -webkit-overflow-scrolling: touch;
@@ -885,6 +1122,17 @@
     padding-left: var(--memori-spacing-md);
 }
 
+/* Close button is absolutely positioned; keep the title out from under it. */
+.memori--start-panel-info-modal.memori-modal__viewport .memori-modal__title,
+.memori--start-panel-info-modal-title {
+    min-width: 0;
+    max-width: 100%;
+    padding-right: calc(var(--memori-icon-button-size, 44px) + var(--memori-spacing-md));
+    overflow-wrap: anywhere;
+    white-space: normal;
+    word-break: break-word;
+}
+
 @media (max-width: 480px) {
     .memori--settings-section__description {
         display: none;

package/esm/components/StartPanel/StartPanel.d.ts

@@ -34,6 +34,7 @@ export interface Props {
     notEnoughCredits?: boolean;
     isMultilanguageEnabled?: boolean | undefined;
     showFullDescriptionOnMobile?: boolean;
+    footerBrand?: React.ReactNode;
 }
 declare const StartPanel: React.FC<Props>;
 export default StartPanel;