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

package/src/components/Snippet/Snippet.css

@@ -3,7 +3,9 @@
     overflow: hidden;
     width: 100%;
     min-width: 0;
-    border: 1px solid #e5e7eb;
+    max-width: 100%;
+    box-sizing: border-box;
+    /* border: 1px solid #e5e7eb; */
     border-radius: 0.5rem;
     background: #f8fafc;
 }
@@ -13,28 +15,52 @@
     display: flex;
     width: 100%;
     min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-direction: column;
 }
 
 .memori-snippet pre {
+    width: 100%;
     min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     padding: 1rem;
     border: none;
     border-radius: 0;
     margin: 0;
     background: transparent;
     font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 0.875rem;
-    line-height: 1.6;
+    font-size: var(--memori-text-size-small);
+    line-height: var(--memori-text-line-relaxed);
     overflow-x: auto;
     white-space: pre-wrap;
     word-break: break-word;
     word-wrap: break-word;
 }
 
-pre[class*="language-"] {
+pre[class*='language-'] {
     margin: 0 !important;
 }
+
+/* Override Prism theme defaults (pre/code[class*="language-"]) which force
+   white-space: pre and disable word-wrap. Without these overrides, long
+   unbreakable tokens make the snippet card overflow its container on mobile. */
+.memori-snippet pre[class*='language-'],
+.memori-snippet code[class*='language-'] {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    word-break: break-word;
+    word-spacing: normal;
+    word-wrap: break-word;
+}
+
+.memori-snippet pre[class*='language-'] {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow-x: auto;
+}
 /* Preview mode: full content with max height and scroll */
 .memori-snippet--preview .memori-snippet--content {
     display: flex;
@@ -50,16 +76,27 @@ pre[class*="language-"] {
     overflow-y: auto;
 }
 
-
-
 .memori-snippet code {
+    display: block;
+    max-width: 100%;
     padding: 0;
     border-radius: 0;
     background: transparent;
-    color: #374151;
+    color: var(--memori-text-color);
     font-family: inherit;
 }
 
+@media (max-width: 768px) {
+    .memori-snippet pre {
+        padding: 0.875rem;
+    }
+
+    .memori-snippet--copy-wrapper {
+        right: 0.375rem;
+        padding: 0.375rem;
+    }
+}
+
 .memori-snippet--copy-wrapper {
     position: absolute;
     z-index: 10;
@@ -70,13 +107,13 @@ pre[class*="language-"] {
     padding: 0.5rem;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
-    border-radius: 6px;
+    border-radius: var(--memori-radius-box);
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background: rgba(0, 0, 0, 0.05);
-    background-color: #f8fafc;
+    background-color: color-mix(in oklch, var(--memori-main-background) 38%, transparent);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-    gap: 0.5rem;
+    gap: var(--memori-spacing-sm);
 }
 
 button.memori-snippet--copy-button {
@@ -84,7 +121,7 @@ button.memori-snippet--copy-button {
     height: 32px !important;
     padding: 0;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 6px !important;
+    border-radius: 0.5rem !important;
     background: rgba(0, 0, 0, 0.05);
     transition: all 0.2s ease;
 }
@@ -104,14 +141,14 @@ button.memori-snippet--copy-button:active {
 button.memori-snippet--copy-button svg {
     width: 14px;
     height: 14px;
-    color: #6b7280;
+    color: var(--memori-text-color);
 }
 
 .memori-snippet--copied-text {
     animation: fadeInOut 0.3s ease;
-    color: #10b981;
+    color: var(--memori-text-color);
     font-size: 0.75rem;
-    font-weight: 600;
+    font-weight: var(--memori-text-weight-semibold);
     letter-spacing: 0.05em;
     text-transform: uppercase;
 }
@@ -133,10 +170,9 @@ button.memori-snippet--copy-button svg {
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     margin: 0;
     background: rgba(0, 0, 0, 0.02);
-    color: #6b7280;
+    color: var(--memori-text-color);
     font-size: 0.8rem;
     font-style: normal;
-    font-weight: 500;
+    font-weight: var(--memori-text-weight-medium);
     text-align: left;
 }
-

package/src/components/Snippet/Snippet.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import Button from '../ui/Button';
-import Copy from '../icons/Copy';
+import { Button } from '@memori.ai/ui';
+import { Copy } from 'lucide-react';
 import { prismSyntaxLangs } from '../../helpers/constants';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
@@ -131,12 +131,12 @@ const Snippet = ({
               <span className="memori-snippet--copied-text">{t('copied') || 'Copied!'}</span>
             )}
             <Button
-              padded={false}
-              ghost
+              variant="ghost"
+              shape="circle"
               className="memori-snippet--copy-button"
               title={t('copy') || 'Copy'}
               icon={<Copy />}
-              onClick={handleCopy}
+              onMouseDown={handleCopy}
             />
           </div>
         )}

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

@@ -25,22 +25,24 @@ exports[`renders SnippetUpload with css code 1`] = `
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -86,22 +88,24 @@ exports[`renders SnippetUpload with html code 1`] = `
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -147,22 +151,24 @@ exports[`renders SnippetUpload with js code 1`] = `
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -232,22 +238,24 @@ exports[`renders SnippetUpload with js code without line numbers 1`] = `
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -337,22 +345,24 @@ export default Snippet;
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -442,22 +452,24 @@ export default Snippet;
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -503,22 +515,24 @@ exports[`renders SnippetUpload with text 1`] = `
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
@@ -564,22 +578,24 @@ exports[`renders SnippetUpload with text as fallback 1`] = `
         class="memori-snippet--copy-wrapper"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only memori-snippet--copy-button"
+          tabindex="0"
           title="copy"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
+              class="lucide lucide-copy"
               fill="none"
-              focusable="false"
-              role="img"
+              height="24"
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="1.5"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect