@noirmd/previewer 2.0.2 → 2.0.4

package/dist/editor.css

@@ -53,6 +53,14 @@
   min-height: var(--nr-editor-min-height, 300px);
 }
 
+/* Split mode: the editor drives the height (its content), the preview
+   is absolute over the right half at exactly the editor's height and
+   scrolls internally when taller. */
+.nr-editor--split {
+  flex: 0 1 auto;
+  height: auto;
+}
+
 /* ── Toolbar ──────────────────────────────────────────────── */
 
 .nr-editor-toolbar {
@@ -176,6 +184,7 @@
   display: flex;
   flex: 1 1 auto;
   min-height: 0;
+  position: relative;
 }
 
 .nr-editor-pane {
@@ -187,6 +196,7 @@
 }
 .nr-editor-pane--half {
   width: 50%;
+  flex: 0 1 auto;
   border-right: 1px solid color-mix(in srgb, var(--color-border, #334155) 30%, transparent);
 }
 
@@ -213,14 +223,218 @@
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
-  overflow: auto;
 }
 .nr-editor-preview--half {
-  width: 50%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 0;
+  width: auto;
+  overflow-y: auto;
 }
 
 .nr-editor-prose {
-  height: 100%;
-  overflow: auto;
   padding: 1rem;
 }
+
+/* ── Guide (syntax help panel) ──────────────────────────── */
+.nr-guide {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nr-guide__overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.6);
+  backdrop-filter: blur(2px);
+}
+.nr-guide__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(980px, 94vw);
+  height: min(740px, 88vh);
+  background: var(--color-background-primary, #0f172a);
+  border: 1px solid var(--color-border, #334155);
+  border-radius: 14px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+.nr-guide__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border, #334155);
+  background: var(--color-background-secondary-solid, #1e293b);
+}
+.nr-guide__head h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-text-primary, #e2e8f0);
+}
+.nr-guide__head .material-icons-round {
+  color: var(--color-accent-primary, #0ea5e9);
+  font-size: 22px;
+}
+.nr-guide__search {
+  margin-left: auto;
+  width: 260px;
+  padding: 6px 10px;
+  border: 1px solid var(--color-border, #334155);
+  border-radius: 8px;
+  background: var(--color-background-primary, #0f172a);
+  color: var(--color-text-primary, #e2e8f0);
+  font-size: 13px;
+  font-family: inherit;
+}
+.nr-guide__search:focus {
+  outline: none;
+  border-color: var(--color-accent-primary, #0ea5e9);
+}
+.nr-guide__search::placeholder {
+  color: var(--color-text-secondary, #94a3b8);
+}
+.nr-guide__close {
+  border: none;
+  background: none;
+  color: var(--color-text-secondary, #94a3b8);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+.nr-guide__close:hover {
+  color: var(--color-text-primary, #e2e8f0);
+  background: rgba(255, 255, 255, 0.06);
+}
+.nr-guide__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.nr-guide__nav {
+  width: 240px;
+  min-width: 240px;
+  overflow-y: auto;
+  border-right: 1px solid var(--color-border, #334155);
+  padding: 10px 8px;
+  background: color-mix(
+    in srgb,
+    var(--color-background-secondary-solid, #1e293b) 40%,
+    transparent
+  );
+}
+.nr-guide__cat {
+  margin-bottom: 4px;
+}
+.nr-guide__cat-head {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  background: none;
+  color: var(--color-text-secondary, #94a3b8);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  border-radius: 6px;
+}
+.nr-guide__cat-head:hover {
+  color: var(--color-text-primary, #e2e8f0);
+}
+.nr-guide__cat-chevron {
+  font-size: 16px;
+  transition: transform 0.15s;
+}
+.nr-guide__items {
+  list-style: none;
+  margin: 2px 0 8px;
+  padding: 0;
+}
+.nr-guide__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px 6px 24px;
+  border: none;
+  background: none;
+  color: var(--color-text-primary, #e2e8f0);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 6px;
+  font-family: inherit;
+}
+.nr-guide__item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.nr-guide__item--active {
+  background: color-mix(
+    in srgb,
+    var(--color-accent-primary, #0ea5e9) 18%,
+    transparent
+  );
+  color: var(--color-accent-primary, #0ea5e9);
+}
+.nr-guide__item-icon {
+  font-size: 15px;
+  opacity: 0.8;
+}
+.nr-guide__content {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 20px 26px;
+}
+.nr-guide__content > div {
+  height: 100%;
+}
+.nr-guide__content .nr-prose {
+  font-size: 14px;
+}
+.nr-guide__content h1 {
+  font-size: 1.5rem;
+}
+.nr-guide__content h2 {
+  font-size: 1.2rem;
+  margin-top: 1.8rem;
+}
+.nr-guide__empty {
+  color: var(--color-text-secondary, #94a3b8);
+  font-size: 14px;
+  padding: 40px 12px;
+  text-align: center;
+}
+@media (max-width: 720px) {
+  .nr-guide__nav {
+    width: 200px;
+    min-width: 200px;
+  }
+  .nr-guide__search {
+    width: 140px;
+  }
+}
+@media (max-width: 560px) {
+  .nr-guide__panel {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+    border: none;
+  }
+  .nr-guide__nav {
+    display: none;
+  }
+}

package/dist/hover3d.css

@@ -0,0 +1,157 @@
+/* ============================================================
+   NoirMD Vanilla — Hover 3D
+   ============================================================ */
+
+.nr-hover-3d {
+  display: inline-grid;
+  perspective: 75rem;
+  --transform: 0, 0;
+  --shine: 100% 100%;
+  --shadow: 0rem 0rem 0rem;
+  --ease: linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);
+
+  filter: drop-shadow(var(--shadow) 0.1rem #00000003) drop-shadow(var(--shadow) 0.2rem #00000003)
+    drop-shadow(var(--shadow) 0.3rem #00000003) drop-shadow(var(--shadow) 0.4rem #00000003);
+  transition: filter ease-out 400ms;
+}
+
+.nr-hover-3d > :nth-child(n + 2) {
+  isolation: isolate;
+  z-index: 1;
+}
+
+.nr-hover-3d__stage {
+  position: relative;
+  grid-area: 1 / 1 / 4 / 4;
+  overflow: hidden;
+  border-radius: 1rem;
+  transform: rotate3d(var(--transform), 0, 10deg);
+  transition:
+    transform var(--ease) 500ms,
+    scale var(--ease) 500ms,
+    outline-color ease-out 500ms;
+  outline: 0.5px solid #0000;
+  outline-offset: -1px;
+}
+
+.nr-hover-3d__stage::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  width: 33.3333%;
+  height: 33.3333%;
+  scale: 500%;
+  opacity: 0;
+  filter: blur(0.75rem);
+  background-image: radial-gradient(circle at 50%, #fff3 10%, transparent 50%);
+  translate: var(--shine);
+  transition:
+    translate ease-out 400ms,
+    opacity ease-out 400ms;
+}
+
+.nr-hover-3d__stage > * {
+  margin: 0;
+}
+
+.nr-hover-3d__stage img {
+  display: block;
+}
+
+.nr-hover-3d:hover {
+  --ease: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);
+
+  & > .nr-hover-3d__stage {
+    outline-color: #fff1;
+    scale: 1.05;
+  }
+
+  & > .nr-hover-3d__stage::before {
+    opacity: 1;
+  }
+}
+
+.nr-hover-3d > :nth-child(n + 2) {
+  scale: 1.2;
+}
+
+.nr-hover-3d > :nth-child(2) {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.nr-hover-3d > :nth-child(3) {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.nr-hover-3d > :nth-child(4) {
+  grid-area: 1 / 3 / 2 / 4;
+}
+
+.nr-hover-3d > :nth-child(5) {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.nr-hover-3d > :nth-child(6) {
+  grid-area: 2 / 3 / 3 / 4;
+}
+
+.nr-hover-3d > :nth-child(7) {
+  grid-area: 3 / 1 / 4 / 2;
+}
+
+.nr-hover-3d > :nth-child(8) {
+  grid-area: 3 / 2 / 4 / 3;
+}
+
+.nr-hover-3d > :nth-child(9) {
+  grid-area: 3 / 3 / 4 / 4;
+}
+
+.nr-hover-3d:has(> :nth-child(2):hover) {
+  --transform: -1, 1;
+  --shine: 0% 0%;
+  --shadow: -0.5rem -0.5rem;
+}
+
+.nr-hover-3d:has(> :nth-child(3):hover) {
+  --transform: -1, 0;
+  --shine: 100% 0%;
+  --shadow: 0rem -0.5rem;
+}
+
+.nr-hover-3d:has(> :nth-child(4):hover) {
+  --transform: -1, -1;
+  --shine: 200% 0%;
+  --shadow: 0.5rem -0.5rem;
+}
+
+.nr-hover-3d:has(> :nth-child(5):hover) {
+  --transform: 0, 1;
+  --shine: 0% 100%;
+  --shadow: -0.5rem 0rem;
+}
+
+.nr-hover-3d:has(> :nth-child(6):hover) {
+  --transform: 0, -1;
+  --shine: 200% 100%;
+  --shadow: 0.5rem 0rem;
+}
+
+.nr-hover-3d:has(> :nth-child(7):hover) {
+  --transform: 1, 1;
+  --shine: 0% 200%;
+  --shadow: -0.5rem 0.5rem;
+}
+
+.nr-hover-3d:has(> :nth-child(8):hover) {
+  --transform: 1, 0;
+  --shine: 100% 200%;
+  --shadow: 0rem 0.5rem;
+}
+
+.nr-hover-3d:has(> :nth-child(9):hover) {
+  --transform: 1, -1;
+  --shine: 200% 200%;
+  --shadow: 0.5rem 0.5rem;
+}

package/dist/hovergallery.css

@@ -0,0 +1,110 @@
+/* ============================================================
+   NoirMD Vanilla — Hover Gallery
+   ============================================================ */
+
+.nr-hover-gallery {
+  --items: 1;
+  display: inline-grid;
+  grid-template-columns: repeat(var(--items), 1fr);
+  width: 100%;
+  max-width: 100%;
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--nr-radius-sm);
+  background: var(--nr-bg-secondary);
+  margin: 1rem 0;
+}
+
+.nr-hover-gallery:has(> :nth-child(3)) {
+  --items: 2;
+}
+
+.nr-hover-gallery:has(> :nth-child(4)) {
+  --items: 3;
+}
+
+.nr-hover-gallery:has(> :nth-child(5)) {
+  --items: 4;
+}
+
+.nr-hover-gallery:has(> :nth-child(6)) {
+  --items: 5;
+}
+
+.nr-hover-gallery:has(> :nth-child(7)) {
+  --items: 6;
+}
+
+.nr-hover-gallery:has(> :nth-child(8)) {
+  --items: 7;
+}
+
+.nr-hover-gallery:has(> :nth-child(9)) {
+  --items: 8;
+}
+
+.nr-hover-gallery:has(> :nth-child(10)) {
+  --items: 9;
+}
+
+.nr-hover-gallery > * {
+  opacity: 0;
+  height: 100%;
+  grid-row: 1;
+  object-fit: cover;
+  width: 100%;
+}
+
+.nr-hover-gallery > :nth-child(1) {
+  grid-column: 1 / -1;
+  opacity: 1;
+}
+
+.nr-hover-gallery > :nth-child(2) {
+  grid-column: 1;
+}
+
+.nr-hover-gallery > :nth-child(3) {
+  grid-column: 2;
+}
+
+.nr-hover-gallery > :nth-child(4) {
+  grid-column: 3;
+}
+
+.nr-hover-gallery > :nth-child(5) {
+  grid-column: 4;
+}
+
+.nr-hover-gallery > :nth-child(6) {
+  grid-column: 5;
+}
+
+.nr-hover-gallery > :nth-child(7) {
+  grid-column: 6;
+}
+
+.nr-hover-gallery > :nth-child(8) {
+  grid-column: 7;
+}
+
+.nr-hover-gallery > :nth-child(9) {
+  grid-column: 8;
+}
+
+.nr-hover-gallery > :nth-child(10) {
+  grid-column: 9;
+}
+
+.nr-hover-gallery > :nth-child(n + 11) {
+  display: none;
+}
+
+.nr-hover-gallery > *:hover {
+  grid-column: 1 / -1;
+  opacity: 1;
+}
+
+.nr-hover-gallery:has(*:hover) > :nth-child(1) {
+  display: none;
+}