@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -17,12 +17,67 @@
     --artifact-drawer-radius-lg: var(--memori-radius-box);
 }
 
-/* Override drawer width for ArtifactDrawer */
-.memori-artifact-panel-drawer {
-    --memori-drawer--width-lg: 46%;
-    /* background-color: var(--memori-main-background); */
-    /* Ensure drawer doesn't block left side chat interaction */
-    pointer-events: none;
+/*
+ * Split-panel width for ArtifactDrawer.
+ * Must stay in sync with HiddenChat's sidebar shift (`right: 55%`).
+ * @memori.ai/ui Drawer uses `--memori-modal-size-*` (not the legacy
+ * `--memori-drawer--width-*` tokens), and size="md" maps to `--memori-modal-size-md`.
+ */
+.memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer {
+    --memori-modal-size-md: 55%;
+    width: 55%;
+    max-width: 100vw;
+}
+
+@media (max-width: 1260px) {
+    .memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer,
+    .memori-drawer--right.memori-artifact-panel-drawer-fullscreen {
+        --memori-modal-size-md: 100%;
+        width: 100% !important;
+        max-width: 100% !important;
+        height: 100% !important;
+        max-height: 100dvh !important;
+        border-radius: 0;
+        border-left: none;
+        box-shadow: none;
+    }
+
+    .memori-artifact-panel-drawer .memori-drawer__body,
+    .memori-artifact-panel-drawer-fullscreen .memori-drawer__body {
+        display: flex;
+        overflow: hidden;
+        height: 100%;
+        min-height: 0;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding: 0;
+    }
+}
+
+.memori-drawer--right.memori-artifact-panel-drawer-fullscreen {
+    --memori-modal-size-md: 100%;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+/* Hide the Drawer backdrop so the chat remains fully visible on the left
+   (applies to the mobile/legacy Drawer-overlay path) */
+body:has(.memori-artifact-panel-drawer) .memori-drawer__backdrop,
+body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
+.memori-widget:has(.memori-artifact-panel-drawer) .memori-drawer__backdrop,
+.memori-widget:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop {
+    display: none !important;
+}
+
+/* Inline layout column — fills the layout flex slot, not a fixed overlay.
+   min-height: 0 (not 100vh) so opening the artifact cannot expand the page. */
+.memori-artifact-layout-column {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
 }
 
 /* Main Drawer Container (Mobile Only) */
@@ -32,9 +87,6 @@
     font-family: var(--memori-font-family);
 }
 
-.memori-artifact-panel-drawer > div > div > div {
-    pointer-events: auto;
-}
 /* Web Split Panel Container */
 .memori-artifact-panel {
     position: relative;
@@ -68,7 +120,7 @@
     flex-flow: column;
     align-items: flex-start;
     justify-content: space-between;
-    padding-top: 1rem;
+    padding: 1rem var(--memori-spacing-md) 0;
 }
 
 .memori-artifact-panel--header-content {
@@ -78,10 +130,8 @@
 
 .memori-artifact-panel--title {
     overflow: hidden;
-    /* max-width: 90%; */
+    max-width: 100%;
     margin: 0 0 0.75rem;
-    background: white;
-    background-clip: text;
     color: var(--artifact-drawer-text);
     font-size: var(--memori-text-size-heading-large);
     font-weight: var(--memori-text-weight-bold);
@@ -175,13 +225,7 @@
 }
 
 .memori-artifact-panel--main::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 1px;
-    background: white;
-    content: '';
+    display: none;
 }
 
 .memori-artifact-drawer--backdrop {
@@ -310,13 +354,6 @@
     gap: var(--memori-spacing-sm);
 }
 
-.memori-artifact-panel-drawer-fullscreen > div > div > div {
-    width: 100% !important;
-    max-width: 100% !important;
-    box-shadow: none !important;
-    transform: translateX(0) !important;
-}
-
 .memori-artifact-drawer--header-actions {
     z-index: 100;
     display: flex;
@@ -595,6 +632,8 @@
     display: flex;
     flex-flow: row;
     align-items: center;
+    padding: 0 var(--memori-spacing-md);
+    padding-bottom: var(--memori-spacing-sm);
     margin-top: var(--memori-spacing-lg);
     /* justify-content: space-between; */
     gap: var(--memori-spacing-sm);
@@ -642,14 +681,8 @@
 
 .memori-button--more-options {
     padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    border: 1px solid #e1e5e9;
+    border: 1px solid var(--memori-border-color, #e1e5e9);
     border-radius: var(--memori-radius-box);
-    border-top-color: rgb(225, 229, 233);
-    border-right-color: rgb(225, 229, 233);
-    border-bottom-color: rgb(225, 229, 233);
-    border-left-color: rgb(225, 229, 233);
-    border-bottom-right-radius: 6px;
-    border-top-right-radius: 6px;
 }
 
 .memori-artifact-drawer--sidebar {
@@ -658,10 +691,35 @@
     padding: 1rem;
     padding-left: 1rem;
     border-radius: var(--memori-radius-box);
-    border-left: var(--memori-border) solid var(--memori-border-color);
+    border-left: var(--memori-border) solid var(--memori-primary);
     background: var(--memori-primary-subtle);
 }
 
+/* Match website_assistant / hidden_chat sidebar close — never outline primary fill */
+.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button,
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled),
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:active:not(:disabled, .memori-button--disabled) {
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    background: transparent;
+    box-shadow: none;
+    color: var(--memori-text-color, #111827);
+    transform: none;
+}
+
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled) {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
+}
+
+.memori-widget .memori-artifact-drawer--close .memori-icon-close {
+    width: 1.125rem;
+    height: 1.125rem;
+    fill: none;
+    stroke: currentColor;
+}
+
 /* Mobile Drawer Panel */
 .memori-artifact-drawer--panel-mobile {
     position: fixed;
@@ -682,32 +740,128 @@
     font-family: var(--memori-font-family);
 }
 
-.memori-artifact-drawer--close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-    /* background: var(--artifact-drawer-bg); */
-    margin-left: auto;
-}
-
 .memori-artifact-actions {
     flex: 1;
 }
 
 @media (max-width: 1024px) {
-    .memori-artifact-panel-drawer > div > div > div {
-        z-index: 0;
-        box-shadow: none !important;
-    }
-
     .memori-artifact-drawer-fullscreen {
         display: none;
     }
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
+@media (max-width: 1260px) {
+    /* Hide the empty desktop-only action bar on mobile — all actions live in top-right */
+    .memori-artifact-drawer-container-actions {
+        display: none;
+    }
+
+    /* Mobile header: full-width toolbar — tabs left, more+close right */
+    .memori-artifact-drawer-top-right {
+        display: flex;
+        overflow: visible;
+        width: 100%;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+        border-bottom: 1px solid var(--memori-border-color);
+        margin: 0;
+        background: var(--memori-secondary-background);
+        gap: var(--memori-spacing-sm);
+    }
+
+    .memori-artifact-drawer-top-right-actions {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        margin-left: auto;
+        gap: var(--memori-spacing-sm);
+    }
+
+    .memori-artifact-drawer-top-right .memori-mobile-actions-menu {
+        margin-left: 0;
+    }
+
+    /* Tabs.Root from @memori.ai/ui defaults to width:100% — that pushes actions off-screen */
+    .memori-artifact-drawer-top-right .memori-tab-switch,
+    .memori-artifact-drawer-top-right .memori-tabs {
+        width: auto;
+        max-width: fit-content;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        /* border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent); */
+    }
+
+    .memori-artifact-drawer-top-right .memori-tab-switch__tab {
+        min-width: 40px;
+        flex: 0 0 auto;
+    }
+
+    /* Make mobile more-options match header toolbar buttons */
+    .memori-artifact-drawer-top-right .memori-button--more-options {
+        display: flex;
+        width: 2.5rem;
+        min-width: 2.5rem;
+        height: 2.5rem;
+        min-height: 2.5rem;
+        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, 0.5rem);
+        margin-left: 0;
+    }
+
+    .memori-artifact-drawer-top-right .memori-button--more-options: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);
+    }
+
+    /* Content fills remaining viewport under the toolbar (no floating card) */
+    .memori-artifact-panel-drawer .memori-artifact-panel--content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-panel--content {
+        overflow: hidden;
+        width: 100%;
+        height: auto;
+        min-height: 0;
+        max-height: none;
+        flex: 1 1 auto;
+        gap: 0;
+    }
+
+    .memori-artifact-panel-drawer .memori-artifact-panel--main,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-panel--main {
+        overflow: hidden;
+        min-height: 0;
+        flex: 1 1 auto;
+    }
+
+    .memori-artifact-panel-drawer .memori-artifact-preview,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-preview,
+    .memori-artifact-panel-drawer .memori-artifact-preview-content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-preview-content,
+    .memori-artifact-panel-drawer .memori-artifact-tab-content--active,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-tab-content--active,
+    .memori-artifact-panel-drawer .memori-artifact-content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-content {
+        border-radius: 0;
+    }
+
+    .memori-artifact-panel-drawer .memori-artifact-tab-content--active,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-tab-content--active {
+        padding: 0;
+    }
+
+    .memori-artifact-panel-drawer .memori-artifact-preview-content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-preview-content {
+        background: transparent;
+    }
+}
+
+@media (max-width: 1260px) {
     /* Mobile header actions */
     .memori-artifact-drawer-header-actions {
         display: none;
@@ -811,8 +965,8 @@
     }
 }
 
