@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

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

@@ -16,13 +16,17 @@ exports[`renders MediaWidget with hints unchanged 1`] = `
     <ul
       class="memori-media--hints"
     >
-      <li
-        class="ease-out duration-500 opacity-0 translate-y-1"
-      >
+      <li>
         <button
-          class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-media--hint"
+          class="memori-button memori-button--primary memori-button--md memori-media--hint"
+          tabindex="0"
+          type="button"
         >
-          All right
+          <span
+            class="memori-button__content"
+          >
+            All right
+          </span>
         </button>
       </li>
     </ul>
@@ -42,7 +46,7 @@ exports[`renders MediaWidget with links unchanged 1`] = `
         class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent"
       >
         <div
-          class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
+          class="memori-media-item"
         >
           <a
             class="memori-media-item--link memori-media-item--document-link"
@@ -89,9 +93,10 @@ exports[`renders MediaWidget with media unchanged 1`] = `
         class="memori-media-items--grid memori-chat-scroll-item memori-media-items--agent memori-media-items--single"
       >
         <div
-          class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
+          class="memori-media-item"
         >
           <div
+            aria-label="Game Cover"
             class="memori-media-item--link memori-media-item--image-link"
             role="button"
             style="cursor: pointer;"
@@ -99,50 +104,31 @@ exports[`renders MediaWidget with media unchanged 1`] = `
             title="Game Cover"
           >
             <div
-              class="memori-card memori-media-item--card memori-media-item--image memori-card--with-cover memori-card--hoverable"
+              class="memori-card memori-card--elevated memori-card--interactive memori-media-item--card memori-media-item--image"
+              tabindex="0"
             >
               <div
-                class="memori-spin"
+                class="memori-card__cover"
               >
-                <div
-                  class="memori-card--cover"
+                <picture
+                  class="memori-media-item--figure"
                 >
-                  <picture
-                    class="memori-media-item--figure"
-                  >
-                    <source
-                      srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
-                      type="image/jpeg"
-                    />
-                    <img
-                      alt="Game Cover"
-                      src="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
-                    />
-                  </picture>
-                </div>
-                <div
-                  class="memori-card--content"
-                >
-                  <div
-                    class="memori-card--children"
+                  <source
+                    srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
+                    type="image/jpeg"
                   />
-                </div>
+                  <img
+                    alt="Game Cover"
+                    src="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
+                  />
+                </picture>
+              </div>
+              <div
+                class="memori-card__body memori-card__body--padding-md"
+              >
                 <div
-                  class="memori-spin--spinner"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="memori-loading-icon"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 1024 1024"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-                    />
-                  </svg>
-                </div>
+                  class="memori-spin"
+                />
               </div>
             </div>
           </div>

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

