@meowdown/core 0.83.2 → 0.84.0

package/dist/style.css

@@ -200,6 +200,20 @@
     }
   }
 
+  @keyframes meowdown-embed-fade {
+    from, to {
+      mask-image: linear-gradient(#000 calc(100% - 3rem), #0000);
+      mask-size: 100% calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
+      mask-repeat: no-repeat;
+    }
+  }
+
+  @keyframes meowdown-embed-show {
+    from, to {
+      visibility: visible;
+    }
+  }
+
   [data-meowdown-embed="x"] [data-root], [data-meowdown-embed="x"] [data-root] *, [data-meowdown-embed="x"] [data-root] :before, [data-meowdown-embed="x"] [data-root] :after {
     all: revert;
     box-sizing: border-box;
@@ -391,6 +405,7 @@
         max-height: calc(var(--_body-limit) - var(--_overflowing) * var(--_show-more-height));
         padding: var(--_clip-gutter);
         margin: calc(-1 * var(--_clip-gutter));
+        scroll-timeline: --meowdown-embed-clip block;
         margin-block-end: calc(var(--_overflowing) * var(--_show-more-height) - var(--_clip-gutter));
         animation: linear both meowdown-embed-overflowing scroll(self);
         overflow: hidden;
@@ -402,23 +417,21 @@
         overflow: visible;
       }
 
-      @container style(--_overflowing: 1) {
-        & > article > [data-content] {
-          mask-image: linear-gradient(#000 calc(100% - 3rem), #0000);
-          mask-size: 100%
-          calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
-          mask-repeat: no-repeat;
-        }
+      & > article > [data-content] {
+        animation: linear both meowdown-embed-fade --meowdown-embed-clip;
+      }
 
-        & > article > [data-show-more] {
-          inset-inline-start: var(--meowdown-embed-padding, 1rem);
-          bottom: var(--meowdown-embed-padding, 1rem);
-          display: block;
-          position: absolute;
-        }
+      & > article > [data-show-more] {
+        inset-inline-start: var(--meowdown-embed-padding, 1rem);
+        bottom: var(--meowdown-embed-padding, 1rem);
+        visibility: hidden;
+        animation: linear both meowdown-embed-show --meowdown-embed-clip;
+        display: block;
+        position: absolute;
       }
 
       & > article > [data-show-more][open] {
+        visibility: visible;
         z-index: 1;
         width: fit-content;
         margin: .5rem auto 0;
@@ -716,7 +729,7 @@
       --_hairline: var(--meowdown-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
       --_muted: var(--meowdown-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
       --_link: var(--meowdown-embed-link-color, #1d9bf0);
-      --_radius: var(--meowdown-embed-radius, 1rem);
+      --_radius: var(--meowdown-embed-radius, .75rem);
       --_page: var(--meowdown-embed-background, Canvas);
       --_play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24S67.94 13.05 66.52 7.74z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20z' fill='%23fff'/%3E%3C/svg%3E");
       font: inherit;
@@ -959,6 +972,160 @@
     }
   }
 
+  .meowdown-icon {
+    width: 1em;
+    height: 1em;
+    -webkit-mask: var(--_svg) no-repeat center / 100% 100%;
+    mask: var(--_svg) no-repeat center / 100% 100%;
+    background-color: currentColor;
+    flex-shrink: 0;
+    display: block;
+  }
+
+  .meowdown-icon-braces {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1m8 0h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-check {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-chevrons-up-down {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 15l5 5l5-5M7 9l5-5l5 5'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-copy {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-earth {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21.54 15H17a2 2 0 0 0-2 2v4.54M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-ellipsis {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-grip-horizontal {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='9' r='1'/%3E%3Ccircle cx='19' cy='9' r='1'/%3E%3Ccircle cx='5' cy='9' r='1'/%3E%3Ccircle cx='12' cy='15' r='1'/%3E%3Ccircle cx='19' cy='15' r='1'/%3E%3Ccircle cx='5' cy='15' r='1'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-grip-vertical {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-link-2 {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 17H7A5 5 0 0 1 7 7h2m6 0h2a5 5 0 1 1 0 10h-2m-7-5h8'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-pencil {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497zM15 5l4 4'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-sparkles {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-trash-2 {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-unlink {
+    --_svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07a5.006 5.006 0 0 0-6.95 0l-1.72 1.71m-6.58 6.57l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07a5.006 5.006 0 0 0 6.95 0l1.71-1.71M8 2v3M2 8h3m11 11v3m3-6h3'/%3E%3C/svg%3E");
+  }
+
+  .meowdown-icon-button {
+    box-sizing: border-box;
+    border: 1px solid var(--meowdown-border);
+    background: var(--meowdown-popover-bg);
+    width: 1.6rem;
+    height: 1.6rem;
+    color: var(--meowdown-muted);
+    cursor: pointer;
+    border-radius: .35rem;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: flex;
+
+    &:hover, &[data-popup-open], &[aria-expanded="true"] {
+      color: var(--meowdown-heading);
+    }
+
+    &[data-copied] {
+      color: var(--meowdown-accent);
+    }
+
+    & .meowdown-icon {
+      width: .875rem;
+      height: .875rem;
+    }
+  }
+
+  .meowdown-menu-positioner {
+    z-index: 50;
+    outline: none;
+  }
+
+  .meowdown-menu-popup {
+    box-sizing: border-box;
+    border: 1px solid var(--meowdown-border);
+    background: var(--meowdown-popover-bg);
+    min-width: 10rem;
+    color: var(--meowdown-text);
+    transform-origin: var(--transform-origin);
+    border-radius: .5rem;
+    outline: none;
+    flex-direction: column;
+    padding: .25rem;
+    font-family: ui-sans-serif, system-ui, sans-serif;
+    font-size: .8rem;
+    transition: opacity .1s, scale .1s;
+    display: flex;
+    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .95;
+    }
+  }
+
+  .meowdown-menu-item {
+    box-sizing: border-box;
+    cursor: pointer;
+    border-radius: .35rem;
+    outline: none;
+    align-items: center;
+    gap: .5rem;
+    padding: .3rem .5rem;
+    display: flex;
+
+    &[data-highlighted] {
+      background: color-mix(in oklab, var(--meowdown-accent) 14%, transparent);
+      color: var(--meowdown-heading);
+    }
+
+    & .meowdown-icon {
+      width: .875rem;
+      height: .875rem;
+      color: var(--meowdown-muted);
+    }
+  }
+
+  .meowdown-menu-item-indicator {
+    color: var(--meowdown-accent);
+    display: flex;
+
+    & .meowdown-icon {
+      color: inherit;
+    }
+  }
+
   .md-virtual-caret-layer {
     z-index: 1;
     pointer-events: none;
@@ -1655,12 +1822,32 @@
       overflow: visible;
     }
 
+    & .md-image-view-preview {
+      position: relative;
+    }
+
+    & .md-embed-menu-button {
+      z-index: 1;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .1s ease-out;
+      display: flex;
+      position: absolute;
+      top: .5rem;
+      right: .5rem;
+    }
+
+    & .md-image-view-preview:hover .md-embed-menu-button, & .md-atom-view:has(.md-atom-selected) .md-embed-menu-button, & .md-embed-menu-button[aria-expanded="true"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
     & .md-image-resizable {
       vertical-align: bottom;
       isolation: isolate;
-      min-width: 2.5rem;
+      min-width: 2.6rem;
       max-width: 100%;
-      min-height: 2.5rem;
+      min-height: 2.6rem;
       display: inline-block;
       position: relative;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/core",
   "type": "module",
-  "version": "0.83.2",
+  "version": "0.84.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,6 +13,7 @@
   ],
   "exports": {
     ".": "./dist/index.js",
+    "./internal/class-names": "./dist/class-names.js",
     "./style.css": "./dist/style.css"
   },
   "files": [
@@ -25,7 +26,7 @@
     "@codemirror/language-data": "^6.5.2",
     "@floating-ui/dom": "^1.8.0",
     "@lezer/highlight": "^1.2.5",
-    "@meowdown/embed": "0.3.1",
+    "@meowdown/embed": "0.3.3",
     "@meowdown/markdown": "0.78.0",
     "@ocavue/utils": "^1.11.0",
     "@post-embed/exporter": "^0.5.0",