-@media (min-width: 769px) {
-    /* Hide mobile drawer on desktop */
+@media (min-width: 1261px) {
+    /* Hide mobile drawer on desktop — inline column layout takes over */
     .memori-artifact-drawer {
         display: none !important;
     }
@@ -823,18 +977,6 @@
     }
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-    .memori-artifact-drawer--panel {
-        width: 70%;
-    }
-}
-
-@media (min-width: 1025px) {
-    .memori-artifact-drawer--panel {
-        width: 50%;
-    }
-}
-
 /* Fullscreen Mode */
 .memori-artifact-drawer--fullscreen .memori-artifact-drawer--panel {
     width: 100% !important;
@@ -871,10 +1013,6 @@
     justify-content: flex-end;
 }
 
-.memori-artifact-drawer--close-desktop {
-    margin-left: 0 !important;
-}
-
 .memori-artifact-drawer-container-actions--chatlog {
     padding: 0rem 1rem;
 }
@@ -888,139 +1026,82 @@
     z-index: 1001;
     display: flex;
     align-items: center;
-    padding: 0rem 1rem;
     gap: var(--memori-spacing-sm);
 }
 
-/* Mobile Actions Dropdown */
+/* Mobile Actions Dropdown — portaled popup (not under .top-right) */
 .memori-mobile-actions-menu {
     position: relative;
     display: inline-block;
-    margin-left: auto;
 }
 
 .memori-mobile-actions-trigger {
     display: inline-block;
 }
 
