@coderminer/vue-markdown 0.0.0-stage → 1.0.1

package/dist/styles/components.css

@@ -0,0 +1,737 @@
+[data-vmd-part='root'] {
+  color: var(--vmd-color-text);
+  background: var(--vmd-color-bg);
+  font-family: var(--vmd-font-family);
+  font-size: var(--vmd-font-size);
+  line-height: var(--vmd-line-height);
+  text-align: left;
+  text-align: start;
+  overflow-wrap: break-word;
+}
+
+[data-vmd-part='body'] {
+  min-width: 0;
+}
+
+[data-vmd-part='root'][data-vmd-toc-layout='side'] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+[data-vmd-part='root'][data-vmd-toc-placement='right'] {
+  flex-direction: row-reverse;
+}
+
+[data-vmd-part='toc-column'] {
+  position: -webkit-sticky;
+  position: sticky;
+  top: var(--vmd-space-4);
+  inset-block-start: var(--vmd-space-4);
+}
+
+[data-vmd-part='root'][data-vmd-toc-layout='side'] > [data-vmd-part='toc-column'] {
+  flex: 0 0 16rem;
+  max-width: 16rem;
+  min-width: 0;
+  max-height: calc(100vh - var(--vmd-space-6));
+  overflow-y: auto;
+}
+
+[data-vmd-part='root'][data-vmd-toc-layout='side'][data-vmd-toc-placement='left']
+  > [data-vmd-part='toc-column'] {
+  margin-right: var(--vmd-space-5);
+  margin-inline-end: var(--vmd-space-5);
+}
+
+[data-vmd-part='root'][data-vmd-toc-layout='side'][data-vmd-toc-placement='right']
+  > [data-vmd-part='toc-column'] {
+  margin-left: var(--vmd-space-5);
+  margin-inline-start: var(--vmd-space-5);
+}
+
+[data-vmd-part='root'][data-vmd-toc-layout='side'] > [data-vmd-part='body'] {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 768px) {
+  [data-vmd-part='root'][data-vmd-toc-layout='side'] {
+    display: block;
+  }
+
+  [data-vmd-part='root'][data-vmd-toc-layout='side']
+    > [data-vmd-part='toc-column'] {
+    position: static;
+    max-width: none;
+    max-height: none;
+    overflow-y: visible;
+    margin-right: 0;
+    margin-left: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    margin-bottom: var(--vmd-space-4);
+    margin-block-end: var(--vmd-space-4);
+  }
+}
+
+[data-vmd-part='content'] > :first-child {
+  margin-top: 0;
+  margin-block-start: 0;
+}
+
+[data-vmd-part='content'] > :last-child {
+  margin-bottom: 0;
+  margin-block-end: 0;
+}
+
+[data-vmd-part='paragraph'] {
+  margin: 0 0 var(--vmd-space-4);
+  margin-block: 0 var(--vmd-space-4);
+}
+
+[data-vmd-part='heading'] {
+  margin: var(--vmd-space-5) 0 var(--vmd-space-3);
+  margin-block: var(--vmd-space-5) var(--vmd-space-3);
+  line-height: 1.25;
+  scroll-margin-top: var(--vmd-space-5);
+  scroll-margin-block-start: var(--vmd-space-5);
+}
+
+[data-vmd-part='heading-anchor'] {
+  margin-left: var(--vmd-space-2);
+  margin-inline-start: var(--vmd-space-2);
+  color: var(--vmd-color-muted);
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity var(--vmd-motion-duration) var(--vmd-motion-easing);
+}
+
+[data-vmd-part='heading']:hover [data-vmd-part='heading-anchor'],
+[data-vmd-part='heading-anchor']:focus {
+  opacity: 1;
+}
+
+[data-vmd-part='heading-anchor']:focus-visible {
+  opacity: 1;
+}
+
+[data-vmd-part='link'] {
+  color: var(--vmd-color-accent);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+[data-vmd-part='image'] {
+  max-width: 100%;
+  height: auto;
+}
+
+[data-vmd-part='list'] {
+  margin: 0 0 var(--vmd-space-4);
+  margin-block: 0 var(--vmd-space-4);
+  padding-left: var(--vmd-space-5);
+  padding-inline-start: var(--vmd-space-5);
+}
+
+[data-vmd-part='list-item'] {
+  margin: var(--vmd-space-1) 0;
+  margin-block: var(--vmd-space-1);
+}
+
+[data-vmd-part='blockquote'] {
+  margin: 0 0 var(--vmd-space-4);
+  padding-left: var(--vmd-space-4);
+  padding-inline-start: var(--vmd-space-4);
+  border-left: 3px solid var(--vmd-color-border);
+  border-inline-start: 3px solid var(--vmd-color-border);
+  color: var(--vmd-color-muted);
+}
+
+[data-vmd-part='hr'] {
+  height: 1px;
+  margin: var(--vmd-space-5) 0;
+  margin-block: var(--vmd-space-5);
+  border: 0;
+  background: var(--vmd-color-border);
+}
+
+[data-vmd-part='table'] {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  margin: 0 0 var(--vmd-space-4);
+  margin-block: 0 var(--vmd-space-4);
+  overflow: auto;
+  border-collapse: collapse;
+}
+
+[data-vmd-part='table-cell'] {
+  padding: var(--vmd-space-2) var(--vmd-space-3);
+  border: 1px solid var(--vmd-color-border);
+}
+
+[data-vmd-part='table-section'] {
+  background: var(--vmd-color-surface);
+}
+
+[data-vmd-part='inline-code'] {
+  padding: 0.15em 0.35em;
+  border-radius: var(--vmd-radius-sm);
+  background: var(--vmd-code-bg);
+  color: var(--vmd-code-text);
+  font-family: var(--vmd-font-mono);
+  font-size: 0.9em;
+}
+
+[data-vmd-part='code'] {
+  display: block;
+  margin: 0 0 var(--vmd-space-4);
+  margin-block: 0 var(--vmd-space-4);
+  padding: var(--vmd-space-3) var(--vmd-space-4);
+  overflow: auto;
+  border: 1px solid var(--vmd-code-border);
+  border-radius: var(--vmd-radius-md);
+  background: var(--vmd-code-bg);
+  color: var(--vmd-code-text);
+  font-family: var(--vmd-font-mono);
+  font-size: 0.9em;
+  line-height: 1.6;
+}
+
+.vmd-code-element {
+  font: inherit;
+}
+
+[data-vmd-part='toc'] {
+  font-size: 0.925em;
+}
+
+.vmd-toc-nav[data-vmd-part='toc-nav'] {
+  max-height: calc(100vh - var(--vmd-space-6));
+  margin: 0;
+  padding-left: 2.25rem;
+  padding-inline-start: 2.25rem;
+  overflow: auto;
+  list-style: decimal outside;
+}
+
+.vmd-toc-entry {
+  margin: 0;
+}
+
+.vmd-toc-entry::marker {
+  color: var(--vmd-color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-vmd-part='toc-item'] {
+  display: block;
+  padding-top: var(--vmd-space-1);
+  padding-bottom: var(--vmd-space-1);
+  padding-block: var(--vmd-space-1);
+  padding-left: calc((var(--vmd-toc-depth, 1) - 1) * var(--vmd-space-3));
+  padding-inline-start: calc((var(--vmd-toc-depth, 1) - 1) * var(--vmd-space-3));
+  color: var(--vmd-color-muted);
+  text-decoration: none;
+}
+
+[data-vmd-part='toc-item'][aria-current='true'] {
+  color: var(--vmd-color-accent);
+  font-weight: 600;
+}
+
+[data-vmd-part='error'] {
+  margin: var(--vmd-space-3) 0;
+  margin-block: var(--vmd-space-3);
+  padding: var(--vmd-space-3) var(--vmd-space-4);
+  border: 1px solid var(--vmd-color-danger);
+  border-radius: var(--vmd-radius-md);
+  color: var(--vmd-color-danger);
+}
+
+[data-vmd-part='empty'],
+[data-vmd-part='loading'] {
+  color: var(--vmd-color-muted);
+}
+
+[data-vmd-part='custom-tag'] {
+  display: inline-block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-vmd-part] {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media print {
+  [data-vmd-part='root'] {
+    color: #000;
+    background: #fff;
+  }
+
+  [data-vmd-part='toc'],
+  [data-vmd-part='toc-column'],
+  [data-vmd-part='heading-anchor'] {
+    display: none;
+  }
+
+  [data-vmd-part='root'][data-vmd-toc-layout='side'] {
+    display: block;
+  }
+
+  [data-vmd-part='code'] {
+    white-space: pre-wrap;
+    border-color: #999;
+  }
+}
+
+[data-vmd-part='task-item'] {
+  display: flex;
+  gap: var(--vmd-space-2);
+  list-style: none;
+  align-items: flex-start;
+}
+
+[data-vmd-part='task-checkbox'] {
+  margin-top: 0.2em;
+  accent-color: var(--vmd-color-accent);
+}
+
+[data-vmd-part='footnote-reference'] {
+  font-size: 0.75em;
+  line-height: 0;
+}
+
+[data-vmd-part='footnote-reference'][data-state='missing'] {
+  color: var(--vmd-color-danger);
+}
+
+[data-vmd-part='footnotes'] {
+  margin-top: var(--vmd-space-5);
+  border-top: 1px solid var(--vmd-color-border);
+  padding-top: var(--vmd-space-3);
+  color: var(--vmd-color-muted);
+}
+
+[data-vmd-part='code'] {
+  border: 1px solid var(--vmd-code-border);
+  border-radius: var(--vmd-radius-md);
+  background: var(--vmd-code-bg);
+  overflow: hidden;
+}
+
+/* The rich block owns its header/body padding; the legacy pre keeps the base padding. */
+.vmd-code-block[data-vmd-part='code'] {
+  padding: 0;
+}
+
+[data-vmd-part='code-header'],
+[data-vmd-part='mermaid-header'],
+[data-vmd-part='highlighter-header'] {
+  display: flex;
+  min-height: 3rem;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--vmd-space-2);
+  padding: var(--vmd-space-1) var(--vmd-space-3);
+  background: var(--vmd-code-toolbar-bg);
+  font-family: var(--vmd-font-family);
+}
+
+[data-vmd-part='code-header'] {
+  border-bottom: 1px solid var(--vmd-code-border);
+}
+
+[data-vmd-part='code-heading'],
+.vmd-mermaid-label,
+.vmd-highlighter-label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--vmd-space-2);
+  overflow: hidden;
+  color: var(--vmd-code-text);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-vmd-part='code-heading'] .vmd-icon {
+  color: var(--vmd-color-accent);
+}
+
+[data-vmd-part='code-title'],
+[data-vmd-part='code-file-name'] {
+  overflow: hidden;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-vmd-part='code-file-name'] {
+  font-family: var(--vmd-font-mono);
+}
+
+[data-vmd-part='code-toolbar'],
+[data-vmd-part='mermaid-actions'],
+[data-vmd-part='highlighter-actions'] {
+  display: flex;
+  align-items: center;
+  gap: var(--vmd-space-1);
+  margin-left: auto;
+}
+
+.vmd-icon {
+  display: block;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+}
+
+.vmd-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-vmd-part='code-action'],
+[data-vmd-part='mermaid-actions'] button,
+[data-vmd-part='mermaid-tabs'] button,
+[data-vmd-part='highlighter-actions'] button {
+  display: inline-flex;
+  min-width: 1.75rem;
+  min-height: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35em;
+  padding: 0 var(--vmd-space-1);
+  border: 0;
+  border-radius: var(--vmd-radius-sm);
+  background: transparent;
+  color: var(--vmd-color-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+}
+
+[data-vmd-part='code-action'][data-icon='true'],
+[data-vmd-part='mermaid-actions'] button[data-icon='true'],
+[data-vmd-part='highlighter-actions'] button[data-icon='true'] {
+  padding: 0;
+}
+
+[data-vmd-part='code-action']:hover,
+[data-vmd-part='mermaid-actions'] button:hover,
+[data-vmd-part='mermaid-tabs'] button:hover,
+[data-vmd-part='highlighter-actions'] button:hover {
+  background: var(--vmd-color-surface);
+  color: var(--vmd-color-text);
+}
+
+[data-vmd-part='code-action']:focus,
+[data-vmd-part='mermaid-actions'] button:focus,
+[data-vmd-part='mermaid-tabs'] button:focus,
+[data-vmd-part='highlighter-actions'] button:focus {
+  outline: 2px solid var(--vmd-color-accent);
+  outline-offset: 2px;
+}
+
+[data-vmd-part='code-feedback'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-vmd-part='code-body'] {
+  margin: 0;
+  padding: var(--vmd-space-3);
+  overflow-x: auto;
+}
+
+[data-vmd-part='code-body'][data-virtual='true'] {
+  overflow: auto;
+}
+
+[data-vmd-part='highlighter'] {
+  border: 1px solid var(--vmd-code-border);
+  border-radius: var(--vmd-radius-md);
+  background: var(--vmd-code-bg);
+  overflow: auto;
+}
+
+[data-vmd-part='highlighter-line'] {
+  display: flex;
+  min-height: 1.5em;
+  white-space: pre;
+}
+
+[data-vmd-part='highlighter-line'][data-highlighted='true'] {
+  background: var(--vmd-code-toolbar-bg);
+}
+
+[data-vmd-part='highlighter-gutter'] {
+  flex: 0 0 auto;
+  padding: 0 var(--vmd-space-2);
+  color: var(--vmd-color-muted);
+  text-align: right;
+  user-select: none;
+}
+
+[data-vmd-part='highlighter-empty'] {
+  padding: var(--vmd-space-3);
+  color: var(--vmd-color-muted);
+}
+
+[data-vmd-part='highlighter-footer'] {
+  padding: var(--vmd-space-2) var(--vmd-space-3);
+  border-top: 1px solid var(--vmd-code-border);
+  color: var(--vmd-color-muted);
+}
+
+[data-vmd-part='math'] {
+  color: var(--vmd-math-color);
+  background: var(--vmd-math-bg);
+}
+
+[data-vmd-part='math'][data-display='true'] {
+  display: block;
+  margin-top: var(--vmd-space-4);
+  margin-bottom: var(--vmd-space-4);
+  margin-block: var(--vmd-space-4);
+  text-align: center;
+  overflow-x: auto;
+}
+
+[data-vmd-part='math-error'] {
+  color: var(--vmd-color-danger);
+  font-family: var(--vmd-font-mono);
+}
+
+[data-vmd-part='mermaid'] {
+  border: 1px solid var(--vmd-mermaid-border);
+  border-radius: var(--vmd-radius-md);
+  background: var(--vmd-mermaid-bg);
+  overflow: hidden;
+}
+
+[data-vmd-part='mermaid-header'] {
+  border-bottom: 1px solid var(--vmd-mermaid-border);
+}
+
+.vmd-mermaid-label .vmd-icon {
+  color: var(--vmd-color-accent);
+}
+
+[data-vmd-part='mermaid-tabs'] {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--vmd-mermaid-border);
+  border-radius: var(--vmd-radius-sm);
+  background: var(--vmd-mermaid-bg);
+}
+
+[data-vmd-part='mermaid-tabs'] button[data-active='true'] {
+  background: var(--vmd-color-accent);
+  color: var(--vmd-color-accent-contrast);
+}
+
+[data-vmd-part='mermaid-preview'] {
+  padding: var(--vmd-space-3);
+  overflow: auto;
+}
+
+.vmd-mermaid-diagram {
+  transform-origin: top left;
+}
+
+[data-vmd-part='mermaid-source'] {
+  margin: 0;
+  padding: var(--vmd-space-3);
+  overflow-x: auto;
+}
+
+[data-vmd-part='mermaid-pending'],
+[data-vmd-part='mermaid-fallback'],
+[data-vmd-part='mermaid-error'] {
+  padding: var(--vmd-space-3);
+  color: var(--vmd-color-muted);
+}
+
+[data-vmd-part='mermaid-error'] {
+  color: var(--vmd-color-danger);
+}
+
+[data-vmd-part='mermaid-retry'] {
+  margin-top: var(--vmd-space-2);
+  padding: var(--vmd-space-1) var(--vmd-space-2);
+  border: 1px solid currentColor;
+  border-radius: var(--vmd-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+}
+
+[data-vmd-part='mermaid-retry']:hover {
+  background: var(--vmd-color-surface);
+}
+
+[data-vmd-part='mermaid-retry']:focus {
+  outline: 2px solid var(--vmd-color-accent);
+  outline-offset: 2px;
+}
+
+[data-vmd-part='highlighter-toggle'] {
+  display: block;
+  width: 100%;
+  padding: var(--vmd-space-2) var(--vmd-space-3);
+  border: 0;
+  border-top: 1px solid var(--vmd-code-border);
+  background: var(--vmd-code-toolbar-bg);
+  color: var(--vmd-color-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+}
+
+[data-vmd-part='mermaid'][data-fullscreen='true'],
+[data-vmd-part='editor'][data-fullscreen='true'] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  inset: 0;
+  z-index: 1000;
+  overflow: auto;
+  background: var(--vmd-mermaid-bg);
+}
+
+[data-vmd-part='mermaid-fullscreen'] {
+  min-width: 0;
+}
+
+[data-vmd-part='editor'] {
+  border: 1px solid var(--vmd-color-border);
+  border-radius: var(--vmd-radius-md);
+  display: flex;
+  flex-direction: column;
+  min-height: 20rem;
+}
+
+.vmd-editor-surface,
+[data-vmd-part='editor-fullscreen'] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+[data-vmd-part='editor-toolbar'] {
+  display: flex;
+  gap: var(--vmd-space-2);
+  align-items: center;
+  padding: var(--vmd-space-2) var(--vmd-space-3);
+  border-bottom: 1px solid var(--vmd-color-border);
+}
+
+[data-vmd-part='editor-body'] {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+[data-vmd-part='editor-pane'],
+[data-vmd-part='editor-preview'] {
+  flex: 1 1 50%;
+  min-width: 20%;
+  overflow: auto;
+}
+
+[data-vmd-part='editor-preview'] {
+  position: relative;
+}
+
+[data-vmd-part='editor-divider'] {
+  flex: 0 0 0.5rem;
+  cursor: col-resize;
+  background: var(--vmd-color-border);
+}
+
+[data-vmd-part='editor-divider']:focus {
+  outline: 2px solid var(--vmd-color-accent);
+  outline-offset: 2px;
+}
+
+[data-vmd-part='editor-diagnostics'] {
+  border-top: 1px solid var(--vmd-color-border);
+  padding: var(--vmd-space-2) var(--vmd-space-3);
+  color: var(--vmd-color-danger);
+}
+
+[data-vmd-part='editor-diagnostics'][data-compact='true'] {
+  padding: var(--vmd-space-1) var(--vmd-space-2);
+  font-size: 0.85em;
+}
+
+[data-vmd-part='editor-diagnostics'][data-compact='true']
+  .vmd-editor-diagnostic-list {
+  margin: 0;
+  padding-left: var(--vmd-space-4);
+  padding-inline-start: var(--vmd-space-4);
+}
+
+[data-vmd-part='editor-empty'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 8rem;
+  margin: 0;
+  padding: var(--vmd-space-3);
+  color: var(--vmd-color-muted);
+  text-align: center;
+}
+
+.vmd-editor-diagnostic-details {
+  margin: var(--vmd-space-2) 0;
+  padding: var(--vmd-space-2);
+  overflow: auto;
+  border: 1px solid var(--vmd-color-border);
+  border-radius: var(--vmd-radius-sm);
+  background: var(--vmd-color-surface);
+  color: var(--vmd-color-text);
+  font-family: var(--vmd-font-mono);
+  font-size: 0.8em;
+  white-space: pre-wrap;
+}
+
+@media (forced-colors: active) {
+  [data-vmd-part='link'],
+  [data-vmd-part='toc-item'] {
+    color: LinkText;
+  }
+
+  [data-vmd-part='code'],
+  [data-vmd-part='table-cell'],
+  [data-vmd-part='blockquote'] {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/index.d.ts

@@ -0,0 +1 @@
+export {};