@lapismd/mira 0.0.1

package/dist/preview/styles/lists-tasks.css

@@ -0,0 +1,638 @@
+.markdown-rendered :is(ul, ol),
+.markdown-preview-surface .markdown :is(ul, ol) {
+  margin-block: var(--p-spacing);
+  padding-inline-start: 0;
+}
+
+.markdown-rendered ul,
+.markdown-preview-surface .markdown ul {
+  list-style: none;
+}
+
+.markdown-rendered ol,
+.markdown-preview-surface .markdown ol {
+  list-style: decimal;
+}
+
+.markdown-rendered :is(ul, ol) > li,
+.markdown-preview-surface .markdown :is(ul, ol) > li {
+  margin-inline-start: 3ch;
+  padding-block: var(--list-spacing);
+  position: relative;
+}
+
+.markdown-rendered :is(ol, ul) > li > p,
+.markdown-preview-surface .markdown :is(ol, ul) > li > p {
+  margin: 0;
+}
+
+.markdown-rendered ::marker,
+.markdown-preview-surface .markdown ::marker {
+  color: var(--list-marker-color);
+  font-size: 0.875rem;
+}
+
+.markdown-rendered li.task-list-item,
+.markdown-preview-surface .markdown li.task-list-item {
+  list-style: none;
+}
+
+.markdown-rendered li[data-task="x"],
+.markdown-rendered li[data-task="X"],
+.markdown-preview-surface .markdown li[data-task="x"],
+.markdown-preview-surface .markdown li[data-task="X"] {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-live-preview-mode li[data-task="x"],
+.markdown-live-preview-mode li[data-task="X"],
+.markdown-editor-surface li[data-task="x"],
+.markdown-editor-surface li[data-task="X"] {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-preview-surface .task-list-label,
+.markdown-editor-surface .task-list-label {
+  margin-inline-start: -0.25em;
+  padding: 0;
+  position: relative;
+}
+
+.markdown-preview-surface .task-list-label .task-list-item-checkbox,
+.markdown-editor-surface .task-list-label .task-list-item-checkbox,
+.markdown-rendered .task-list-item-checkbox {
+  margin-inline-end: 0.25em;
+  margin-inline-start: var(--checkbox-margin-inline-start);
+  position: relative;
+  top: -0.1em;
+  vertical-align: middle;
+}
+
+.markdown-preview-surface input[type="checkbox"],
+.markdown-editor-surface input[type="checkbox"],
+.markdown-rendered input[type="checkbox"],
+.mira-frontmatter input[type="checkbox"],
+.mira-task-state-menu input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1px solid var(--checkbox-border-color);
+  border-radius: var(--checkbox-radius);
+  flex-shrink: 0;
+  height: var(--checkbox-size);
+  margin: 0 6px 0 0;
+  padding: 0;
+  position: relative;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    background-color 150ms ease;
+  width: var(--checkbox-size);
+}
+
+.markdown-preview-surface input[type="checkbox"]:hover,
+.markdown-preview-surface input[type="checkbox"]:focus,
+.markdown-editor-surface input[type="checkbox"]:hover,
+.markdown-editor-surface input[type="checkbox"]:focus,
+.markdown-rendered input[type="checkbox"]:hover,
+.markdown-rendered input[type="checkbox"]:focus,
+.mira-frontmatter input[type="checkbox"]:hover,
+.mira-frontmatter input[type="checkbox"]:focus,
+.mira-task-state-menu input[type="checkbox"]:hover,
+.mira-task-state-menu input[type="checkbox"]:focus {
+  border-color: var(--checkbox-border-color-hover);
+  outline: none;
+}
+
+.markdown-preview-surface input[type="checkbox"]:focus-visible,
+.markdown-editor-surface input[type="checkbox"]:focus-visible,
+.markdown-rendered input[type="checkbox"]:focus-visible,
+.mira-frontmatter input[type="checkbox"]:focus-visible,
+.mira-task-state-menu input[type="checkbox"]:focus-visible {
+  box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+}
+
+.markdown-preview-surface input[type="checkbox"]:checked,
+.markdown-editor-surface input[type="checkbox"]:checked,
+.markdown-rendered input[type="checkbox"]:checked,
+.mira-frontmatter input[type="checkbox"]:checked,
+.mira-task-state-menu input[type="checkbox"]:checked {
+  background-color: var(--checkbox-color);
+  border-color: var(--checkbox-color);
+}
+
+.markdown-preview-surface input[type="checkbox"]:checked::after,
+.markdown-editor-surface input[type="checkbox"]:checked::after,
+.markdown-rendered input[type="checkbox"]:checked::after,
+.mira-frontmatter input[type="checkbox"]:checked::after,
+.mira-task-state-menu input[type="checkbox"]:checked::after {
+  background-color: var(--checkbox-marker-color);
+  content: "";
+  display: block;
+  height: var(--checkbox-size);
+  inset-inline-start: -1px;
+  position: absolute;
+  top: -1px;
+  width: var(--checkbox-size);
+  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" d="M4.3 7.6 0.8 4.1 1.9 3 4.3 5.4 10.1 0 11.2 1.1z"/></svg>');
+  -webkit-mask-position: 52% 52%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 65%;
+}
+
+.mira-task-state-trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s, 0.25rem);
+  color: var(--text-muted, var(--mira-muted-foreground));
+  cursor: pointer;
+  display: inline-flex;
+  height: 1rem;
+  inset-inline-end: calc(100% - 0.125rem);
+  justify-content: center;
+  opacity: 0;
+  padding: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-55%);
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    opacity 120ms ease;
+  width: 1.5rem;
+  z-index: 2;
+}
+
+.mira-task-state-trigger::before {
+  border-radius: inherit;
+  content: "";
+  inset: 0;
+  inset-inline-end: 0.375rem;
+  inset-inline-start: 0.125rem;
+  pointer-events: none;
+  position: absolute;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.mira-task-state-trigger > svg {
+  height: 0.75rem;
+  margin-inline-end: 0.375rem;
+  position: relative;
+  width: 0.75rem;
+  z-index: 1;
+}
+
+.task-list-label:has(.mira-task-state-trigger)::before {
+  content: "";
+  inset-block: -0.25rem;
+  inset-inline-end: 100%;
+  position: absolute;
+  width: 1.5rem;
+}
+
+:is(
+    .cm-task-line:hover,
+    .cm-task-line:focus-within,
+    .task-list-item:hover,
+    .task-list-item:focus-within,
+    .task-list-label:hover
+  )
+  .mira-task-state-trigger,
+.mira-task-state-trigger:hover,
+.mira-task-state-trigger:focus-visible,
+.mira-task-state-trigger[data-state="open"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mira-task-state-trigger:hover,
+.mira-task-state-trigger:focus-visible,
+.mira-task-state-trigger[data-state="open"] {
+  color: var(--text-normal, var(--mira-foreground));
+  outline: none;
+}
+
+.mira-task-state-trigger:is(
+    :hover,
+    :focus-visible,
+    [data-state="open"]
+  )::before {
+  background: var(--background-modifier-hover, var(--mira-accent-soft));
+}
+
+.mira-task-state-trigger:focus-visible::before {
+  box-shadow: 0 0 0 2px
+    var(--background-modifier-border-focus, var(--mira-focus-ring));
+}
+
+[data-slot="popover-content"].mira-task-state-menu {
+  max-height: min(70vh, 30rem);
+  overflow-y: auto;
+  padding: 0.375rem;
+  width: min(22rem, calc(100vw - 1rem));
+}
+
+.mira-task-state-menu__grid {
+  display: grid;
+  gap: 0.125rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mira-task-state-option {
+  align-items: center;
+  border-radius: var(--radius-s, 0.25rem);
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: var(--checkbox-size) minmax(0, 1fr) 1rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.375rem;
+  position: relative;
+}
+
+.mira-task-state-option:is(
+  :hover,
+  :has(.mira-task-state-option__action:focus-visible)
+) {
+  background: var(--background-modifier-hover, var(--mira-accent-soft));
+}
+
+.mira-task-state-option__checkbox {
+  margin: 0;
+  pointer-events: none;
+}
+
+.mira-task-state-option__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mira-task-state-option__selected {
+  height: 0.875rem;
+  justify-self: end;
+  width: 0.875rem;
+}
+
+.mira-task-state-option__action {
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  cursor: pointer;
+  inset: 0;
+  outline: none;
+  padding: 0;
+  position: absolute;
+}
+
+@media (max-width: 24rem) {
+  .mira-task-state-menu__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  [data-task] {
+  --checkbox-marker-color: transparent;
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  :is(
+    input[type="checkbox"][data-task="x"],
+    input[type="checkbox"][data-task="X"]
+  ) {
+  --checkbox-marker-color: var(--mira-checkbox-marker);
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  :is(
+    input[type="checkbox"][data-task=">"],
+    input[type="checkbox"][data-task="!"],
+    input[type="checkbox"][data-task="-"],
+    input[type="checkbox"][data-task="<"],
+    input[type="checkbox"][data-task="l"],
+    input[type="checkbox"][data-task="*"],
+    input[type="checkbox"][data-task="I"],
+    input[type="checkbox"][data-task="p"],
+    input[type="checkbox"][data-task="f"],
+    input[type="checkbox"][data-task="k"],
+    input[type="checkbox"][data-task="u"],
+    input[type="checkbox"][data-task="w"],
+    input[type="checkbox"][data-task="c"],
+    input[type="checkbox"][data-task="d"],
+    input[type="checkbox"][data-task="b"]
+  ):checked {
+  background-color: currentColor;
+  background-image: none;
+  border: none;
+  border-radius: 0;
+  -webkit-mask-position: 50% 50%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: var(--checkbox-icon);
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  :is(
+    input[type="checkbox"][data-task=">"],
+    input[type="checkbox"][data-task="!"],
+    input[type="checkbox"][data-task="-"],
+    input[type="checkbox"][data-task="<"],
+    input[type="checkbox"][data-task="l"],
+    input[type="checkbox"][data-task="*"],
+    input[type="checkbox"][data-task="I"],
+    input[type="checkbox"][data-task="p"],
+    input[type="checkbox"][data-task="f"],
+    input[type="checkbox"][data-task="k"],
+    input[type="checkbox"][data-task="u"],
+    input[type="checkbox"][data-task="w"],
+    input[type="checkbox"][data-task="c"],
+    input[type="checkbox"][data-task="d"],
+    input[type="checkbox"][data-task="b"],
+    input[type="checkbox"][data-task="/"],
+    input[type="checkbox"][data-task="?"],
+    input[type="checkbox"][data-task="i"],
+    input[type="checkbox"][data-task="S"],
+    input[type="checkbox"][data-task="“"],
+    input[type="checkbox"][data-task='"']
+  ):checked::after {
+  display: none;
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task=">"]:checked {
+  color: var(--text-faint);
+  transform: rotate(90deg);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z' /%3E%3C/svg%3E");
+  -webkit-mask-position: 50% 100%;
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="<"]:checked {
+  color: var(--text-faint);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="?"]:checked {
+  background-color: var(--color-yellow);
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="white" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E');
+  background-position: 50% 50%;
+  background-size: 200% 90%;
+  border-color: var(--color-yellow);
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="/"]:checked {
+  background-color: transparent;
+  background-image: none;
+  overflow: hidden;
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="/"]:checked::after {
+  background-color: var(--background-modifier-accent);
+  content: "";
+  display: block;
+  height: 100%;
+  inset: 0 auto auto 0;
+  position: absolute;
+  width: calc(50% - 0.5px);
+  -webkit-mask-image: none;
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="!"]:checked {
+  color: var(--color-orange);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  :is(
+    input[type="checkbox"][data-task="“"],
+    input[type="checkbox"][data-task='"']
+  ):checked {
+  background-color: var(--color-cyan);
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E');
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 75%;
+  border-color: var(--color-cyan);
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="-"]:checked {
+  color: var(--text-faint);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="*"]:checked {
+  color: var(--color-yellow);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="l"]:checked {
+  color: var(--color-red);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="i"]:checked {
+  background-color: var(--color-blue);
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="white" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E');
+  background-position: 50%;
+  background-size: 100%;
+  border-color: var(--color-blue);
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="S"]:checked {
+  background-color: var(--color-green);
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill="white" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E');
+  background-size: 100%;
+  border-color: var(--color-green);
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="I"]:checked {
+  color: var(--color-yellow);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="f"]:checked {
+  color: var(--color-red);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="k"]:checked {
+  color: var(--color-yellow);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="u"]:checked {
+  color: var(--color-green);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="d"]:checked {
+  color: var(--color-red);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="w"]:checked {
+  color: var(--color-purple);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="p"]:checked {
+  color: var(--color-green);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="c"]:checked {
+  color: var(--color-orange);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z' /%3E%3C/svg%3E");
+}
+
+:is(
+    .markdown-preview-surface,
+    .markdown-editor-surface,
+    .markdown-rendered,
+    .mira-task-state-menu
+  )
+  input[type="checkbox"][data-task="b"]:checked {
+  color: var(--color-orange);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z' /%3E%3C/svg%3E");
+}

package/dist/preview/styles/live-preview.css

@@ -0,0 +1,58 @@
+.markdown-live-preview-mode
+  .cm-editor.markdown-live-preview-view
+  > .cm-scroller {
+  overflow-x: hidden;
+}
+
+/* Hide formatting marks only in live preview (Lapis parity; source keeps delimiters). */
+.markdown-live-preview-mode
+  .cm-editor.markdown-live-preview-view
+  .cm-formatting-hidden,
+.markdown-view__editor--live-preview
+  .cm-editor.markdown-live-preview-view
+  .cm-formatting-hidden {
+  display: none;
+}
+
+.markdown-live-preview-mode .cm-math.cm-formatting-hidden,
+.markdown-live-preview-mode .cm-formatting-code .cm-formatting-hidden,
+.markdown-live-preview-mode .cm-formatting-table .cm-formatting-hidden {
+  display: inline-block;
+}
+
+.markdown-live-preview-mode .cm-formatting-code .cm-formatting-hidden {
+  visibility: hidden;
+}
+
+.markdown-live-preview-mode .cm-formatting-table .cm-formatting-hidden {
+  visibility: visible;
+}
+
+.markdown-live-preview-mode .markdown-rendered blockquote {
+  padding-inline-start: var(--size-4-6);
+}
+
+.markdown-live-preview-mode .cm-formatting-block.markdown-rendered .callout {
+  margin: 0;
+}
+
+.markdown-live-preview-mode .mira-rich-widget.markdown-rendered .callout {
+  margin: 0;
+}
+
+/* Keep adjacent rendered callouts distinct without adding CodeMirror margins. */
+.markdown-live-preview-mode
+  .mira-rich-widget.markdown-rendered
+  .callout
+  + .callout {
+  background-clip: padding-box;
+  border-top-color: transparent;
+  border-top-width: calc(var(--callout-border-width) + var(--size-4-1));
+}
+
+.markdown-live-preview-mode
+  .mira-rich-widget.markdown-rendered
+  .callout
+  + .callout:hover {
+  border-top-color: transparent;
+}