@noirmd/previewer 1.2.0 → 2.0.0

package/dist/admonition.css

@@ -0,0 +1,55 @@
+/* ============================================================
+   NoirMD Vanilla — Admonition
+   ============================================================ */
+
+.nr-admonition {
+  border-radius: var(--nr-radius);
+  margin-bottom: 1.5rem;
+  border: 1px solid;
+  padding: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.nr-admonition--note {
+  border-color: rgba(59, 130, 246, 0.2);
+  background: rgba(59, 130, 246, 0.05);
+  color: var(--nr-info);
+}
+.nr-admonition--info {
+  border-color: rgba(59, 130, 246, 0.3);
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--nr-info);
+}
+.nr-admonition--warning {
+  border-color: rgba(245, 158, 11, 0.3);
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--nr-warning);
+}
+.nr-admonition--danger {
+  border-color: rgba(239, 68, 68, 0.3);
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--nr-danger);
+}
+.nr-admonition--greentext {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: rgba(34, 197, 94, 0.1);
+  color: var(--nr-success);
+}
+
+.nr-admonition__title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin: 0 0 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nr-admonition__icon {
+  flex-shrink: 0;
+}
+
+.nr-admonition__body {
+  font-size: 0.875rem;
+  line-height: 1.625;
+  opacity: 0.9;
+}

package/dist/{markdown.css → base.css}

