@noirmd/previewer 1.1.1 → 2.0.0

package/editor.css

@@ -0,0 +1,226 @@
+/* ============================================================
+   NoirMD Editor CSS
+
+   Self-contained styles for the CodeMirror-based editor
+   (toolbar, fold toggle, mode buttons, split layout).
+
+   Pure CSS — no Tailwind dependency. Every rule uses CSS
+   variables with reference-palette fallbacks, so the host's
+   theme wins when defined and the editor still looks right
+   when it isn't.
+
+   Usage:
+     import '@noirmd/previewer/editor.css';
+   ============================================================ */
+
+/* ── Material Icons Round (self-hosted) ────────────────────
+   Toolbar buttons render icons via `material-icons-round`
+   ligatures. Self-hosted so icons work offline and without
+   host dependencies. */
+
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url('./fonts/material-icons-round.woff2') format('woff2');
+}
+
+.material-icons-round {
+  font-family: 'Material Icons Round';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Editor root layout ───────────────────────────────────── */
+
+.nr-editor {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: auto;
+  min-height: var(--nr-editor-min-height, 300px);
+}
+
+/* ── Toolbar ──────────────────────────────────────────────── */
+
+.nr-editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border, #334155) 50%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-secondary-solid, #1e293b) 60%, transparent);
+  border-radius: 16px 16px 0 0;
+  flex-shrink: 0;
+}
+
+.nr-editor-toolbar-left,
+.nr-editor-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.nr-toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  color: var(--color-text-secondary, #94a3b8);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-family: inherit;
+}
+.nr-toolbar-btn:hover {
+  color: var(--color-text-primary, #e2e8f0);
+  background-color: color-mix(in srgb, var(--color-accent-primary, #38bdf8) 10%, transparent);
+}
+.nr-toolbar-btn:active {
+  transform: scale(0.96);
+}
+
+.nr-toolbar-btn .nr-toolbar-label {
+  display: none;
+}
+@media (min-width: 640px) {
+  .nr-toolbar-btn .nr-toolbar-label {
+    display: inline;
+  }
+}
+
+/* Fold (collapse all) button */
+.nr-toolbar-btn-fold {
+  padding: 0.25rem;
+}
+.nr-toolbar-btn-fold .material-icons-round {
+  font-size: 15px;
+}
+.nr-toolbar-btn-fold:hover {
+  color: var(--color-accent-primary, #38bdf8);
+}
+
+/* Mode group — Editor / Split / Preview */
+.nr-toolbar-mode-group {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 0.5rem;
+  background-color: color-mix(in srgb, var(--color-base, #0f172a) 40%, transparent);
+}
+.nr-toolbar-btn-mode {
+  padding: 0.125rem 0.375rem;
+  font-size: 11px;
+  border-radius: 0.375rem;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+.nr-toolbar-btn-mode .material-icons-round {
+  font-size: 13px;
+}
+.nr-toolbar-btn-mode--active {
+  color: var(--color-accent-primary, #38bdf8);
+  background-color: color-mix(in srgb, var(--color-accent-primary, #38bdf8) 20%, transparent);
+  font-weight: 600;
+}
+@media (max-width: 639px) {
+  .nr-toolbar-btn-split {
+    display: none !important;
+  }
+}
+
+/* Right-side small buttons (Guía / Configurar) */
+.nr-toolbar-btn-sm {
+  padding: 0.125rem 0.375rem;
+  font-size: 11px;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+.nr-toolbar-btn-sm .material-icons-round {
+  font-size: 13px;
+}
+.nr-toolbar-btn-guide:hover,
+.nr-toolbar-btn-config:hover {
+  color: var(--color-accent-primary, #38bdf8);
+}
+
+/* Vertical divider */
+.nr-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background-color: color-mix(in srgb, var(--color-border, #334155) 60%, transparent);
+  flex-shrink: 0;
+}
+
+/* ── Content area — editor / split / preview ──────────────── */
+
+.nr-editor-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.nr-editor-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+.nr-editor-pane--half {
+  width: 50%;
+  border-right: 1px solid color-mix(in srgb, var(--color-border, #334155) 30%, transparent);
+}
+
+/* CodeMirror grows with its content — no fixed height. The uiw wrapper
+   is a plain block with no height of its own, so let the whole chain
+   size to the content and the root `min-height` (--nr-editor-min-height)
+   guarantees the editor never collapses. Self-contained: works in any
+   host, no Tailwind required. */
+.nr-editor-pane .cm-theme {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+}
+.nr-editor-pane .cm-editor {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+}
+
+.nr-editor-preview {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+.nr-editor-preview--half {
+  width: 50%;
+}
+
+.nr-editor-prose {
+  height: 100%;
+  overflow: auto;
+  padding: 1rem;
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@noirmd/previewer",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "type": "module",
-  "description": "Framework-agnostic markdown parser with React renderer, directives, cards, modals, and Tailwind styling",
+  "description": "Framework-agnostic markdown renderer: one vanilla DOM engine with thin React/Vue wrappers, directives, cards, modals, and pure CSS styling",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -44,16 +44,17 @@
       "require": "./dist/NReditor.cjs",
       "default": "./dist/NReditor.js"
     },
-    "./markdown.css": "./markdown.css"
+    "./editor.css": "./dist/editor.css"
   },
   "files": [
     "dist",
-    "markdown.css"
+    "editor.css"
   ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test:editor": "node test/build.mjs"
   },
   "keywords": [
     "markdown",
@@ -79,7 +80,6 @@
     "url": "https://github.com/NOIR-DexPrkr/NoirMD/issues"
   },
   "peerDependencies": {
-    "@base-ui/react": ">=1.0.0",
     "@codemirror/language": ">=6.0.0",
     "@codemirror/state": ">=6.0.0",
     "@codemirror/view": ">=6.0.0",
@@ -90,9 +90,6 @@
     "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
-    "@base-ui/react": {
-      "optional": true
-    },
     "vue": {
       "optional": true
     },

package/markdown.css

@@ -1,344 +0,0 @@
-/* NRpreviewer — Markdown typography
-   These styles work standalone without Tailwind.
-   If consumer has Tailwind, utility classes in JSX still apply on top. */
-
-.md-h1 {
-  font-size: 1.5rem;
-  font-weight: 800;
-  letter-spacing: -0.025em;
-  line-height: 1.2;
-  margin: 1.5rem 0 0.75rem;
-}
-@media (min-width: 640px) {
-  .md-h1 { font-size: 1.875rem; }
-}
-@media (min-width: 768px) {
-  .md-h1 { font-size: 2.25rem; }
-}
-
-.md-h2 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  line-height: 1.25;
-  margin: 1.25rem 0 0.625rem;
-}
-@media (min-width: 640px) {
-  .md-h2 { font-size: 1.5rem; }
-}
-@media (min-width: 768px) {
-  .md-h2 { font-size: 1.875rem; }
-}
-
-.md-h3 {
-  font-size: 1.125rem;
-  font-weight: 700;
-  line-height: 1.3;
-  margin: 1rem 0 0.5rem;
-}
-@media (min-width: 640px) {
-  .md-h3 { font-size: 1.25rem; }
-}
-@media (min-width: 768px) {
-  .md-h3 { font-size: 1.5rem; }
-}
-
-.md-h4 {
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.35;
-  margin: 0.75rem 0 0.375rem;
-}
-@media (min-width: 640px) {
-  .md-h4 { font-size: 1.125rem; }
-}
-@media (min-width: 768px) {
-  .md-h4 { font-size: 1.25rem; }
-}
-
-.md-h5 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0.625rem 0 0.25rem;
-}
-@media (min-width: 640px) {
-  .md-h5 { font-size: 1rem; }
-}
-@media (min-width: 768px) {
-  .md-h5 { font-size: 1.125rem; }
-}
-
-.md-h6 {
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0.5rem 0 0.25rem;
-}
-@media (min-width: 640px) {
-  .md-h6 { font-size: 0.875rem; }
-}
-@media (min-width: 768px) {
-  .md-h6 { font-size: 1rem; }
-}
-
-.md-p {
-  font-size: 0.875rem;
-  line-height: 1.625;
-  margin: 0.75rem 0;
-}
-@media (min-width: 640px) {
-  .md-p { font-size: 1rem; }
-}
-
-/* ── Links ── */
-.nr-prose a {
-  text-decoration: none !important;
-  color: var(--color-accent-primary, #0ea5e9);
-  transition: color 0.15s;
-}
-.nr-prose a: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; }
-}
-
-.nr-prose thead {
-  border-bottom: 2px solid var(--color-border, #e2e8f0);
-}
-
-.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-prose td {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border, #e2e8f0);
-}
-
-.nr-prose tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* ── 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-prose blockquote p {
-  margin: 0.25rem 0;
-}
-
-/* ── 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);
-}
-
-/* ── 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);
-}
-
-@media (min-width: 640px) {
-  .nr-prose pre { font-size: 0.875rem; }
-}
-
-/* ── Inline formatting ── */
-.nr-prose strong,
-.nr-prose b {
-  font-weight: 700;
-}
-
-.nr-prose em,
-.nr-prose i {
-  font-style: italic;
-}
-
-.nr-prose del,
-.nr-prose s {
-  text-decoration: line-through;
-  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 .spoiler:hover,
-.nr-prose [class*="bg-text-primary"][class*="text-bg-primary"]:hover {
-  background: transparent;
-  color: inherit;
-}
-
-/* ── Images ── */
-.nr-prose img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-}
-
-/* ── Scrollbar (for code blocks and tables) ── */
-.nr-prose pre::-webkit-scrollbar,
-.nr-prose .overflow-x-auto::-webkit-scrollbar {
-  height: 4px;
-}
-.nr-prose pre::-webkit-scrollbar-thumb,
-.nr-prose .overflow-x-auto::-webkit-scrollbar-thumb {
-  background: var(--color-border, #e2e8f0);
-  border-radius: 2px;
-}
-
-/* ── highlight.js theme — NoirMD ── */
-.hljs {
-  color: #e2e8f0;
-  background: transparent;
-}
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-section,
-.hljs-link {
-  color: #c084fc;
-  font-weight: 600;
-}
-.hljs-function .hljs-keyword {
-  color: #c084fc;
-}
-.hljs-string,
-.hljs-title,
-.hljs-name,
-.hljs-type,
-.hljs-attribute,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #4ade80;
-}
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion,
-.hljs-meta {
-  color: #64748b;
-  font-style: italic;
-}
-.hljs-number,
-.hljs-regexp,
-.hljs-literal,
-.hljs-built_in {
-  color: #fb923c;
-}
-.hljs-params {
-  color: #e2e8f0;
-}
-.hljs-attr {
-  color: #38bdf8;
-}
-.hljs-property {
-  color: #0ea5e9;
-}
-.hljs-selector-class,
-.hljs-selector-id {
-  color: #fbbf24;
-}
-.hljs-tag {
-  color: #f87171;
-}
-.hljs-emphasis {
-  font-style: italic;
-}
-.hljs-strong {
-  font-weight: 700;
-}