@lapismd/mira 0.0.1

package/dist/preview/styles/source-mode.css

@@ -0,0 +1,498 @@
+.markdown-editor-surface .cm-editor {
+  cursor: text;
+  font-family: var(--font-sans);
+  font-size: var(--font-text-size);
+  width: 100%;
+  --hmd-unordered-list-marker-slot-width: 15px;
+  --hmd-unordered-list-marker-padding-inline-start: 3px;
+  --hmd-unordered-list-marker-guide-offset: calc(
+    var(--hmd-unordered-list-marker-slot-width) / 2
+  );
+}
+
+/* Keep authored pipe-table columns aligned without changing rendered tables. */
+:is(
+    .markdown-source-mode .cm-editor.markdown-source-view,
+    .cm-editor.markdown-live-preview-mode
+  )
+  .cm-line.cm-table {
+  font-family: var(--font-monospace);
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  white-space: pre;
+  width: fit-content;
+}
+
+:is(
+    .markdown-source-mode .cm-editor.markdown-source-view,
+    .cm-editor.markdown-live-preview-mode
+  )
+  .cm-line.cm-table::-webkit-scrollbar {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+.markdown-editor-surface .cm-editor .cm-formatting-list-ul,
+.markdown-editor-surface .cm-editor .cm-formatting-list-ol {
+  font-variant-numeric: tabular-nums;
+  padding-inline-start: 0;
+}
+
+.markdown-editor-surface .cm-editor .cm-formatting-task {
+  color: var(--markdown-code-comment);
+}
+
+.markdown-live-preview-mode .cm-editor .cm-formatting-list-ul:not(.cm-line) {
+  box-sizing: border-box;
+  display: inline-block;
+  inline-size: var(--hmd-unordered-list-marker-slot-width);
+  padding-inline-start: var(--hmd-unordered-list-marker-padding-inline-start);
+}
+
+.markdown-live-preview-mode
+  .cm-editor
+  .cm-formatting-list-bullet
+  > span.cm-meta {
+  color: transparent;
+  display: inline-block;
+  position: relative;
+}
+
+.markdown-live-preview-mode
+  .cm-editor
+  .cm-formatting-list-bullet
+  > span.cm-meta::after {
+  background-color: var(--list-marker-color);
+  border-radius: var(--list-bullet-radius);
+  content: "";
+  height: var(--list-bullet-size);
+  inset-inline-start: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition:
+    background-color 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
+  width: var(--list-bullet-size);
+}
+
+.markdown-live-preview-mode
+  .cm-editor
+  .cm-line:hover
+  .cm-formatting-list-bullet
+  > span.cm-meta::after,
+.markdown-live-preview-mode
+  .cm-editor
+  .cm-activeLine
+  .cm-formatting-list-bullet
+  > span.cm-meta::after {
+  background-color: var(--markdown-list-marker-color-hover);
+  box-shadow: 0 0 0 4px var(--background-modifier-hover);
+}
+
+.markdown-editor-surface .cm-editor .HyperMD-list-line {
+  white-space: pre-wrap;
+}
+
+.markdown-editor-surface .cm-editor .indented-wrapped-line {
+  padding-inline-start: var(
+    --hmd-indent-padding-measured,
+    var(--hmd-indent-padding-fallback, 0px)
+  );
+  text-indent: calc(
+    0px -
+      var(--hmd-indent-prefix-measured, var(--hmd-indent-prefix-fallback, 0px))
+  );
+}
+
+.markdown-editor-surface
+  .cm-editor
+  .indented-wrapped-line:has(.cm-hmd-list-indent) {
+  text-indent: calc(
+    0px -
+      var(
+        --hmd-indent-prefix-measured,
+        var(
+          --hmd-indent-widget-prefix-fallback,
+          var(--hmd-indent-prefix-fallback, 0px)
+        )
+      )
+  );
+}
+
+.markdown-editor-surface .cm-editor .cm-line > * {
+  text-indent: 0;
+}
+
+.markdown-editor-surface .cm-editor .cm-hmd-list-indent {
+  display: inline-block;
+  white-space: pre;
+}
+
+.markdown-editor-surface .cm-editor .cm-indent-guide {
+  min-width: var(--list-indent);
+}
+
+.markdown-editor-surface .cm-editor .cm-plain-indent-line,
+.markdown-editor-surface .cm-editor .cm-plain-indent-widget {
+  position: relative;
+}
+
+.markdown-editor-surface .cm-editor .cm-hmd-list-indent .cm-indent,
+.markdown-editor-surface .cm-editor .cm-plain-indent-widget .cm-indent {
+  color: transparent;
+  display: inline-block;
+  position: relative;
+  white-space: pre;
+}
+
+.markdown-editor-surface
+  .cm-editor.cm-show-indentation-guides
+  .indented-wrapped-line {
+  position: relative;
+}
+
+.markdown-editor-surface
+  .cm-editor.cm-show-indentation-guides
+  .indented-wrapped-line::before {
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--markdown-indentation-guide-color, var(--indentation-guide-color)) 0,
+    var(--markdown-indentation-guide-color, var(--indentation-guide-color))
+      var(--markdown-indentation-guide-width, var(--indentation-guide-width)),
+    transparent
+      var(--markdown-indentation-guide-width, var(--indentation-guide-width)),
+    transparent calc(var(--indent-size, 4) * 1ch)
+  );
+  background-repeat: repeat-x;
+  background-size: calc(var(--indent-size, 4) * 1ch) 100%;
+  bottom: 0;
+  content: "";
+  inset-inline-start: var(--hmd-indent-guide-offset, 0px);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: calc(var(--indent-guide-count, 0) * var(--indent-size, 4) * 1ch);
+}
+
+.markdown-editor-surface
+  .cm-editor.cm-show-indentation-guides
+  .cm-activeLine.indented-wrapped-line::before {
+  background-image: repeating-linear-gradient(
+    to right,
+    var(
+        --markdown-indentation-guide-color-active,
+        var(--indentation-guide-color-active)
+      )
+      0,
+    var(
+        --markdown-indentation-guide-color-active,
+        var(--indentation-guide-color-active)
+      )
+      var(
+        --markdown-indentation-guide-width-active,
+        var(--indentation-guide-width-active)
+      ),
+    transparent
+      var(
+        --markdown-indentation-guide-width-active,
+        var(--indentation-guide-width-active)
+      ),
+    transparent calc(var(--indent-size, 4) * 1ch)
+  );
+}
+
+.markdown-editor-surface
+  .cm-editor.cm-show-indentation-guides
+  .cm-hmd-list-indent
+  .cm-indent-guide::before,
+.markdown-editor-surface
+  .cm-editor.cm-show-indentation-guides
+  .cm-plain-indent-widget
+  .cm-indent-guide::before {
+  display: none;
+}
+
+.markdown-editor-surface
+  .cm-editor.markdown-source-view:has(.cm-formatting-code-language-text)
+  > .cm-scroller {
+  overflow-x: hidden;
+}
+
+.markdown-editor-surface
+  .cm-editor
+  .cm-content.cm-lineWrapping:has(.cm-formatting-code-language-text) {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.markdown-editor-surface .cm-editor .cm-line.cm-formatting-code-language-text {
+  max-width: none;
+  min-width: max-content;
+  overflow: visible;
+  padding-inline-start: 24px !important;
+  text-indent: 0 !important;
+  white-space: pre;
+  width: max-content;
+}
+
+.markdown-editor-surface .cm-editor.mod-inline {
+  background-color: var(--code-background);
+  color: var(--code-normal);
+  font-size: var(--code-size);
+}
+
+.markdown-editor-surface .cm-editor .cm-gutter.cm-foldGutter {
+  display: none;
+}
+
+.markdown-editor-surface .cm-line {
+  max-width: var(--file-line-width);
+}
+
+.markdown-editor-surface .cm-inline-code,
+.markdown-editor-surface .cm-formatting-code,
+.markdown-editor-surface .HyperMD-codeblock,
+.markdown-editor-surface .cm-label,
+.markdown-editor-surface .cm-math,
+.markdown-editor-surface .cm-line.cm-hmd-frontmatter {
+  font-family: var(--font-monospace);
+}
+
+.markdown-editor-surface .cm-inline-code,
+.markdown-editor-surface .cm-label,
+.markdown-editor-surface .cm-math {
+  color: var(--markdown-code-normal, var(--code-normal));
+}
+
+/* Match reading-mode <code> chips (code-katex.css) in source + live preview. */
+.markdown-editor-surface .cm-inline-code {
+  background-color: var(--markdown-code-background);
+  border: var(--markdown-code-border-width) solid
+    var(--markdown-code-border-color);
+  border-radius: var(--markdown-code-radius);
+  font-size: var(--markdown-code-size);
+  padding: 0.15em 0.3em;
+}
+
+.markdown-editor-surface .cm-editor .cm-formatting-code {
+  padding-inline-start: 24px;
+  position: relative;
+  /* Fence lines must not inherit hanging-indent text-indent. */
+  text-indent: 0;
+}
+
+.markdown-editor-surface
+  .cm-editor
+  .cm-line.cm-formatting-code.indented-wrapped-line {
+  padding-inline-start: 24px !important;
+  text-indent: 0 !important;
+}
+
+/* Lapis source HyperMD chrome + formatting-code background. */
+.markdown-editor-surface .cm-editor .HyperMD-codeblock.HyperMD-codeblock-bg {
+  background-color: color-mix(in oklab, var(--secondary) 60%, transparent);
+}
+
+.markdown-editor-surface .cm-formatting-code,
+.markdown-editor-surface .cm-editor .cm-activeLine.cm-line.cm-formatting-code {
+  background-color: var(--markdown-code-background);
+}
+
+.markdown-editor-surface .cm-formatting-code.cm-formatting-code-start {
+  border-color: var(--border);
+  border-radius: var(--radius-m) var(--radius-m) 0 0;
+}
+
+.markdown-editor-surface .cm-formatting-code.cm-formatting-code-end {
+  border-color: var(--border);
+  border-radius: 0 0 var(--radius-m) var(--radius-m);
+}
+
+/* Indented Markdown code is a block even though its CodeText token is inline. */
+.markdown-editor-surface .cm-editor .cm-line.cm-indented-codeblock,
+.markdown-editor-surface
+  .cm-editor
+  .cm-activeLine.cm-line.cm-indented-codeblock {
+  background-color: color-mix(in oklab, var(--secondary) 60%, transparent);
+  border-inline: 2px solid var(--secondary);
+  box-sizing: border-box;
+  padding-inline-end: 1rem;
+}
+
+.markdown-editor-surface .cm-editor .cm-line.cm-indented-codeblock-start {
+  border-block-start: 2px solid var(--secondary);
+  border-radius: var(--radius-s) var(--radius-s) 0 0;
+  padding-block-start: 1rem;
+}
+
+.markdown-editor-surface .cm-editor .cm-line.cm-indented-codeblock-end {
+  border-block-end: 2px solid var(--secondary);
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
+  padding-block-end: 1rem;
+}
+
+.markdown-editor-surface
+  .cm-editor
+  .cm-line.cm-indented-codeblock-start.cm-indented-codeblock-end {
+  border-radius: var(--radius-s);
+}
+
+.markdown-editor-surface
+  .cm-editor
+  .cm-line.cm-indented-codeblock
+  .cm-inline-code {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+.markdown-editor-surface .cm-comment,
+.markdown-editor-surface .cm-meta {
+  color: var(--markdown-code-comment);
+}
+
+.markdown-editor-surface .cm-tag {
+  color: var(--markdown-code-tag);
+}
+
+.markdown-editor-surface .cm-punctuation,
+.markdown-editor-surface .cm-bracket,
+.markdown-editor-surface .cm-hr {
+  color: var(--markdown-code-punctuation);
+}
+
+.markdown-editor-surface .cm-number {
+  color: var(--markdown-code-value);
+}
+
+.markdown-editor-surface .cm-string,
+.markdown-editor-surface .cm-string-2,
+.markdown-editor-surface .cm-qualifier {
+  color: var(--markdown-code-string);
+}
+
+.markdown-editor-surface .cm-operator {
+  color: var(--markdown-code-operator);
+}
+
+.markdown-editor-surface .cm-variable,
+.markdown-editor-surface .cm-variable-2,
+.markdown-editor-surface .cm-variable-3 {
+  color: var(--markdown-code-property);
+}
+
+.markdown-editor-surface .cm-emphasis {
+  font-style: italic;
+}
+
+.markdown-editor-surface .cm-strong {
+  font-weight: 800;
+}
+
+.markdown-editor-surface .cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.markdown-editor-surface .cm-link-text,
+.markdown-editor-surface .cm-link-string,
+.markdown-editor-surface .cm-link-target {
+  color: var(--markdown-link-color);
+}
+
+.markdown-editor-surface .cm-link-target {
+  text-decoration-line: var(--markdown-link-decoration);
+  text-decoration-thickness: var(--markdown-link-decoration-thickness);
+}
+
+.markdown-editor-surface .cm-blockquote {
+  position: relative;
+}
+
+.markdown-editor-surface .cm-blockquote-border {
+  display: inline-block;
+}
+
+.markdown-editor-surface .cm-blockquote::before,
+.markdown-editor-surface .cm-blockquote-border::before {
+  border-inline-start: var(--markdown-blockquote-border-thickness) solid
+    var(--markdown-blockquote-border-color);
+  bottom: 0;
+  color: transparent;
+  content: "\200b";
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
+.markdown-editor-surface .cm-editor .cm-line.cm-blockquote::before {
+  inset-inline-start: 0;
+}
+
+.markdown-live-preview-mode .cm-blockquote .cm-formatting-quote > span {
+  color: transparent;
+}
+
+.markdown-live-preview-mode
+  .cm-blockquote.cm-activeLine
+  .cm-formatting-quote
+  > span {
+  color: var(--markdown-faint-color);
+}
+
+.markdown-live-preview-mode
+  .cm-blockquote.cm-activeLine
+  .cm-blockquote-border::before {
+  border-inline-start-color: transparent;
+}
+
+.markdown-editor-surface .cm-line .cm-fold-indicator {
+  display: inline-block;
+  opacity: 0;
+  overflow: visible;
+  position: relative;
+  vertical-align: middle;
+  width: 0;
+}
+
+.markdown-editor-surface .cm-line:hover .cm-fold-indicator,
+.markdown-editor-surface .cm-activeLine .cm-fold-indicator,
+.markdown-editor-surface .cm-fold-indicator:hover {
+  opacity: 1;
+}
+
+.markdown-editor-surface .cm-fold-indicator .collapse-indicator {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--markdown-collapse-icon-color);
+  cursor: pointer;
+  display: flex;
+  height: 1rem;
+  inset-inline-end: 0;
+  justify-content: center;
+  min-height: 0;
+  min-width: 0;
+  padding: 0;
+  padding-inline-end: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(calc(-50% - 2px));
+  width: 1rem;
+}
+
+.markdown-editor-surface .cm-fold-indicator .collapse-indicator .svg-icon {
+  display: block;
+  height: 12px;
+  stroke-width: 3px;
+  width: 12px;
+}

package/dist/preview/styles/source-mode.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=source-mode.test.d.ts.map

package/dist/preview/styles/source-mode.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-mode.test.d.ts","sourceRoot":"","sources":["../../../src/preview/styles/source-mode.test.ts"],"names":[],"mappings":""}

package/dist/preview/styles/source-mode.test.js

@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { cwd } from "node:process";
+import { describe, expect, it } from "vitest";
+const sourceModeStyles = () => readFileSync(resolve(cwd(), "src/preview/styles/source-mode.css"), "utf8");
+describe("source mode styles", () => {
+    it("reserves full guide slots only for complete indentation guide segments", () => {
+        const styles = sourceModeStyles();
+        expect(styles).toContain(".markdown-editor-surface .cm-editor .cm-indent-guide");
+        expect(styles).toContain("min-width: var(--list-indent)");
+        expect(styles).not.toMatch(/\.markdown-editor-surface\s+\.cm-editor\s+\.cm-indent\s*\{[^}]*min-width:\s*var\(--list-indent\)/u);
+    });
+});

package/dist/preview/styles/surfaces.css

@@ -0,0 +1,56 @@
+.mira-markdown-preview {
+  height: 100%;
+  overflow: auto;
+}
+
+.markdown-preview-surface {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4-5);
+  padding: var(--mira-preview-padding);
+}
+
+.markdown-preview-surface--embedded,
+.markdown-preview-surface[data-markdown-embed="true"] {
+  --mira-preview-padding: 0;
+  --mira-preview-bottom-padding: 0;
+}
+
+/* Lapis note column: centered readable width for reading + editor. */
+.cm-sizer {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  margin-inline: auto;
+  max-width: var(--file-line-width);
+  min-height: 100%;
+  width: 100%;
+}
+
+.markdown-preview-surface > .cm-sizer {
+  flex: 1 1 auto;
+  gap: var(--size-4-5);
+  min-height: 0;
+}
+
+.markdown-preview-surface > .cm-sizer:empty {
+  display: none;
+}
+
+.markdown-preview-surface .markdown-view__document {
+  max-width: none;
+  padding-bottom: var(--mira-preview-bottom-padding);
+  width: 100%;
+}
+
+.markdown-preview-surface--embedded .markdown-view__document,
+.markdown-preview-surface[data-markdown-embed="true"] .markdown-view__document {
+  max-width: none;
+  padding-bottom: 0;
+}
+
+.mira .markdown-preview-surface,
+.mira .markdown-editor-surface {
+  font-family: var(--mira-font-sans);
+  font-size: var(--mira-font-size);
+}