@@ -120,7 +120,7 @@ Devo:
  .container {
  background: white;
  padding: 30px;
- border-radius: 8px;
+ border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
@@ -264,7 +264,7 @@ const htmlArtifactWithScrolling = `<output class="memori-artifact" data-mimetype
  background: var(--color-light-teal);
  color: var(--color-navy);
  text-decoration: none;
- border-radius: 50px;
+ border-radius: .5rem;
  font-weight: 600; /* Semibold */
  font-size: 1.1rem;
  transition: all 0.3s ease;
@@ -307,7 +307,7 @@ const htmlArtifactWithScrolling = `<output class="memori-artifact" data-mimetype
  .feature-card {
  background: white;
  padding: 2.5rem;
- border-radius: 20px;
+ border-radius: .5rem;
  box-shadow: 0 10px 40px rgba(0, 85, 135, 0.1);
  text-align: center;
  transition: all 0.3s ease;
@@ -371,7 +371,7 @@ const htmlArtifactWithScrolling = `<output class="memori-artifact" data-mimetype
  .color-swatch {
  text-align: center;
  padding: 1.5rem;
- border-radius: 15px;
+ border-radius: .5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  }
@@ -411,7 +411,7 @@ const htmlArtifactWithScrolling = `<output class="memori-artifact" data-mimetype
  margin: 2rem 0;
  padding: 2rem;
  background: white;
- border-radius: 15px;
+ border-radius: .5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  }
  
@@ -606,7 +606,7 @@ const htmlArtifactScrollTest = `<output class="memori-artifact" data-mimetype="h
         padding: 32px;
         background: #fff;
         margin: 16px;
-        border-radius: 12px;
+        border-radius: .5rem;
         box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
       }
 
@@ -624,7 +624,7 @@ const htmlArtifactScrollTest = `<output class="memori-artifact" data-mimetype="h
 
       .card {
         padding: 16px;
-        border-radius: 10px;
+        border-radius: .5rem;
         background: #eef2ff;
         border: 1px solid #c7d2fe;
       }
@@ -840,7 +840,7 @@ const cssArtifact = `<output class="memori-artifact" data-mimetype="css">
 
 .card {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 12px;
+    border-radius: .5rem;
     padding: 20px;
     color: white;
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
@@ -1390,7 +1390,7 @@ h1 {
 
 .stat-card {
   background: white;
-  border-radius: 16px;
+  border-radius: .5rem;
   padding: 32px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -1550,7 +1550,7 @@ body {
   margin: 0 auto;
   background: white;
   padding: 30px;
-  border-radius: 8px;
+  border-radius: .5rem;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 </output>
@@ -1998,7 +1998,7 @@ export const APIBridge_ProcessOutputElements: Story = {
           output.setAttribute('data-title', 'Dynamic Artifact');
           output.setAttribute('data-sample', 'true');
           output.innerHTML = `
-            <div style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px;">
+            <div style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: .5rem;">
               <h2>🚀 Dynamically Added!</h2>
               <p>This artifact was added to the DOM dynamically and then processed.</p>
               <p>Timestamp: ${new Date().toLocaleTimeString()}</p>
@@ -2140,18 +2140,18 @@ export const APIBridge_WebSocketSimulation: Story = {
       const simulateWebSocket = () => {
         // Simulate receiving a message with artifacts from WebSocket
         const artifactContent = `
-          <div style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
+          <div style="padding: 20px; background: white; border-radius: .5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
             <h2>📊 Sales Report Q4 2024</h2>
             <div style="display: flex; gap: 20px; margin-top: 20px;">
-              <div style="flex: 1; padding: 15px; background: #ecfdf5; border-radius: 8px;">
+              <div style="flex: 1; padding: 15px; background: #ecfdf5; border-radius: .5rem;">
                 <h3>Revenue</h3>
                 <p style="font-size: 24px; font-weight: bold; color: #059669;">$124,500</p>
               </div>
-              <div style="flex: 1; padding: 15px; background: #fef3c7; border-radius: 8px;">
+              <div style="flex: 1; padding: 15px; background: #fef3c7; border-radius: .5rem;">
                 <h3>Customers</h3>
                 <p style="font-size: 24px; font-weight: bold; color: #d97706;">1,234</p>
               </div>
-              <div style="flex: 1; padding: 15px; background: #dbeafe; border-radius: 8px;">
+              <div style="flex: 1; padding: 15px; background: #dbeafe; border-radius: .5rem;">
                 <h3>Growth</h3>
                 <p style="font-size: 24px; font-weight: bold; color: #2563eb;">+23%</p>
               </div>
@@ -2170,9 +2170,9 @@ export const APIBridge_WebSocketSimulation: Story = {
         const chatContainer = document.getElementById('chat-simulation');
         if (chatContainer) {
           const messageHTML = `
-            <div style="padding: 10px; margin: 10px 0; background: #f9fafb; border-radius: 8px;">
+            <div style="padding: 10px; margin: 10px 0; background: #f9fafb; border-radius: .5rem;">
               <p><strong>Bot:</strong> I've created a visualization for you. Click the artifact card to view it.</p>
-              <div style="padding: 10px; margin-top: 10px; background: #e0e7ff; border-radius: 4px; cursor: pointer;" onclick="window.MemoriArtifactAPI?.createAndOpenArtifact(\`${artifactContent.replace(
+              <div style="padding: 10px; margin-top: 10px; background: #e0e7ff; border-radius: .5rem; cursor: pointer;" onclick="window.MemoriArtifactAPI?.createAndOpenArtifact(\`${artifactContent.replace(
                 /`/g,
                 '\\`'
               )}\`, 'html', 'Data Visualization')">

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

@@ -3,55 +3,54 @@
  * Following the project's design system and CSS patterns
  */
 
-
-
-.memori-artifact-action-btn  {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 12px 16px;
-  border: none;
-  background: none;
-  color: #374151;
-  cursor: pointer;
-  font-size: 14px;
-  text-align: left;
-  transition: background-color 0.15s ease;
+.memori-artifact-action-btn {
+    position: relative;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-md);
+    border: none;
+    background: none;
+    color: var(--memori-text-color);
+    cursor: pointer;
+    font-size: var(--memori-text-size-small);
+    text-align: left;
+    transition: background-color 0.15s ease;
 }
 
-.memori-artifact-action-icon, .memori-artifact-action-icon-fullscreen{
-  width: 16px;
-  height: 16px;
+.memori-artifact-action-icon,
+.memori-artifact-action-icon-fullscreen {
+    width: 16px;
+    height: 16px;
 }
 
-.memori-artifact-action-icon{
-  fill: #000;
+.memori-artifact-action-icon {
+    fill: #000;
 }
 
 .memori-artifact-action-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  transform: none !important;
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: none !important;
 }
 
 .memori-artifact-action-btn:focus {
-  outline: 2px solid var(--memori-primary);
-  outline-offset: 2px;
+    outline: 2px solid var(--memori-primary);
+    outline-offset: 2px;
 }
 
 .memori-artifact-action-btn:active {
-  transform: translateY(0);
+    transform: translateY(0);
 }
 
-.memori-artifact-action-btn:hover:not(:disabled),
+/* .memori-artifact-action-btn:hover:not(:disabled),
 .memori-artifact-action-btn--active {
   background: #f9fafb;
-}
+} */
 
 .memori-artifact-action-btn:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
 
 /* .memori-artifact-action-btn:disabled:hover {
@@ -59,105 +58,102 @@
   transform: none !important;
 } */
 
-
 .memori-artifact-action-btn--active {
-  background: var(--memori-chat-bubble-bg, #fff);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  color: var(--memori-primary);
+    background: var(--memori-main-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    color: var(--memori-primary);
 }
 
 .memori-artifact-action-text {
-  font-size: 0.75rem;
-  font-weight: 500;
+    font-size: 0.75rem;
+    font-weight: var(--memori-text-weight-medium);
 }
 
 /* Fullscreen Button Special Styling */
 .memori-artifact-fullscreen-btn {
-  position: relative;
+    position: relative;
 }
 
 .memori-artifact-fullscreen-btn--active {
-  border-color: var(--memori-primary) !important;
-  background: var(--memori-primary) !important;
-  color: var(--memori-primary-text) !important;
+    border-color: var(--memori-primary) !important;
+    background: var(--memori-primary) !important;
+    color: var(--memori-primary-content) !important;
 }
 
-
 /* Responsive Design */
 
 @media (max-width: 768px) {
+    .memori-artifact-fullscreen-btn {
+        display: none;
+    }
+
+    .memori-artifact-action-btn {
+        min-width: 2.5rem;
+        justify-content: center;
+        padding: 0.5rem;
+    }
 
-  .memori-artifact-fullscreen-btn{
-    display: none;
-  }
-  
-  .memori-artifact-action-btn {
-    min-width: 2.5rem;
-    justify-content: center;
-    padding: 0.5rem;
-  }
-  
-  .memori-artifact-actions-row {
-    gap: 0.25rem;
-  }
+    .memori-artifact-actions-row {
+        gap: 0 var(--memori-spacing-xs);
+    }
 }
 
 @media (max-width: 480px) {
-  .memori-artifact-actions-row {
-    gap: 0.125rem;
-  }
-  
-  .memori-artifact-action-btn {
-    min-width: 2.25rem;
-    padding: 0.375rem;
-    font-size: 0.75rem;
-  }
+    .memori-artifact-actions-row {
+        gap: 0 var(--memori-spacing-xs);
+    }
+
+    .memori-artifact-action-btn {
+        min-width: 2.25rem;
+        padding: 0.375rem;
+        font-size: 0.75rem;
+    }
 }
 
 /* Loading State */
 
 /* Icon Sizing */
-.memori-artifact-action-btn .memori-button--icon, .memori-artifact-action-icon-fullscreen {
-  font-size: 1rem;
-  line-height: 1;
+.memori-artifact-action-btn .memori-button--icon,
+.memori-artifact-action-icon-fullscreen {
+    font-size: var(--memori-text-size-base);
+    line-height: 1;
 }
 
 /* Remove unused styles */
 
-.memori-artifact-action-icon-fullscreen{
-  fill: #fff
+.memori-artifact-action-icon-fullscreen {
+    fill: #fff;
 }
 
-
 /* Animation for Copy Feedback */
 @keyframes copyFeedback {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.05);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.8;
+        transform: scale(1.05);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
 }
 
 .memori-artifact-action-btn.copied {
-  animation: copyFeedback 0.3s ease;
+    animation: copyFeedback 0.3s ease;
 }
 
 /* Tooltip Support */
 .memori-artifact-action-btn[title] {
-  position: relative;
+    position: relative;
 }
 
 /* Horizontal Button Row Styles */
 .memori-artifact-actions-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--memori-spacing-sm);
 }

package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.tsx

@@ -7,16 +7,17 @@
 import React, { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
-import Button from '../../../ui/Button';
+import { Button, Dropdown } from '@memori.ai/ui';
 import { ArtifactData } from '../../types/artifact.types';
-import Download from '../../../icons/Download';
-import Link from '../../../icons/Link';
-import Fullscreen from '../../../icons/Fullscreen';
-import FullscreenExit from '../../../icons/FullscreenExit';
-import PrintIcon from '../../../icons/Print';
+import {
+  Download,
+  Link as LinkIcon,
+  Maximize,
+  Minimize,
+  Printer,
+  MoreVertical,
+} from 'lucide-react';
 import { CopyButtonWithDropdown } from './';
-import { Menu, Transition } from '@headlessui/react';
-import MenuVertical from '../../../icons/MenuVertical';
 
 const ArtifactActions: React.FC<{
   artifact: ArtifactData;
@@ -185,63 +186,52 @@ const ArtifactActions: React.FC<{
           loading={loading}
           className="memori-artifact-action-btn"
         />
-       {isMobile && <Menu as="div" className="memori-copy-menu-wrapper">
-          <Menu.Button as="div" className="memori-copy-button-trigger">
-            <Button
-              disabled={loading}
-              className={cx(
-                'memori-button',
-                'memori-button--more-options',
-                'memori-button--icon-only'
+       {isMobile && (
+          <Dropdown className="memori-copy-menu-wrapper">
+            <Dropdown.Trigger
+              showChevron={false}
+              className="memori-copy-button-trigger"
+              render={(props: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+                <Button
+                  {...props}
+                  disabled={loading}
+                  variant="ghost"
+                  title="More copy options"
+                >
+                  <MoreVertical className="memori-artifact-action-icon" />
+                </Button>
               )}
-              ghost
-              title="More copy options"
-            >
-              <MenuVertical className="memori-artifact-action-icon" />
-            </Button>
-          </Menu.Button>
-
-          <Transition
-            as={React.Fragment}
-            enter="memori-copy-dropdown-enter"
-            enterFrom="memori-copy-dropdown-enter-from"
-            enterTo="memori-copy-dropdown-enter-to"
-            leave="memori-copy-dropdown-leave"
-            leaveFrom="memori-copy-dropdown-leave-from"
-            leaveTo="memori-copy-dropdown-leave-to"
-          >
-            <Menu.Items className="memori-copy-dropdown" style={{minWidth: '200px'}}>
+            />
+            <Dropdown.Menu className="memori-copy-dropdown" style={{ minWidth: '200px' }}>
               <div className="memori-copy-dropdown-list">
                 <Button
                   onClick={handlePrint}
                   disabled={loading}
                   className="memori-artifact-action-btn memori-artifact-action-btn--print"
-                  ghost
-                  icon={<PrintIcon className="memori-artifact-action-icon" />}
+                  variant="ghost"
+                  icon={<Printer className="memori-artifact-action-icon" />}
                   title={t('artifact.print') || 'Print'}
                 >
                   <span className="memori-artifact-action-text">
                     {t('artifact.print') || 'Print'}
                   </span>
                 </Button>
-
                 <Button
                   onClick={handleOpenExternal}
                   disabled={loading}
                   className="memori-artifact-action-btn memori-artifact-action-btn--external"
-                  ghost
-                  icon={<Link className="memori-artifact-action-icon" />}
+                  variant="ghost"
+                  icon={<LinkIcon className="memori-artifact-action-icon" />}
                   title={t('artifact.external') || 'External'}
                 >
                   <span className="memori-artifact-action-text">
                     {t('artifact.external') || 'External'}
                   </span>
                 </Button>
-
               </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>}
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
       </div>
     </div>
   );