@alwith/module-editor 0.0.0-stage → 0.1.0-rc.13

package/dist/previews/markdown.css

@@ -0,0 +1,918 @@
+/* Desktop Markdown typography, using host semantic colors without global preflight. */
+.alwith-markdown-scroll {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+}
+.alwith-markdown-view .ProseMirror {
+  max-width: none;
+  margin: 0;
+  min-height: 100%;
+  outline: none;
+}
+:is(.alwith-editor .alwith-markdown-action, .alwith-markdown-action) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+}
+:is(.alwith-editor .alwith-markdown-action, .alwith-markdown-action):hover,
+.alwith-markdown-outline-popup button:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+:is(.alwith-editor .alwith-markdown-action, .alwith-markdown-action):focus-visible,
+.alwith-markdown-outline-popup button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.alwith-markdown-outline-positioner {
+  z-index: 50;
+}
+.alwith-markdown-outline-popup {
+  box-sizing: border-box;
+  width: 288px;
+  max-height: 60vh;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+.alwith-markdown-outline-popup ul {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.alwith-markdown-outline-popup button {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  text-align: start;
+  font-size: 12px;
+  line-height: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.alwith-markdown-outline-empty {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.alwith-markdown-view .ProseMirror {
+  color: var(--md-fg);
+  font-size: 14px;
+  line-height: 1.7;
+  word-wrap: break-word;
+}
+
+.alwith-markdown-view .ProseMirror {
+  --md-fg: var(--foreground);
+  --md-fg-muted: var(--muted-foreground);
+  --md-bg-code: var(--muted);
+  --md-bg-code-inline: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
+  --md-bg-tbl-head: var(--muted);
+  --md-bg-tbl-row-alt: color-mix(in srgb, var(--muted) 50%, var(--background));
+  --md-bg-tbl-cell: var(--background);
+  --md-border: var(--border);
+  --md-border-muted: var(--border);
+  --md-link: var(--primary);
+  --md-blockquote-bar: var(--border);
+}
+
+.alwith-markdown-view .ProseMirror :where(p) {
+  margin: 0 0 12px;
+  line-height: 1.7;
+}
+
+.alwith-markdown-view .ProseMirror :where(p:last-child) {
+  margin-bottom: 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(h1, h2, h3, h4, h5, h6) {
+  margin: 24px 0 10px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--md-fg);
+}
+
+.alwith-markdown-view .ProseMirror :where(h1) {
+  font-size: 1.85em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--md-border-muted);
+}
+
+.alwith-markdown-view .ProseMirror :where(h2) {
+  font-size: 1.45em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--md-border-muted);
+}
+
+.alwith-markdown-view .ProseMirror :where(h3) {
+  font-size: 1.2em;
+}
+
+.alwith-markdown-view .ProseMirror :where(h4) {
+  font-size: 1em;
+}
+
+.alwith-markdown-view .ProseMirror :where(h5),
+.alwith-markdown-view .ProseMirror :where(h6) {
+  font-size: 0.9em;
+  color: var(--md-fg-muted);
+}
+
+.alwith-markdown-view .ProseMirror :where(h1:first-child, h2:first-child, h3:first-child) {
+  margin-top: 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(a) {
+  color: var(--md-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+
+.alwith-markdown-view .ProseMirror :where(a:hover) {
+  opacity: 0.85;
+}
+
+.alwith-markdown-view .ProseMirror :where(code):not(pre code) {
+  background: var(--md-bg-code-inline);
+  color: var(--md-fg);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 85%;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  border: 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(code)::before,
+.alwith-markdown-view .ProseMirror :where(code)::after {
+  content: none;
+}
+
+.alwith-markdown-view .ProseMirror :where(pre) {
+  background: var(--md-bg-code);
+  color: var(--md-fg);
+  border-radius: 6px;
+  padding: 16px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 85%;
+  line-height: 1.5;
+  overflow-x: auto;
+  margin: 12px 0;
+  border: 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(pre code) {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  font-size: inherit;
+  border: 0;
+  border-radius: 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(blockquote) {
+  margin: 12px 0;
+  padding: 0 16px;
+  border-left: 4px solid var(--md-blockquote-bar);
+  color: var(--md-fg-muted);
+  background: transparent;
+}
+
+.alwith-markdown-view .ProseMirror :where(blockquote p) {
+  margin: 6px 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(.tableWrapper) {
+  margin: 16px 0;
+  border-radius: 6px;
+  border: 1px solid var(--md-border);
+  overflow: hidden;
+}
+
+.alwith-markdown-view .ProseMirror :where(table) {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: 0;
+  background: var(--md-bg-tbl-cell);
+}
+
+.alwith-markdown-view .ProseMirror :where(thead) {
+  background: var(--md-bg-tbl-head);
+}
+
+.alwith-markdown-view .ProseMirror :where(th) {
+  background: var(--md-bg-tbl-head);
+  color: var(--md-fg);
+  font-weight: 600;
+  padding: 8px 14px;
+  border: 1px solid var(--md-border);
+  text-align: left;
+}
+
+.alwith-markdown-view .ProseMirror :where(td) {
+  background: var(--md-bg-tbl-cell);
+  color: var(--md-fg);
+  padding: 8px 14px;
+  border: 1px solid var(--md-border);
+}
+
+.alwith-markdown-view .ProseMirror :where(tbody tr:nth-child(even) td) {
+  background: var(--md-bg-tbl-row-alt);
+}
+
+.alwith-markdown-view .ProseMirror :where(hr) {
+  height: 1px;
+  background: var(--md-border-muted);
+  border: 0;
+  margin: 24px 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(ul) {
+  list-style-type: disc;
+}
+
+.alwith-markdown-view .ProseMirror :where(ol) {
+  list-style-type: decimal;
+}
+
+.alwith-markdown-view .ProseMirror :where(ul ul) {
+  list-style-type: circle;
+}
+
+.alwith-markdown-view .ProseMirror :where(ul ul ul) {
+  list-style-type: square;
+}
+
+.alwith-markdown-view .ProseMirror :where(ul, ol) {
+  padding-left: 2em;
+  margin: 8px 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(li) {
+  margin: 4px 0;
+  line-height: 1.7;
+}
+
+.alwith-markdown-view .ProseMirror :where(li > p) {
+  margin: 4px 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(li::marker) {
+  color: var(--md-fg-muted);
+}
+
+.alwith-markdown-view .ProseMirror :where(li > ul, li > ol) {
+  padding-left: 1.5em;
+  margin: 2px 0;
+}
+
+.alwith-markdown-view .ProseMirror :where(img) {
+  max-width: 100%;
+  border-radius: 6px;
+  margin: 8px 0;
+}
+
+.alwith-markdown-view .ProseMirror > :first-child {
+  margin-top: 0;
+}
+
+.alwith-markdown-view .ProseMirror > :last-child {
+  margin-bottom: 0;
+}
+
+.alwith-markdown-view .ProseMirror ::selection {
+  background: color-mix(in srgb, var(--primary) 30%, transparent);
+}
+
+/* Desktop readonly typeset and code-block styles, scoped to the preview. */
+/*
+ * shadcn/typeset
+ * https://ui.shadcn.com/docs/typeset.
+ */
+
+@layer components {
+  .alwith-markdown-readonly {
+    --typeset-font-body: inherit;
+    --typeset-font-heading: var(--font-heading);
+    --typeset-font-mono: var(--font-mono);
+    --typeset-size: 1em;
+    --typeset-leading: 1.75;
+    --typeset-flow: 1.25em;
+  }
+}
+
+@layer components {
+  .alwith-markdown-readonly {
+    font-family: var(--typeset-font-body);
+    font-size: calc(var(--typeset-size) * 1.125);
+    line-height: var(--typeset-leading);
+    color: var(--foreground, currentColor);
+    overflow-wrap: break-word;
+    margin-trim: block-start;
+
+    @media (min-width: 48rem), print {
+      font-size: var(--typeset-size);
+    }
+
+    --typeset-muted: var(--muted-foreground, color-mix(in oklab, currentColor 60%, transparent));
+    --typeset-rule: var(--border, color-mix(in oklab, currentColor 20%, transparent));
+  }
+
+  .alwith-markdown-readonly *:not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+    /* Paragraphs. */
+    &:where(p) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+
+    /* Headings. */
+    &:where(h1, h2, h3, h4, h5, h6) {
+      color: var(--foreground, currentColor);
+      font-family: var(--typeset-font-heading);
+      font-weight: 600;
+      margin-block-end: 0;
+    }
+    &:where(h1) {
+      font-size: 1.75em;
+      line-height: 1.3;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h2) {
+      font-size: 1.25em;
+      line-height: 1.4;
+      margin-block-start: calc(var(--typeset-flow) * 1.4);
+    }
+    &:where(h3) {
+      font-size: 1.125em;
+      line-height: 1.45;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h4) {
+      font-size: 1em;
+      line-height: 1.5;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(h5) {
+      font-size: 0.875em;
+      line-height: 1.5;
+      font-weight: 500;
+      color: var(--typeset-muted);
+      margin-block-start: calc(var(--typeset-flow) / 0.875);
+    }
+    &:where(h6) {
+      font-size: 0.8125em;
+      line-height: 1.5;
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--typeset-muted);
+      margin-block-start: calc(var(--typeset-flow) / 0.8125);
+    }
+    /* Anchors. */
+    &:where([id]) {
+      scroll-margin-block-start: var(--typeset-flow);
+    }
+
+    /* Headings own the space below them. */
+    &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+      margin-block-start: 1em;
+    }
+    &:where(:is(h1, h2, h3, h4) :is(code)) {
+      font-size: 0.9em;
+    }
+
+    /* Links. */
+    &:where(a) {
+      color: inherit;
+      font-weight: 500;
+      text-decoration-line: underline;
+      text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+    &:where(a:hover) {
+      text-decoration-color: currentColor;
+    }
+    &:where(a:focus-visible) {
+      outline: 2px solid var(--ring, currentColor);
+      outline-offset: 2px;
+      border-radius: 0.125em;
+    }
+    &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
+      font-weight: inherit;
+    }
+
+    /* Inline semantics. */
+    &:where(strong, b) {
+      font-weight: 600;
+    }
+    &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
+      font-weight: 600;
+    }
+    &:where(mark) {
+      background-color: color-mix(in oklab, var(--accent) 40%, transparent);
+      color: inherit;
+      padding: 0.05em 0.15em;
+      border-radius: 0.2em;
+    }
+    &:where(abbr[title]) {
+      text-decoration-line: underline;
+      text-decoration-style: dotted;
+      text-underline-offset: 0.2em;
+      cursor: help;
+    }
+    &:where(del, s) {
+      color: var(--typeset-muted);
+      text-decoration-line: line-through;
+    }
+    &:where(sup, sub) {
+      font-size: 0.75em;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+    }
+    &:where(sup) {
+      top: -0.5em;
+    }
+    &:where(sub) {
+      bottom: -0.25em;
+    }
+    &:where(sup a) {
+      text-decoration-line: none;
+      font-weight: 500;
+    }
+
+    /* Lists. */
+    &:where(ul) {
+      list-style-type: disc;
+    }
+    &:where(ol) {
+      list-style-type: decimal;
+    }
+    &:where(ul ul) {
+      list-style-type: circle;
+    }
+    &:where(ul ul ul) {
+      list-style-type: square;
+    }
+    &:where(ol[type="a" i]) {
+      list-style-type: lower-alpha;
+    }
+    &:where(ol[type="i" i]) {
+      list-style-type: lower-roman;
+    }
+    &:where(ol[type="A" s]) {
+      list-style-type: upper-alpha;
+    }
+    &:where(ol[type="I" s]) {
+      list-style-type: upper-roman;
+    }
+    &:where(ul, ol) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      padding-inline-start: 1.5em;
+    }
+    &:where(li) {
+      margin-block-start: 0.5em;
+      padding-inline-start: 0.4em;
+    }
+    &:where(li > p, li > ul, li > ol) {
+      margin-block-start: 0.5em;
+    }
+    &:where(ul > li)::marker {
+      color: var(--typeset-muted);
+    }
+    &:where(ol > li)::marker {
+      color: var(--typeset-muted);
+    }
+
+    /* GFM task lists. */
+    &:where(ul.contains-task-list) {
+      list-style-type: none;
+      padding-inline-start: 0.25em;
+    }
+    &:where(li.task-list-item > input[type="checkbox"]) {
+      margin-inline-end: 0.5em;
+      vertical-align: -0.1em;
+      accent-color: var(--primary, currentColor);
+    }
+
+    /* Disclosures. */
+    &:where(details) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(summary) {
+      cursor: pointer;
+      font-weight: 500;
+    }
+    &:where(summary)::marker {
+      color: var(--typeset-muted);
+    }
+
+    /* Keyboard keys. */
+    &:where(kbd) {
+      font-family: inherit;
+      font-size: 0.85em;
+      font-weight: 500;
+      border: 1px solid var(--typeset-rule);
+      border-block-end-width: 2px;
+      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
+      padding: 0.0625em 0.35em;
+    }
+
+    /* Definition lists. */
+    &:where(dl) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(dt) {
+      font-weight: 500;
+      margin-block-start: 1em;
+    }
+    &:where(dt + dt) {
+      margin-block-start: 0.25em;
+    }
+    &:where(dd) {
+      margin-block-start: 0.25em;
+      margin-inline-start: 0;
+      padding-inline-start: 1em;
+      color: var(--typeset-muted);
+    }
+
+    /* Inline code. */
+    &:where(:not(pre) > code) {
+      background-color: var(--muted, color-mix(in oklab, currentColor 8%, transparent));
+      font-family: var(--typeset-font-mono);
+      font-size: 0.85em;
+      border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
+      padding: 0.125em 0.3em;
+    }
+
+    /* Code blocks. */
+    &:where(pre) {
+      background-color: var(--muted, color-mix(in oklab, currentColor 8%, transparent));
+      font-family: var(--typeset-font-mono);
+      font-size: 0.875em;
+      line-height: 1.5;
+      tab-size: 2;
+      direction: ltr;
+      border-radius: var(--radius, 0.5em);
+      padding: 0.75em 1em;
+      overflow-x: auto;
+      margin-block-start: calc(var(--typeset-flow) / 0.875);
+      margin-block-end: 0;
+    }
+    &:where(pre code) {
+      background-color: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    /* Blockquote. */
+    &:where(blockquote) {
+      border-inline-start: 2px solid var(--typeset-rule);
+      padding-inline-start: 1em;
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+
+    /* Dividers. */
+    &:where(hr) {
+      border: 0;
+      border-block-start: 1px solid var(--typeset-rule);
+      margin-block-start: calc(var(--typeset-flow) * 2.4);
+      margin-block-end: 0;
+    }
+    &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
+      margin-block-start: var(--typeset-flow);
+    }
+
+    /* GFM footnotes. */
+    &:where(.footnotes, [data-footnotes]) {
+      margin-block-start: calc(var(--typeset-flow) * 2);
+      border-block-start: 1px solid var(--typeset-rule);
+      padding-block-start: var(--typeset-flow);
+      font-size: 0.875em;
+      color: var(--typeset-muted);
+    }
+
+    /* Math. */
+    &:where(math[display="block"]) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-block: 0.25em;
+    }
+
+    /* Media. */
+    &:where(img, video) {
+      border-radius: var(--radius, 0.5em);
+      max-width: 100%;
+      height: auto;
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+    &:where(p img) {
+      margin-block-start: 0;
+    }
+    &:where(figure) {
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+      margin-inline: 0;
+    }
+    &:where(figcaption, caption) {
+      color: var(--typeset-muted);
+      font-size: 0.875em;
+      text-align: center;
+      margin-block-start: calc(0.75em / 0.875);
+    }
+    &:where(caption) {
+      caption-side: bottom;
+    }
+
+    /* Tables. Separators sit on cells, not tr:last-child: append-safe.
+       Bare tables stay real tables (keep their semantics) and wrap to fit. */
+    &:where(table) {
+      max-width: 100%;
+      font-size: 1em;
+      line-height: 1.5;
+      font-variant-numeric: tabular-nums;
+      border-collapse: separate;
+      border-spacing: 0;
+      border-block-end: 1px solid var(--typeset-rule);
+      margin-block-start: var(--typeset-flow);
+      margin-block-end: 0;
+    }
+
+    /* Horizontal scroll for any wide block. Wrap it and the wrapper owns the
+       flow margin. Tables shrink to fit, so widen the table to make it scroll
+       instead of compress. */
+    &:where(.alwith-markdown-readonly-scroll) {
+      overflow-x: auto;
+      margin-block-start: var(--typeset-flow);
+    }
+    &:where(.alwith-markdown-readonly-scroll > *) {
+      margin-block-start: 0;
+    }
+    &:where(.alwith-markdown-readonly-scroll table) {
+      width: max-content;
+      max-width: none;
+    }
+    &:where(thead th) {
+      font-weight: 500;
+      text-align: start;
+      white-space: nowrap;
+      padding: 0.65em 1em;
+    }
+    &:where(:is(tbody, tfoot) :is(td, th)) {
+      padding: 0.75em 1em;
+      text-align: start;
+      vertical-align: top;
+      border-block-start: 1px solid var(--typeset-rule);
+    }
+    &:where(tbody th, tfoot th) {
+      font-weight: 500;
+    }
+    &:where(th:first-child, td:first-child) {
+      padding-inline-start: 0;
+    }
+    &:where(th[align="center"], td[align="center"]) {
+      text-align: center;
+    }
+    &:where(th[align="right"], td[align="right"]) {
+      text-align: end;
+    }
+
+    /* Blocks inside list items keep the list's tighter rhythm. */
+    &:where(li > blockquote, li > table, li > figure) {
+      margin-block-start: 0.5em;
+    }
+    &:where(li > pre) {
+      margin-block-start: calc(0.5em / 0.875);
+    }
+
+    @media print {
+      &:where(pre, table, blockquote, figure) {
+        break-inside: avoid;
+      }
+      &:where(h1, h2, h3, h4) {
+        break-after: avoid;
+      }
+    }
+
+    /* Forced colors strips the code background, so give it a border. */
+    @media (forced-colors: active) {
+      &:where(:not(pre) > code) {
+        border: 1px solid;
+      }
+    }
+  }
+
+  /* First child adds no space above. Last so it wins ties. */
+  .alwith-markdown-readonly
+    > :where(:first-child):not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)),
+  .alwith-markdown-readonly
+    > :where(:first-child)
+    > :where(:first-child):not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)),
+  .alwith-markdown-readonly
+    :where(
+      li > :first-child,
+      blockquote > :first-child,
+      td > :first-child,
+      th > :first-child,
+      dd > :first-child,
+      figure > :first-child,
+      figure > picture > img
+    ):not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)) {
+    margin-block-start: 0;
+  }
+}
+
+.alwith-markdown-readonly {
+  text-wrap: auto;
+  width: 100%;
+
+  overflow-wrap: anywhere;
+}
+.alwith-markdown-readonly a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.alwith-markdown-readonly a:hover {
+  opacity: 0.8;
+}
+
+.alwith-markdown-readonly p {
+  white-space: pre-wrap;
+}
+.alwith-markdown-readonly code {
+  font-family: var(--font-mono, monospace);
+  word-break: break-word;
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-size: 0.9em;
+  background-color: var(--muted);
+}
+.alwith-markdown-readonly pre code {
+  padding: 0;
+  background: none;
+  font-size: inherit;
+}
+
+.alwith-markdown-readonly > :first-child {
+  margin-top: 0;
+}
+
+.alwith-markdown-readonly table {
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+.alwith-markdown-readonly input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid var(--border);
+  position: relative;
+  pointer-events: none;
+  vertical-align: middle;
+  border-radius: 2px;
+  width: 1em;
+  height: 1em;
+  margin: 2px 4px 2px 2px;
+}
+.alwith-markdown-readonly input[type="checkbox"]:checked::after {
+  content: "✓";
+  position: absolute;
+  font-size: 0.9em;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.alwith-markdown-code-block {
+  position: relative;
+  margin: 8px 0;
+}
+.alwith-markdown-code-block pre {
+  overflow-x: auto;
+  white-space: pre;
+  box-sizing: border-box;
+  border-radius: 4px;
+  max-width: 100%;
+  margin: 0;
+  padding: 8px;
+  background-color: var(--background);
+  border: 0.5px solid var(--border);
+}
+.alwith-markdown-code-language {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  padding: 4px 8px 2px;
+  background-color: var(--background);
+  border: 0.5px solid var(--border);
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  display: inline-block;
+}
+.alwith-markdown-code-language + pre {
+  border-radius: 0 4px 4px 4px;
+}
+
+.alwith-markdown-code-toolbar {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.alwith-markdown-code-block:hover .alwith-markdown-code-toolbar {
+  opacity: 1;
+}
+.alwith-markdown-code-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--muted-foreground);
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 4px;
+}
+.alwith-markdown-code-toolbar button:hover {
+  background: var(--accent);
+  color: var(--foreground);
+}
+.alwith-markdown-code-toolbar button[data-active="true"] {
+  background: var(--accent);
+  color: var(--foreground);
+}
+
+.alwith-markdown-code-block[data-wrap="true"] pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.alwith-markdown-line-number {
+  user-select: none;
+  pointer-events: none;
+  display: inline-block;
+  width: 3ch;
+  text-align: right;
+  opacity: 0.3;
+  margin-right: 1ch;
+}
+.alwith-markdown-line-numbers {
+  float: left;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  user-select: none;
+}
+
+.alwith-markdown-readonly .md-math-display {
+  display: block;
+  text-align: center;
+  overflow-x: auto;
+  padding: 0.4em 0;
+}
+.alwith-markdown-readonly .md-math-inline {
+  display: inline;
+}
+
+.dark .alwith-markdown-readonly pre span {
+  color: var(--shiki-dark);
+}
+.alwith-markdown-code-block:focus-within .alwith-markdown-code-toolbar {
+  opacity: 1;
+}