collabmd 0.1.23 → 0.1.26

package/src/client/presentation/file-explorer-view.js

@@ -35,24 +35,36 @@ function findNodeByPath(nodes = [], pathValue = '') {
   return null;
 }
 
+const MOBILE_LONG_PRESS_DELAY_MS = 420;
+const MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX = 10;
+
 export class FileExplorerView {
   constructor({
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
+    onDirectorySelect,
     onDirectoryToggle,
     onFileContextMenu,
     onFileSelect,
     onSearchChange,
     onTreeContextMenu,
   }) {
+    this.onDirectorySelect = onDirectorySelect;
     this.onDirectoryToggle = onDirectoryToggle;
     this.onFileContextMenu = onFileContextMenu;
     this.onFileSelect = onFileSelect;
     this.onSearchChange = onSearchChange;
     this.onTreeContextMenu = onTreeContextMenu;
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
     this.lastRenderMode = 'tree';
+    this.longPressTimer = 0;
+    this.longPressContext = null;
+    this.suppressedActivationTarget = null;
+    this.contextMenuCloseHandler = null;
+    this.actionSheetCloseHandler = null;
   }
 
   initialize() {
@@ -68,6 +80,33 @@ export class FileExplorerView {
       event.preventDefault();
       this.onTreeContextMenu?.(event);
     });
+
+    this.treeContainer?.addEventListener('pointerdown', (event) => {
+      if (event.target.closest('.file-tree-item')) {
+        return;
+      }
+
+      this.startLongPress(event, () => {
+        this.onTreeContextMenu?.({
+          clientX: Number(event.clientX || 0),
+          clientY: Number(event.clientY || 0),
+          preventDefault() {},
+          target: this.treeContainer,
+        });
+      }, this.treeContainer);
+    });
+    this.treeContainer?.addEventListener('pointermove', (event) => {
+      this.handleLongPressPointerMove(event);
+    }, { passive: true });
+    this.treeContainer?.addEventListener('pointerup', () => {
+      this.cancelLongPress();
+    });
+    this.treeContainer?.addEventListener('pointercancel', () => {
+      this.cancelLongPress();
+    });
+    this.treeContainer?.addEventListener('scroll', () => {
+      this.cancelLongPress();
+    }, { passive: true });
   }
 
   render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
@@ -75,6 +114,10 @@ export class FileExplorerView {
       return;
     }
 
