@memori.ai/memori-react 9.0.0-alpha.24 → 9.0.0-alpha.25

package/src/components/MediaWidget/__snapshots__/MediaWidget.test.tsx.snap

@@ -43,7 +43,7 @@ exports[`renders MediaWidget with links unchanged 1`] = `
       class="memori-media-items"
     >
       <div
-        class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
+        class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent memori-media-items--single"
       >
         <div
           class="memori-media-item"

package/src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css

@@ -300,7 +300,7 @@
 /* Toast Notifications */
 .memori-copy-toast {
     position: fixed;
-    z-index: 10000;
+    z-index: calc(var(--memori-z-index-base, 0) + 1700);
     top: 20px;
     right: 20px;
     display: flex;

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -7,7 +7,6 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Drawer } from '@memori.ai/ui';
-import { useWidgetSurfaceEl } from '../../../../context/widgetSurfaceContext';
 import {
   X,
   Maximize,
@@ -34,7 +33,6 @@ const ArtifactDrawer: React.FC<{
    *  component falls back to the Drawer overlay regardless of this flag. */
   isLayoutColumn?: boolean;
 }> = ({ isChatLogPanel = false, isLayoutColumn = false }) => {
-  const surfaceEl = useWidgetSurfaceEl();
   const { state, closeArtifact, toggleFullscreen } = useArtifact();
   const { t } = useTranslation();
   const [isMobile, setIsMobile] = useState(false);
@@ -148,7 +146,6 @@ const ArtifactDrawer: React.FC<{
         // Mobile or legacy: floating Drawer overlay
         return (
           <Drawer
-            container={surfaceEl ?? undefined}
             open={state.isDrawerOpen}
             onClose={handleClose}
             anchor="right"
@@ -172,7 +169,6 @@ const ArtifactDrawer: React.FC<{
       state.isDrawerOpen,
       state.isFullscreen,
       isMobile,
-      surfaceEl,
     ]
   );
 
@@ -321,7 +317,6 @@ const ArtifactDrawer: React.FC<{
                   placement="bottom"
                   align="end"
                   sideOffset={8}
-                  container={surfaceEl ?? undefined}
                 >
                   <Dropdown.Item
                     className="memori-artifact-action-btn"

package/src/components/MemoriWidget/MemoriUIProvider.contract.test.tsx

@@ -7,14 +7,21 @@ import {
 } from '@memori.ai/ui';
 
 function Probe() {
-  const portal = usePortalContainer();
+  const escapePortal = usePortalContainer(undefined, 'escape');
+  const clipPortal = usePortalContainer(undefined, 'clip');
   const theme = useMemoriTheme();
   return (
     <div
       data-testid="probe"
-      data-portal-is-root={
-        portal instanceof HTMLElement &&
-        portal.getAttribute('data-memori-probe-root') === '1'
+      data-escape-is-root={
+        escapePortal instanceof HTMLElement &&
+        escapePortal.getAttribute('data-memori-probe-root') === '1'
+          ? 'yes'
+          : 'no'
+      }
+      data-clip-is-surface={
+        clipPortal instanceof HTMLElement &&
+        clipPortal.getAttribute('data-memori-probe-surface') === '1'
           ? 'yes'
           : 'no'
       }
@@ -25,6 +32,7 @@ function Probe() {
 
 function Harness({ theme }: { theme: 'light' | 'dark' }) {
   const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const [surface, setSurface] = useState<HTMLDivElement | null>(null);
   return (
     <div
       ref={setRoot}
@@ -32,7 +40,16 @@ function Harness({ theme }: { theme: 'light' | 'dark' }) {
       data-memori-probe-root="1"
       data-testid="widget-root"
     >
-      <MemoriUIProvider container={root} theme={theme}>
+      <div
+        ref={setSurface}
+        data-memori-probe-surface="1"
+        data-testid="widget-surface"
+      />
+      <MemoriUIProvider
+        container={root}
+        clipContainer={surface}
+        theme={theme}
+      >
         <Probe />
       </MemoriUIProvider>
     </div>
@@ -40,7 +57,7 @@ function Harness({ theme }: { theme: 'light' | 'dark' }) {
 }
 
 describe('MemoriUIProvider embed contract', () => {
-  it('keeps portal target on the widget root and theme in sync with data-theme', async () => {
+  it('keeps escape portal on widget root, clip on surface, theme in sync', async () => {
     render(<Harness theme="dark" />);
 
     const root = screen.getByTestId('widget-root');
@@ -48,7 +65,8 @@ describe('MemoriUIProvider embed contract', () => {
 
     await waitFor(() => {
       const probe = screen.getByTestId('probe');
-      expect(probe).toHaveAttribute('data-portal-is-root', 'yes');
+      expect(probe).toHaveAttribute('data-escape-is-root', 'yes');
+      expect(probe).toHaveAttribute('data-clip-is-surface', 'yes');
       expect(probe).toHaveAttribute('data-theme-context', 'dark');
     });
   });

package/src/components/MemoriWidget/MemoriWidget.css

@@ -165,61 +165,6 @@
     display: none;
 }
 
-/* Close buttons (modals, drawers, popovers) — same square bordered chrome
-   as header / website-assistant / artifact-drawer IconButton.
-   @memori.ai/ui defaults these to borderless / circular. */
-.memori-modal__close,
-.memori-drawer__close,
-.memori-popover__close {
-    display: inline-flex;
-    width: var(--memori-icon-button-size, 40px);
-    min-width: var(--memori-icon-button-size, 40px);
-    height: var(--memori-icon-button-size, 40px);
-    min-height: var(--memori-icon-button-size, 40px);
-    box-sizing: border-box;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
-    border-radius: var(--memori-radius-box);
-    margin: 0;
-    background: transparent;
-    box-shadow: none;
-    color: var(--memori-icon-button-icon, color-mix(in oklch, var(--memori-text-color, #111827) 72%, transparent));
-    transform: none;
-}
-
-.memori-popover__close {
-    block-size: var(--memori-icon-button-size, 40px);
-    inline-size: var(--memori-icon-button-size, 40px);
-}
-
-.memori-modal__close:hover,
-.memori-drawer__close:hover,
-.memori-popover__close:hover {
-    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
-    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
-    box-shadow: none;
-    color: var(--memori-text-color, #111827);
-}
-
-.memori-modal__close:focus-visible,
-.memori-drawer__close:focus-visible,
-.memori-popover__close:focus-visible {
-    border-color: var(--memori-primary);
-    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
-    outline: 2px solid var(--memori-primary);
-    outline-offset: var(--memori-focus-ring-offset, 2px);
-}
-
-.memori-modal__close svg,
-.memori-drawer__close svg,
-.memori-popover__close svg {
-    width: var(--memori-icon-button-icon-size, 20px);
-    height: var(--memori-icon-button-icon-size, 20px);
-}
-
 .memori-drawer__header {
     align-items: center;
 }

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -49,8 +49,6 @@ import {
   MemoriUIProvider,
   AlertViewport,
 } from '@memori.ai/ui';
-import { WidgetSurfaceProvider } from '../../context/widgetSurfaceContext';
-
 // Components
 import MemoriAuth from '../Auth/Auth';
 import Chat, { Props as ChatProps } from '../Chat/Chat';
@@ -444,7 +442,8 @@ export interface LayoutProps {
   loading?: boolean;
   autoStart?: boolean;
   onSidebarToggle?: (isOpen: boolean) => void;
-  /** When true or "true" (e.g. from integrationConfig or web component attribute), hide the 3D avatar. */
+  /** When true or "true" (e.g. from integrationConfig or web component attribute), hide the 3D avatar.
+   * WEBSITE_ASSISTANT defaults to hidden when this is unset. */
   avatar3dHidden?: boolean | string;
   /** TOTEM only: max-width of the shared content axis (avatar + panel + status).
    * Accepts a number (px) or a CSS length string; enables vertical-kiosk widths. */
@@ -482,7 +481,7 @@ export interface Props {
   showUpload?: boolean;
   showChatHistory?: boolean;
   showReasoning?: boolean;
-  /** When true and layout is WEBSITE_ASSISTANT, hide the 3D avatar in the expanded panel. */
+  /** When true (default for WEBSITE_ASSISTANT), hide the 3D avatar in the expanded panel. Set false to show it. */
   avatar3dHidden?: boolean;
   preview?: boolean;
   embed?: boolean;
@@ -530,8 +529,9 @@ type ChatStylesConfig = {
 
 /**
  * Returns CSS custom properties for the chat container when a brand primary is set.
- * Sets the UI brand hook (`--memori-primary-color`); hover/active/subtle derive from
- * `@memori.ai/ui` theme tokens. Widget-only icon soft fills stay here.
+ * Sets the UI brand hook (`--memori-primary-color`); hover/active/disabled/subtle
+ * are rebound from that hook in `styles.css` on widget scopes (CSS derives only
+ * when computed on the same element as the override). Widget-only icon soft fills stay here.
  */
 export function getChatStyles(
   config: ChatStylesConfig | null | undefined
@@ -3647,7 +3647,8 @@ const MemoriWidget = ({
     position: position,
     setVenue: setPosition,
     openPositionPopover: () => {
-      setAutoStartPositionGeolocation(true);
+      // StartPanel starts geolocation in its click handler (mobile Header does
+      // not mount PositionPopover). This only opens the desktop popover UI.
       setPositionPopoverOpen(true);
     },
     integrationConfig: integrationConfig,
@@ -3828,11 +3829,17 @@ const MemoriWidget = ({
       })}
       style={{ height }}
     >
-      <MemoriUIProvider container={widgetRootEl} theme={widgetTheme}>
+      <MemoriUIProvider
+        container={widgetRootEl}
+        clipContainer={widgetSurfaceEl}
+        theme={widgetTheme}
+        zIndexBase={
+          selectedLayout === 'WEBSITE_ASSISTANT' ? 10000 : 0
+        }
+      >
         {/* Inside themed root so alert text uses dark-theme tokens (white). */}
-        <AlertViewport placement="top-end" style={{ zIndex: 10002 }} />
-        <WidgetSurfaceProvider value={widgetSurfaceEl}>
-          <div ref={setWidgetSurfaceEl} className="memori-widget__surface">
+        <AlertViewport placement="top-end" />
+        <div ref={setWidgetSurfaceEl} className="memori-widget__surface">
             <Layout
               Header={Header}
               headerProps={headerProps}
@@ -4148,7 +4155,6 @@ const MemoriWidget = ({
               />
             )}
           </div>
-        </WidgetSurfaceProvider>
       </MemoriUIProvider>
     </div>
   );

package/src/components/MobileSessionPanel/MobileSessionPanel.css

@@ -457,3 +457,23 @@
         justify-content: flex-end;
     }
 }
+
+.memori-mobile-session-panel-drawer.memori-drawer--bottom {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    max-height: 90vh;
+    padding: 0;
+    border-radius: 20px 20px 0 0;
+}
+
+.memori-mobile-session-panel-drawer .memori-drawer__body {
+    overflow: auto;
+    padding: 0;
+}
+
+.memori-mobile-session-panel-drawer .memori-mobile-session-panel {
+    max-height: none;
+    border-radius: 0;
+}
+

package/src/components/MobileSessionPanel/MobileSessionPanel.tsx

@@ -7,7 +7,7 @@ import {
   LogIn,
   LogOut,
 } from 'lucide-react';
-import { Button, createAlertOptions, useAlertManager } from '@memori.ai/ui';
+import { Button, Drawer, createAlertOptions, useAlertManager } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
 import { Message, User, Venue } from '@memori.ai/memori-api-client/dist/types';
 import { getErrori18nKey } from '../../helpers/error';
@@ -194,7 +194,6 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
   const showAuthControls = showLogin;
   const showProfileControls = showAuthControls && isLoggedIn;
   const panelRef = useRef<HTMLElement>(null);
-  const dialogRef = useRef<HTMLDivElement>(null);
   const panelTitleId = 'mobile-session-panel-title';
   const touchStartYRef = useRef(0);
   const [dragOffset, setDragOffset] = useState(0);
@@ -261,58 +260,11 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
     knownFactsHint || t('widget.knownFactsHint') || 'What I remember about you';
   const resolvedAiUsageTitle =
     aiUsageTitle || t('widget.aiConsumption') || 'AI usage';
-  useEffect(() => {
-    if (!open) return;
-    const onEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onEscape);
-    return () => document.removeEventListener('keydown', onEscape);
-  }, [open, onClose]);
-
-  useEffect(() => {
-    if (!open) return;
-
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    const root = dialogRef.current;
-    if (!root) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Tab') return;
-
-      const focusableElements = root.querySelectorAll<HTMLElement>(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (!focusableElements.length) return;
-
-      const first = focusableElements[0];
-      const last = focusableElements[focusableElements.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-
-      if (event.shiftKey && active === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    panelRef.current?.focus();
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      previouslyFocused?.focus();
-    };
-  }, [open]);
 
   useEffect(() => {
     if (open) setActiveView('session');
   }, [open]);
 
-  if (!open) return null;
-
   const updateAvatar = async (avatar: any) => {
     if (!uploadAsset || !pwlUpdateUser) {
       add(
@@ -415,30 +367,15 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
     return !isKnownFactsAction && !isAudioAction;
   });
 
-  return (
-    <div
-      ref={dialogRef}
-      className={`memori-mobile-session-panel--overlay ${
-        isPopover ? 'memori-mobile-session-panel--overlay-popover' : ''
-      }`}
-      role="presentation"
-    >
-      {!isPopover && (
-        <button
-          type="button"
-          className="memori-mobile-session-panel--backdrop"
-          aria-label={String(t('close', { defaultValue: 'Close' }))}
-          onClick={onClose}
-        />
-      )}
+  const panel = (
       <section
         ref={panelRef}
         tabIndex={-1}
         className={`memori-mobile-session-panel ${
           isPopover ? 'memori-mobile-session-panel--popover' : ''
         }`}
-        role="dialog"
-        aria-modal="true"
+        role={isPopover ? 'dialog' : undefined}
+        aria-modal={isPopover ? true : undefined}
         aria-labelledby={panelTitleId}
         onClick={event => event.stopPropagation()}
         onTouchStart={
@@ -809,7 +746,31 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
           </div>
         )}
       </section>
-    </div>
+  );
+
+  if (isPopover) {
+    if (!open) return null;
+    return (
+      <div
+        className="memori-mobile-session-panel--overlay memori-mobile-session-panel--overlay-popover"
+        role="presentation"
+      >
+        {panel}
+      </div>
+    );
+  }
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      anchor="bottom"
+      size="lg"
+      className="memori-mobile-session-panel-drawer"
+      closable={false}
+    >
+      {panel}
+    </Drawer>
   );
 };
 

package/src/components/PositionPopover/PositionPopover.css

@@ -215,5 +215,5 @@
 }
 
 .memori-position-popover__positioner--website-assistant {
-    z-index: 2147483600;
+    z-index: calc(var(--memori-z-index-base, 0) + 1300);
 }

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,5 +1,4 @@
 import { Drawer, Checkbox, Button, Slider, Tooltip } from '@memori.ai/ui';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { setLocalConfig } from '../../helpers/configuration';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
@@ -47,11 +46,9 @@ const SettingsDrawer = ({
   isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
-  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
-      container={surfaceEl ?? undefined}
       className="memori-settings-drawer"
       open={open}
       onClose={onClose}

package/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`renders ShareButton aligned left unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -110,7 +110,7 @@ exports[`renders ShareButton unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -193,7 +193,7 @@ exports[`renders ShareButton with button not primary unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -276,7 +276,7 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -359,7 +359,7 @@ exports[`renders ShareButton with share chat unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -442,7 +442,7 @@ exports[`renders ShareButton with tenant img set unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -525,7 +525,7 @@ exports[`renders ShareButton with title unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -608,7 +608,7 @@ exports[`renders ShareButton with url unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -691,7 +691,7 @@ exports[`renders ShareButton without qr code unchanged 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="lucide lucide-share2"
+              class="lucide lucide-share2 lucide-share-2"
               fill="none"
               height="24"
               stroke="currentColor"

package/src/components/Snippet/__snapshots__/Snippet.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`renders SnippetUpload with css code 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -97,6 +98,7 @@ exports[`renders SnippetUpload with html code 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -160,6 +162,7 @@ exports[`renders SnippetUpload with js code 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -247,6 +250,7 @@ exports[`renders SnippetUpload with js code without line numbers 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -354,6 +358,7 @@ export default Snippet;
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -461,6 +466,7 @@ export default Snippet;
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -524,6 +530,7 @@ exports[`renders SnippetUpload with text 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"
@@ -587,6 +594,7 @@ exports[`renders SnippetUpload with text as fallback 1`] = `
             class="memori-button__icon"
           >
             <svg
+              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="24"

package/src/components/StartPanel/StartPanel.css

@@ -961,12 +961,23 @@
     outline-offset: var(--memori-focus-ring-offset);
 }
 
-/* Portal on widget root; tooltip/popover library z-index is 1300. */
+/* 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: 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 {
     max-width: min(20rem, calc(100vw - 2 * var(--memori-spacing-md)));
     max-height: min(50vh, 18rem);