@@ -1,6 +1,26 @@
-/* NRpreviewer — Markdown typography
-   These styles work standalone without Tailwind.
-   If consumer has Tailwind, utility classes in JSX still apply on top. */
+/* ============================================================
+   NoirMD Vanilla — Global / Reusable Styles
+
+   Base typography, inline elements, generic element resets
+   (for raw HTML content) and the highlight.js theme.
+   Imported by vanilla.css — do not import standalone.
+   ============================================================ */
+
+/* ── Root prose base ─────────────────────────────────────── */
+
+.nr-prose {
+  color: var(--nr-text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.625;
+  word-wrap: break-word;
+}
+
+/* ── Alignment utilities ─────────────────────────────────── */
+
+.nr-prose .text-center { text-align: center; }
+.nr-prose .text-right { text-align: right; }
+
+/* ── Heading & paragraph typography ──────────────────────── */
 
 .md-h1 {
   font-size: 1.5rem;
@@ -91,128 +111,69 @@
   .md-p { font-size: 1rem; }
 }
 
-/* ── Links ── */
-.nr-prose a {
+/* ── Inline elements ─────────────────────────────────────── */
+
+.nr-link {
+  color: var(--nr-accent);
   text-decoration: none !important;
-  color: var(--color-accent-primary, #0ea5e9);
   transition: color 0.15s;
 }
-.nr-prose a:hover {
+.nr-link:hover {
   text-decoration: underline !important;
-  color: var(--color-accent-hover, #38bdf8);
-}
-
-/* ── Lists ── */
-.nr-prose ul,
-.nr-prose ol {
-  list-style-type: disc;
-  margin: 0.75rem 0;
-  padding-left: 1.5rem;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-@media (min-width: 640px) {
-  .nr-prose ul, .nr-prose ol { font-size: 1rem; }
-}
-
-.nr-prose ol {
-  list-style-type: decimal;
-}
-
-.nr-prose li {
-  margin: 0.25rem 0;
-  line-height: 1.625;
-  display: list-item;
-}
-
-.nr-prose li::marker {
-  color: var(--color-text-secondary, #64748b);
-}
-
-/* Nested lists */
-.nr-prose li > ul,
-.nr-prose li > ol {
-  margin: 0.25rem 0;
-}
-
-/* ── Tables ── */
-.nr-prose table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1rem 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-@media (min-width: 640px) {
-  .nr-prose table { font-size: 1rem; }
+  color: var(--nr-accent-hover);
 }
 
-.nr-prose thead {
-  border-bottom: 2px solid var(--color-border, #e2e8f0);
+.nr-inline-code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.875em;
+  background: var(--nr-bg-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--nr-radius-sm);
+  color: var(--nr-text);
 }
 
-.nr-prose th {
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-  font-weight: 700;
-  font-size: 0.75rem;
-  background: var(--color-background-secondary-solid, #f1f5f9);
-  border-bottom: 1px solid var(--color-border, #e2e8f0);
+.nr-highlight {
+  background: rgba(234, 179, 8, 0.2);
+  color: inherit;
+  padding: 0 0.125rem;
+  border-radius: 0.25rem;
 }
 
-.nr-prose td {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border, #e2e8f0);
+.nr-spoiler {
+  background: var(--nr-text);
+  color: var(--nr-text);
+  padding: 0 0.25rem;
+  border-radius: var(--nr-radius-sm);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
 }
-
-.nr-prose tbody tr:last-child td {
-  border-bottom: none;
+.nr-spoiler:hover {
+  background: transparent;
+  color: var(--nr-text);
 }
 
-/* ── Blockquotes ── */
-.nr-prose blockquote {
-  margin: 1rem 0;
-  padding: 0.5rem 1rem;
-  border-left: 4px solid var(--color-accent-primary, #0ea5e9);
-  color: var(--color-text-secondary, #64748b);
-  font-style: italic;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-@media (min-width: 640px) {
-  .nr-prose blockquote { font-size: 1rem; }
+.nr-underline {
+  text-underline-offset: 2px;
 }
 
-.nr-prose blockquote p {
-  margin: 0.25rem 0;
+.nr-icon {
+  font-size: 1em;
+  line-height: 1;
+  vertical-align: top;
 }
 
-/* ── Inline code ── */
-.nr-prose :not(pre) > code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.875em;
-  background: var(--color-background-secondary-solid, #f1f5f9);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  color: var(--color-text-primary, #0f172a);
-}
+/* ── Generic element resets (raw HTML content) ───────────── */
 
-/* ── Code blocks ── */
-.nr-prose pre {
-  margin: 1rem 0;
-  padding: 1rem;
-  overflow-x: auto;
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  border-radius: 0.75rem;
-  background: var(--color-background-secondary-solid, #f1f5f9);
+.nr-prose a {
+  text-decoration: none !important;
+  color: var(--color-accent-primary, #0ea5e9);
+  transition: color 0.15s;
 }
-
-@media (min-width: 640px) {
-  .nr-prose pre { font-size: 0.875rem; }
+.nr-prose a:hover:not(.nr-button):not(.nr-card__action-link) {
+  text-decoration: underline !important;
+  color: var(--color-accent-hover, #38bdf8);
 }
 
-/* ── Inline formatting ── */
 .nr-prose strong,
 .nr-prose b {
   font-weight: 700;
@@ -229,56 +190,65 @@
   opacity: 0.7;
 }
 
-/* ── Highlight ── */
 .nr-prose mark {
   background: rgba(250, 204, 21, 0.2);
   padding: 0 0.125rem;
   border-radius: 0.125rem;
 }
 
-/* ── Horizontal rules ── */
 .nr-prose hr {
   border: none;
   border-top: 1px solid var(--color-border, #e2e8f0);
   margin: 2rem 0;
 }
 
-/* ── Spoiler ── */
-.nr-prose .spoiler,
-.nr-prose [class*="bg-text-primary"][class*="text-bg-primary"] {
-  background: var(--color-text-primary, #0f172a);
-  color: var(--color-text-primary, #0f172a);
-  border-radius: 0.25rem;
-  padding: 0 0.25rem;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
+.nr-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
 }
 
-.nr-prose .spoiler:hover,
-.nr-prose [class*="bg-text-primary"][class*="text-bg-primary"]:hover {
-  background: transparent;
-  color: inherit;
+/* ── Generic wrapper / fallbacks ─────────────────────────── */
+
+.nr-raw-html {
+  width: 100%;
+  margin: 1rem 0;
 }
 
-/* ── Images ── */
-.nr-prose img {
+.nr-unknown-directive {
+  margin: 1rem 0;
+  padding: 1rem;
+  border-radius: var(--nr-radius);
+  border: 1px solid var(--nr-border);
+  background: color-mix(in srgb, var(--nr-bg) 5%, transparent);
+}
+
+.nr-hr {
+  border: none;
+  border-top: 1px solid var(--nr-border);
+  margin: 2rem 0;
+}
+
+.nr-image {
   max-width: 100%;
   height: auto;
   border-radius: 0.5rem;
 }
 
-/* ── Scrollbar (for code blocks and tables) ── */
+/* ── Scrollbar (code blocks and tables) ──────────────────── */
+
 .nr-prose pre::-webkit-scrollbar,
-.nr-prose .overflow-x-auto::-webkit-scrollbar {
+.nr-prose .nr-table-wrap::-webkit-scrollbar {
   height: 4px;
 }
 .nr-prose pre::-webkit-scrollbar-thumb,
-.nr-prose .overflow-x-auto::-webkit-scrollbar-thumb {
+.nr-prose .nr-table-wrap::-webkit-scrollbar-thumb {
   background: var(--color-border, #e2e8f0);
   border-radius: 2px;
 }
 
-/* ── highlight.js theme — NoirMD ── */
+/* ── highlight.js theme — NoirMD ─────────────────────────── */
+
 .hljs {
   color: #e2e8f0;
   background: transparent;
@@ -341,4 +311,4 @@
 }
 .hljs-strong {
   font-weight: 700;
-}
+}

package/dist/blockquote.css

@@ -0,0 +1,16 @@
+/* ============================================================
+   NoirMD Vanilla — Blockquote
+   ============================================================ */
+
+.nr-blockquote {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid rgba(14, 165, 233, 0.3);
+  color: var(--nr-text-secondary);
+  font-style: italic;
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+@media (min-width: 640px) {
+  .nr-blockquote { font-size: 1rem; }
+}

package/dist/button.css

@@ -0,0 +1,32 @@
+/* ============================================================
+   NoirMD Vanilla — Button
+   ============================================================ */
+
+.nr-button-wrap {
+  margin: 0.25rem 0;
+}
+
+.nr-button {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+  font-weight: 700;
+  font-size: 0.875rem;
+  text-decoration: none;
+  gap: 0.5rem;
+  transition: all 0.15s;
+  border: 1px solid var(--nr-border);
+  background: color-mix(in srgb, var(--nr-bg) 5%, transparent);
+  color: var(--nr-text);
+  cursor: pointer;
+}
+.nr-button:hover {
+  transform: scale(1.05);
+  background: color-mix(in srgb, var(--nr-bg) 10%, transparent);
+  color: var(--nr-text);
+}
+.nr-button:active {
+  transform: scale(0.95);
+}

package/dist/card.css

@@ -0,0 +1,143 @@
+/* ============================================================
+   NoirMD Vanilla — Card
+   ============================================================ */
+
+.nr-card-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.nr-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: var(--nr-radius-lg);
+  border: 1px solid var(--nr-border);
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
+  min-width: 18rem;
+  width: 18rem;
+  max-width: 20rem;
+}
+
+.nr-card--interactive {
+  cursor: pointer;
+  border-color: rgba(14, 165, 233, 0.1);
+}
+.nr-card--interactive:hover {
+  border-color: rgba(14, 165, 233, 0.5);
+}
+
+.nr-card__image {
+  width: 100%;
+  height: 160px;
+  overflow: hidden;
+  position: relative;
+}
+.nr-card__image--tall {
+  height: 240px;
+}
+
+.nr-card__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  margin: 0;
+}
+
+.nr-card__gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, color-mix(in srgb, var(--nr-bg) 40%, transparent), transparent);
+}
+
+.nr-card__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1.5rem;
+  position: relative;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+.nr-card__body--overlap {
+  margin-top: -2.5rem;
+  background: color-mix(in srgb, var(--nr-bg) 80%, transparent);
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+.nr-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.nr-card__icon-wrap {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.6em;
+  border-radius: 0.75rem;
+  background: rgba(14, 165, 233, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--nr-accent);
+}
+
+.nr-card__title {
+  font-size: 1rem;
+  font-weight: 900;
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+  margin: 0;
+}
+
+.nr-card__description {
+  font-size: 0.875rem;
+  opacity: 0.8;
+  line-height: 1.625;
+  font-weight: 500;
+}
+
+.nr-card__content {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.nr-card__action {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.nr-card__action-link {
+  background: rgba(14, 165, 233, 0.2);
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.625rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  opacity: 0.5;
+  color: var(--nr-text);
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.nr-card:hover .nr-card__action-link {
+  opacity: 1;
+  color: var(--nr-accent);
+}
+.nr-card__action-link:hover {
+  background: rgba(14, 165, 233, 0.3);
+}

package/dist/codeblock.css

@@ -0,0 +1,59 @@
+/* ============================================================
+   NoirMD Vanilla — Code Block
+   ============================================================ */
+
+.nr-codeblock {
+  position: relative;
+  margin: 1rem 0;
+  border-radius: var(--nr-radius);
+  border: 1px solid var(--nr-border);
+  overflow: hidden;
+  background: rgba(30, 41, 59, 0.05);
+}
+
+.nr-codeblock__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--nr-border);
+  background: rgba(30, 41, 59, 0.1);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.75rem;
+  color: var(--nr-text-secondary);
+}
+@media (min-width: 640px) {
+  .nr-codeblock__header { font-size: 0.875rem; }
+}
+
+.nr-codeblock__pre {
+  margin: 0;
+  padding: 1rem;
+  overflow: auto;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+@media (min-width: 640px) {
+  .nr-codeblock__pre { font-size: 0.875rem; }
+}
+
+.nr-codeblock__pre code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.nr-codeblock__copy {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.375rem;
+  border-radius: var(--nr-radius-sm);
+  border: none;
+  background: rgba(30, 41, 59, 0.2);
+  color: var(--nr-text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.nr-codeblock__copy:hover {
+  background: rgba(30, 41, 59, 0.4);
+  color: var(--nr-text);
+}

package/dist/core.cjs

@@ -126,6 +126,7 @@ function parseMarkdown(markdown) {
   if (!markdown) return [];
   const lines = markdown.replace(/\r\n/g, "\n").replace(/\r/g, "").split("\n");
   const result = [];
+  const usedIds = /* @__PURE__ */ new Set();
   let i = 0;
   while (i < lines.length) {
     const line = lines[i];
@@ -135,7 +136,14 @@ function parseMarkdown(markdown) {
       const level = match[1].length;
       const rawText = match[2];
       const { text: text2, classes: classes2, id: customId } = extractAttributes(rawText);
-      const id2 = customId || generateId(text2.replace(/->|<-/g, ""));
+      const baseId = customId || generateId(text2.replace(/->|<-/g, ""));
+      let id2 = baseId;
+      let n = 1;
+      while (usedIds.has(id2)) {
+        n++;
+        id2 = `${baseId}-${n}`;
+      }
+      usedIds.add(id2);
       result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0 });
       i++;
       continue;