+    if (this.searchInput && this.searchInput.value !== searchQuery) {
+      this.searchInput.value = searchQuery;
+    }
+
     if (searchQuery) {
       this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
@@ -142,13 +185,18 @@ export class FileExplorerView {
     }
 
     const fragment = document.createDocumentFragment();
-    for (const filePath of matches) {
+    for (const match of matches) {
+      if (match.type === 'directory') {
+        fragment.appendChild(this.createSearchDirectoryItem(match));
+        continue;
+      }
+
       fragment.appendChild(this.createFileItem({
         activeFilePath,
         depth: 0,
-        filePath,
-        fileType: getVaultTreeNodeType(filePath) ?? 'file',
-        name: getPathLeaf(filePath),
+        filePath: match.path,
+        fileType: match.type || (getVaultTreeNodeType(match.path) ?? 'file'),
+        name: match.name || getPathLeaf(match.path),
       }));
     }
     this.treeContainer.appendChild(fragment);
@@ -215,13 +263,19 @@ export class FileExplorerView {
       <span class="file-tree-name">${escapeHtml(node.name)}</span>
     `;
 
-    button.addEventListener('click', () => {
+    button.addEventListener('click', (event) => {
+      if (this.consumeSuppressedActivation(button, event)) {
+        return;
+      }
       this.onDirectoryToggle?.(node.path);
     });
     button.addEventListener('contextmenu', (event) => {
       event.preventDefault();
       this.onFileContextMenu?.(event, { directoryPath: node.path, type: 'directory' });
     });
+    this.bindLongPress(button, () => {
+      this.onFileContextMenu?.(this.createLongPressEvent(button), { directoryPath: node.path, type: 'directory' });
+    });
 
     wrapper.appendChild(button);
     this.renderedDirectoryWrappers.set(node.path, wrapper);
@@ -243,6 +297,33 @@ export class FileExplorerView {
     return wrapper;
   }
 
+  createSearchDirectoryItem(node) {
+    const button = document.createElement('button');
+    button.className = 'file-tree-item file-tree-dir';
+    button.style.setProperty('--depth', 0);
+    button.dataset.depth = 0;
+    button.innerHTML = `
+      <svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+      <span class="file-tree-name">${escapeHtml(node.name || getPathLeaf(node.path))}</span>
+    `;
+
+    button.addEventListener('click', (event) => {
+      if (this.consumeSuppressedActivation(button, event)) {
+        return;
+      }
+      this.onDirectorySelect?.(node.path);
+    });
+    button.addEventListener('contextmenu', (event) => {
+      event.preventDefault();
+      this.onFileContextMenu?.(event, { directoryPath: node.path, type: 'directory' });
+    });
+    this.bindLongPress(button, () => {
+      this.onFileContextMenu?.(this.createLongPressEvent(button), { directoryPath: node.path, type: 'directory' });
+    });
+
+    return button;
+  }
+
   rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
     const wrapper = this.renderedDirectoryWrappers.get(parentPath);
     const parentNode = findNodeByPath(tree, parentPath);
@@ -301,11 +382,15 @@ export class FileExplorerView {
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';
+    const isDrawio = fileType === 'drawio';
     const isExcalidraw = fileType === 'excalidraw';
     const isImage = fileType === 'image';
     const isMermaid = fileType === 'mermaid';
     const isPlantUml = fileType === 'plantuml';
 
+    if (isDrawio) {
+      button.classList.add('is-drawio');
+    }
     if (isExcalidraw) {
       button.classList.add('is-excalidraw');
     }
@@ -326,22 +411,133 @@ export class FileExplorerView {
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.innerHTML = `
-      ${this.getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml })}
+      ${this.getFileIconSvg({ isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
     `;
 
-    button.addEventListener('click', () => {
+    button.addEventListener('click', (event) => {
+      if (this.consumeSuppressedActivation(button, event)) {
+        return;
+      }
       this.onFileSelect?.(filePath);
     });
     button.addEventListener('contextmenu', (event) => {
       event.preventDefault();
       this.onFileContextMenu?.(event, { filePath, type: 'file' });
     });
+    this.bindLongPress(button, () => {
+      this.onFileContextMenu?.(this.createLongPressEvent(button), { filePath, type: 'file' });
+    });
 
     return button;
   }
 
-  getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml }) {
+  isMobileViewport() {
+    return Boolean(this.mobileBreakpointQuery?.matches);
+  }
+
+  bindLongPress(element, callback) {
+    if (!(element instanceof HTMLElement) || typeof callback !== 'function') {
+      return;
+    }
+
+    element.addEventListener('pointerdown', (event) => {
+      this.startLongPress(event, callback, element);
+    });
+    element.addEventListener('pointermove', (event) => {
+      this.handleLongPressPointerMove(event);
+    }, { passive: true });
+    element.addEventListener('pointerup', () => {
+      this.cancelLongPress();
+    });
+    element.addEventListener('pointercancel', () => {
+      this.cancelLongPress();
+    });
+    element.addEventListener('pointerleave', () => {
+      this.cancelLongPress();
+    });
+  }
+
+  startLongPress(event, callback, target = null) {
+    if (!this.isMobileViewport()) {
+      return;
+    }
+
+    if (!['touch', 'pen'].includes(String(event.pointerType || ''))) {
+      return;
+    }
+
+    if (Number(event.button ?? 0) !== 0) {
+      return;
+    }
+
+    this.cancelLongPress();
+    this.longPressContext = {
+      callback,
+      pointerId: event.pointerId,
+      startX: Number(event.clientX || 0),
+      startY: Number(event.clientY || 0),
+      target: target ?? event.currentTarget ?? event.target ?? null,
+    };
+    this.longPressTimer = window.setTimeout(() => {
+      const activeContext = this.longPressContext;
+      this.longPressTimer = 0;
+      if (!activeContext) {
+        return;
+      }
+
+      this.suppressedActivationTarget = activeContext.target;
+      activeContext.callback();
+      this.longPressContext = null;
+    }, MOBILE_LONG_PRESS_DELAY_MS);
+  }
+
+  handleLongPressPointerMove(event) {
+    if (!this.longPressContext || event.pointerId !== this.longPressContext.pointerId) {
+      return;
+    }
+
+    const deltaX = Math.abs(Number(event.clientX || 0) - this.longPressContext.startX);
+    const deltaY = Math.abs(Number(event.clientY || 0) - this.longPressContext.startY);
+    if (deltaX > MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX || deltaY > MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX) {
+      this.cancelLongPress();
+    }
+  }
+
+  cancelLongPress() {
+    if (this.longPressTimer) {
+      window.clearTimeout(this.longPressTimer);
+      this.longPressTimer = 0;
+    }
+    this.longPressContext = null;
+  }
+
+  createLongPressEvent(target) {
+    return {
+      clientX: this.longPressContext?.startX ?? 0,
+      clientY: this.longPressContext?.startY ?? 0,
+      preventDefault() {},
+      stopPropagation() {},
+      target,
+    };
+  }
+
+  consumeSuppressedActivation(target, event) {
+    if (this.suppressedActivationTarget !== target) {
+      return false;
+    }
+
+    this.suppressedActivationTarget = null;
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    return true;
+  }
+
+  getFileIconSvg({ isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml }) {
+    if (isDrawio) {
+      return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>';
+    }
+
     if (isExcalidraw) {
       return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>';
     }
@@ -368,6 +564,11 @@ export class FileExplorerView {
       return;
     }
 
+    if (this.isMobileViewport()) {
+      this.showActionSheet(items);
+      return;
+    }
+
     const menu = document.createElement('div');
     menu.className = 'file-context-menu';
 
@@ -393,13 +594,61 @@ export class FileExplorerView {
     const close = (closeEvent) => {
       if (!menu.contains(closeEvent.target)) {
         this.removeContextMenu();
-        document.removeEventListener('click', close);
       }
     };
+    this.contextMenuCloseHandler = close;
     setTimeout(() => document.addEventListener('click', close), 0);
   }
 
+  showActionSheet(items) {
+    const backdrop = document.createElement('button');
+    backdrop.type = 'button';
+    backdrop.className = 'file-action-sheet-backdrop';
+    backdrop.setAttribute('aria-label', 'Close file actions');
+
+    const sheet = document.createElement('div');
+    sheet.className = 'file-action-sheet';
+
+    items.forEach((item) => {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = `ui-button btn btn-secondary file-action-sheet-item${item.danger ? ' file-context-danger' : ''}`;
+      button.textContent = item.label;
+      button.addEventListener('click', () => {
+        this.removeContextMenu();
+        item.onSelect?.();
+      });
+      sheet.appendChild(button);
+    });
+
+    const cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.className = 'ui-button btn btn-ghost file-action-sheet-item';
+    cancelButton.textContent = 'Cancel';
+    cancelButton.addEventListener('click', () => {
+      this.removeContextMenu();
+    });
+    sheet.appendChild(cancelButton);
+
+    backdrop.addEventListener('click', () => {
+      this.removeContextMenu();
+    });
+
+    document.body.append(backdrop, sheet);
+    this.actionSheetCloseHandler = () => {
+      backdrop.remove();
+      sheet.remove();
+      this.actionSheetCloseHandler = null;
+    };
+  }
+
   removeContextMenu() {
+    this.cancelLongPress();
     document.querySelectorAll('.file-context-menu').forEach((menu) => menu.remove());
+    if (this.contextMenuCloseHandler) {
+      document.removeEventListener('click', this.contextMenuCloseHandler);
+      this.contextMenuCloseHandler = null;
+    }
+    this.actionSheetCloseHandler?.();
   }
 }

package/src/client/presentation/file-tree-state.js

@@ -1,10 +1,21 @@
 import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
-function flattenTree(nodes, files = []) {
+function flattenTree(nodes, files = [], searchEntries = []) {
   for (const node of nodes) {
+    if (!node?.path || !node?.type) {
+      continue;
+    }
+
+    searchEntries.push({
+      name: node.name,
+      path: node.path,
+      type: node.type,
+    });
+
     if (
       node.type === 'file'
       || node.type === 'excalidraw'
+      || node.type === 'drawio'
       || node.type === 'mermaid'
       || node.type === 'plantuml'
       || node.type === 'image'
@@ -14,17 +25,62 @@ function flattenTree(nodes, files = []) {
     }
 
     if (node.type === 'directory' && Array.isArray(node.children)) {
-      flattenTree(node.children, files);
+      flattenTree(node.children, files, searchEntries);
+    }
+  }
+
+  return { files, searchEntries };
+}
+
+function findNodeByPath(nodes, pathValue) {
+  for (const node of nodes ?? []) {
+    if (node?.path === pathValue) {
+      return node;
+    }
+
+    if (node?.type === 'directory' && Array.isArray(node.children)) {
+      const nested = findNodeByPath(node.children, pathValue);
+      if (nested) {
+        return nested;
+      }
     }
   }
 
-  return files;
+  return null;
+}
+
+function countDirectoryDescendants(node) {
+  let directoryCount = 0;
+  let fileCount = 0;
+
+  for (const child of node?.children ?? []) {
+    if (child?.type === 'directory') {
+      directoryCount += 1;
+      const nestedCounts = countDirectoryDescendants(child);
+      directoryCount += nestedCounts.directoryCount;
+      fileCount += nestedCounts.fileCount;
+      continue;
+    }
+
+    fileCount += 1;
+  }
+
+  return { directoryCount, fileCount };
+}
+
+function replacePathPrefix(pathValue, oldPrefix, newPrefix) {
+  if (pathValue === oldPrefix) {
+    return newPrefix;
+  }
+
+  return `${newPrefix}${pathValue.slice(oldPrefix.length)}`;
 }
 
 export class FileTreeState {
   constructor() {
     this.tree = [];
     this.flatFiles = [];
+    this.flatSearchEntries = [];
     this.activeFilePath = null;
     this.expandedDirs = new Set();
     this.searchQuery = '';
@@ -32,7 +88,9 @@ export class FileTreeState {
 
   setTree(tree) {
     this.tree = Array.isArray(tree) ? tree : [];
-    this.flatFiles = flattenTree(this.tree, []);
+    const flattened = flattenTree(this.tree, [], []);
+    this.flatFiles = flattened.files;
+    this.flatSearchEntries = flattened.searchEntries;
   }
 
   setSearchQuery(value) {
@@ -44,7 +102,20 @@ export class FileTreeState {
       return [];
     }
 
-    return this.flatFiles.filter((path) => path.toLowerCase().includes(this.searchQuery));
+    return this.flatSearchEntries.filter((entry) => entry.path.toLowerCase().includes(this.searchQuery));
+  }
+
+  getNode(pathValue) {
+    return findNodeByPath(this.tree, pathValue);
+  }
+
+  getDirectoryDescendantSummary(pathValue) {
+    const node = this.getNode(pathValue);
+    if (!node || node.type !== 'directory') {
+      return { directoryCount: 0, fileCount: 0 };
+    }
+
+    return countDirectoryDescendants(node);
   }
 
   setActiveFile(filePath) {
@@ -80,4 +151,29 @@ export class FileTreeState {
       this.expandedDirs.add(currentPath);
     }
   }
+
+  replaceExpandedDirectoryPrefix(oldPath, newPath) {
+    const nextExpandedDirs = new Set();
+    this.expandedDirs.forEach((pathValue) => {
+      if (pathValue === oldPath || pathValue.startsWith(`${oldPath}/`)) {
+        nextExpandedDirs.add(replacePathPrefix(pathValue, oldPath, newPath));
+        return;
+      }
+
+      nextExpandedDirs.add(pathValue);
+    });
+    this.expandedDirs = nextExpandedDirs;
+  }
+
+  removeExpandedDirectoryPrefix(pathValue) {
+    const nextExpandedDirs = new Set();
+    this.expandedDirs.forEach((expandedPath) => {
+      if (expandedPath === pathValue || expandedPath.startsWith(`${pathValue}/`)) {
+        return;
+      }
+
+      nextExpandedDirs.add(expandedPath);
+    });
+    this.expandedDirs = nextExpandedDirs;
+  }
 }

package/src/client/presentation/theme-controller.js

@@ -1,5 +1,5 @@
-const DARK_THEME_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
-const LIGHT_THEME_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+const SUN_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
+const MOON_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
 
 export class ThemeController {
   constructor({ storageKey = 'collabmd-theme', onChange }) {
@@ -55,10 +55,27 @@ export class ThemeController {
   }
 
   updateToggleIcons() {
-    const icon = this.currentTheme === 'dark' ? DARK_THEME_ICON : LIGHT_THEME_ICON;
+    const currentLabel = this.currentTheme === 'dark' ? 'Dark' : 'Light';
+    const nextLabel = this.currentTheme === 'dark' ? 'light' : 'dark';
+    const icon = this.currentTheme === 'dark' ? MOON_ICON : SUN_ICON;
 
     document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
-      button.innerHTML = icon;
+      const iconElement = button.querySelector('[data-theme-toggle-icon]');
+      const stateElement = button.querySelector('[data-theme-toggle-state]');
+
+      if (iconElement) {
+        iconElement.innerHTML = icon;
+      } else {
+        button.innerHTML = icon;
+      }
+
+      if (stateElement) {
+        stateElement.textContent = currentLabel;
+        stateElement.dataset.theme = this.currentTheme;
+      }
+
+      button.setAttribute('aria-label', `Theme: ${currentLabel}. Switch to ${nextLabel} mode`);
+      button.setAttribute('title', `Theme: ${currentLabel}. Switch to ${nextLabel} mode`);
     });
   }
 }

package/src/client/presentation/toast-controller.js

@@ -3,19 +3,62 @@ export class ToastController {
     this.container = container;
   }
 
-  show(message, duration = 3000) {
+  show(message, options = 3000) {
     if (!this.container) {
-      return;
+      return null;
     }
 
+    const normalizedOptions = typeof options === 'number'
+      ? { duration: options }
+      : { ...(options ?? {}) };
+    const duration = Number(normalizedOptions.duration) > 0
+      ? Number(normalizedOptions.duration)
+      : 0;
     const toast = document.createElement('div');
     toast.className = 'toast';
-    toast.textContent = message;
-    this.container.appendChild(toast);
+    const content = document.createElement('span');
+    content.className = 'toast__message';
+    content.textContent = message;
+    toast.appendChild(content);
 
-    setTimeout(() => {
+    const dismiss = () => {
+      if (!toast.isConnected || toast.classList.contains('leaving')) {
+        return;
+      }
       toast.classList.add('leaving');
       toast.addEventListener('animationend', () => toast.remove(), { once: true });
-    }, duration);
+    };
+
+    if (normalizedOptions.actionLabel && typeof normalizedOptions.onAction === 'function') {
+      const actionButton = document.createElement('button');
+      actionButton.className = 'toast__action';
+      actionButton.type = 'button';
+      actionButton.textContent = normalizedOptions.actionLabel;
+      actionButton.addEventListener('click', () => {
+        normalizedOptions.onAction();
+        if (normalizedOptions.closeOnAction !== false) {
+          dismiss();
+        }
+      });
+      toast.appendChild(actionButton);
+    }
+
+    if (normalizedOptions.dismissible) {
+      const dismissButton = document.createElement('button');
+      dismissButton.className = 'toast__dismiss';
+      dismissButton.type = 'button';
+      dismissButton.setAttribute('aria-label', 'Dismiss notification');
+      dismissButton.textContent = 'Close';
+      dismissButton.addEventListener('click', dismiss);
+      toast.appendChild(dismissButton);
+    }
+
+    this.container.appendChild(toast);
+
+    if (duration > 0) {
+      setTimeout(dismiss, duration);
+    }
+
+    return toast;
   }
 }

package/src/client/styles/components/feedback.css

@@ -22,6 +22,9 @@
   font-size: var(--text-xs);
   pointer-events: auto;
   opacity: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
   transform: translateX(0) scale(1);
   transition:
     opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
@@ -29,6 +32,31 @@
     display 300ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
 }
 
+.toast__message {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.toast__action,
+.toast__dismiss {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.toast__action {
+  color: var(--color-primary);
+}
+
+.toast__dismiss {
+  opacity: 0.72;
+}
+
 @starting-style {
   .toast {
     opacity: 0;