+.memori-dropdown__popup.memori-mobile-dropdown,
 .memori-mobile-dropdown {
-    position: absolute;
-    z-index: 1000;
-    top: 100%;
-    right: 0;
+    z-index: 1100;
     min-width: 200px;
-    border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--artifact-drawer-radius);
-    margin-top: var(--memori-spacing-sm);
-    backdrop-filter: blur(10px);
-    background: var(--artifact-drawer-bg);
-    box-shadow: var(--artifact-drawer-shadow);
-}
-
-/* Mobile-specific dropdown positioning */
-@media (max-width: 768px) {
-    .memori-artifact-drawer--close {
-        margin-left: 0;
-    }
-
-    .memori-artifact-panel--header {
-        margin-bottom: var(--memori-spacing-sm);
-    }
-
-    .memori-mobile-dropdown {
-        right: 0;
-        left: auto;
-        min-width: 180px;
-        max-width: calc(100vw - 2rem);
-    }
-
-    .memori-mobile-dropdown-list {
-        padding: 0.25rem;
-        gap: var(--memori-spacing-xs);
-    }
-
-    .memori-mobile-dropdown .memori-artifact-action-btn {
-        min-height: 44px; /* Ensure touch-friendly size */
-        padding: 0.625rem 0.75rem;
-        font-size: var(--memori-text-size-small);
-    }
-
-    .memori-mobile-dropdown .memori-artifact-action-text {
-        color: var(--artifact-drawer-text);
-        font-size: 0.8125rem;
-        font-weight: var(--memori-text-weight-semibold);
-    }
-
-    .memori-mobile-dropdown .memori-artifact-action-icon {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-    }
-}
-
-.memori-mobile-dropdown-list {
-    display: flex;
-    flex-direction: column;
-    padding: 0.5rem;
-    gap: var(--memori-spacing-xs);
+    max-width: min(280px, calc(100vw - 1.5rem));
+    padding: var(--memori-spacing-xs);
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-box);
+    /* Soft contrast vs canvas — not pure white / not heavy fill */
+    background: color-mix(in srgb, var(--memori-text-color) 6%, var(--memori-secondary-background)) !important;
+    box-shadow: var(--memori-shadow-lg);
+    color: var(--memori-text-color);
 }
 
-.memori-mobile-dropdown .memori-artifact-action-btn {
+.memori-mobile-dropdown .memori-artifact-action-btn,
+.memori-mobile-dropdown .memori-dropdown__item,
+.memori-dropdown__popup.memori-mobile-dropdown .memori-dropdown__item {
     display: flex;
     width: 100%;
+    min-height: 40px;
     align-items: center;
     justify-content: flex-start;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    padding: 0.5rem 0.75rem;
     border: 1px solid transparent;
-    border-radius: var(--artifact-drawer-radius);
+    border-radius: var(--memori-radius-box);
     background: transparent;
-    color: var(--artifact-drawer-text);
-    text-align: left;
-    transition: all 0.2s ease;
-}
-
-.memori-mobile-dropdown .memori-artifact-action-btn:hover {
-    border-color: var(--memori-primary);
-    background: var(--memori-primary-subtle);
-    color: var(--memori-primary);
-}
-
-.memori-mobile-dropdown .memori-artifact-action-text {
-    overflow: visible;
-    margin-left: var(--memori-spacing-sm);
-    color: inherit;
+    color: var(--memori-text-color);
     font-size: var(--memori-text-size-small);
     font-weight: var(--memori-text-weight-medium);
-    white-space: nowrap;
-}
-
-/* Mobile Dropdown Animations */
-.memori-mobile-dropdown-enter {
-    transition: all 0.2s ease-out;
-}
-
-.memori-mobile-dropdown-enter-from {
-    opacity: 0;
-    transform: translateY(-10px) scale(0.95);
+    gap: var(--memori-spacing-sm);
+    text-align: left;
 }
 
-.memori-mobile-dropdown-enter-to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+.memori-mobile-dropdown .memori-artifact-action-btn:hover,
+.memori-mobile-dropdown .memori-dropdown__item:hover:not([data-disabled]),
+.memori-dropdown__popup.memori-mobile-dropdown .memori-dropdown__item:hover:not([data-disabled]),
+.memori-dropdown__popup.memori-mobile-dropdown .memori-dropdown__item[data-highlighted]:not([data-disabled]) {
+    border-color: transparent;
+    background: color-mix(in srgb, var(--memori-text-color) 10%, transparent) !important;
+    color: var(--memori-text-color);
 }
 
-.memori-mobile-dropdown-leave {
-    transition: all 0.15s ease-in;
+.memori-mobile-dropdown .memori-artifact-action-icon,
+.memori-mobile-dropdown .memori-dropdown__item-icon,
+.memori-mobile-dropdown .memori-dropdown__item-icon svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: inherit;
+    fill: none !important;
+    stroke: currentColor;
 }
 
-.memori-mobile-dropdown-leave-from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
+@media (max-width: 1260px) {
+    .memori-artifact-panel--header {
+        margin-bottom: var(--memori-spacing-sm);
+    }
 
-.memori-mobile-dropdown-leave-to {
-    opacity: 0;
-    transform: translateY(-10px) scale(0.95);
+    .memori-dropdown__popup.memori-mobile-dropdown,
+    .memori-mobile-dropdown {
+        min-width: 180px;
+        max-width: calc(100vw - 1.5rem);
+    }
 }
 
 /* Focus and Accessibility */