@lapismd/mira 0.0.1

package/dist/preview/styles/tables.css

@@ -0,0 +1,550 @@
+.markdown-rendered table,
+.markdown-preview-surface .markdown table {
+  border-collapse: collapse;
+  caption-side: bottom;
+  font-size: var(--table-text-size);
+  line-height: var(--table-line-height);
+  width: auto;
+}
+
+.markdown-rendered table,
+.markdown-preview-surface .markdown table {
+  width: fit-content;
+}
+
+.markdown-preview-surface--reading:not(.markdown-preview-surface--embedded)
+  .markdown
+  table:not(.cm-table-widget) {
+  margin-block: var(--table-preview-spacing, 1rem);
+}
+
+.markdown-rendered :is(th, td),
+.markdown-preview-surface .markdown :is(th, td) {
+  border: var(--table-border-width) solid var(--table-border-color);
+  color: var(--table-text-color);
+  min-width: var(--table-column-min-width);
+  padding: 0.5rem;
+  position: relative;
+  vertical-align: var(--table-cell-vertical-alignment);
+  white-space: var(--table-white-space);
+}
+
+.markdown-rendered th,
+.markdown-preview-surface .markdown th {
+  background: var(--table-header-background);
+  color: var(--table-header-color);
+  font-family: var(--table-header-font);
+  font-size: var(--table-header-size);
+  font-weight: var(--table-header-weight);
+}
+
+.markdown-rendered table.cm-table-widget,
+.markdown-preview-surface .markdown table.cm-table-widget {
+  border-collapse: collapse;
+  caption-side: bottom;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  white-space: normal;
+  width: fit-content;
+}
+
+.cm-table-widget :is(th, td) {
+  border: 0;
+  min-width: 0;
+  padding: 0;
+  vertical-align: middle;
+  white-space: var(--table-white-space);
+}
+
+.cm-table-widget :is(th, td).whitespace-nowrap,
+.cm-table-widget .table-cell-wrapper .cm-content,
+.cm-table-widget .table-cell-wrapper .cm-line,
+.cm-table-widget .table-cell-wrapper p {
+  white-space: var(--table-white-space);
+}
+
+.cm-table-widget .table-cell-wrapper .cm-editor,
+.cm-table-widget .table-cell-wrapper .cm-scroller,
+.cm-table-widget .table-cell-wrapper .cm-content,
+.cm-table-widget .table-cell-wrapper p {
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  width: 100%;
+}
+
+.cm-table-widget .table-cell-wrapper .cm-scroller {
+  overflow: hidden;
+}
+
+.markdown-editor-surface .cm-table-widget.overflow-x-auto,
+.markdown-preview-surface .cm-table-widget.overflow-x-auto,
+.markdown-widget-shell .cm-table-widget.overflow-x-auto {
+  overflow-x: visible;
+}
+
+.markdown-rendered :is(th, td)[align="left"],
+.markdown-preview-surface .markdown :is(th, td)[align="left"] {
+  text-align: left;
+}
+
+.markdown-rendered :is(th, td)[align="center"],
+.markdown-preview-surface .markdown :is(th, td)[align="center"] {
+  text-align: center;
+}
+
+.markdown-rendered :is(th, td)[align="right"],
+.markdown-preview-surface .markdown :is(th, td)[align="right"] {
+  text-align: right;
+}
+
+.cm-table-widget {
+  --table-border-width: 1px;
+  --table-selection-border-width: 2px;
+  --table-selection-border-radius: 4px;
+  border-collapse: collapse;
+  caption-side: bottom;
+  display: table;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
+  max-width: 100%;
+  overflow: visible;
+  position: relative;
+  white-space: normal;
+  width: fit-content;
+}
+
+.cm-table-widget .table-cell-wrapper {
+  height: 100%;
+  min-height: 100%;
+  width: 100%;
+}
+
+.cm-table-widget .table-cell-wrapper > button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.cm-table-widget .mira-ui-button.markdown-table-chrome {
+  border: 0;
+}
+
+.cm-table-widget
+  .mira-ui-button.markdown-table-chrome
+  svg:not([class*="size-"]) {
+  height: 1rem;
+  width: 1rem;
+}
+
+.cm-table-widget .table-cell-wrapper > button *::selection {
+  background-color: transparent;
+}
+
+.cm-table-widget tbody > tr > td {
+  min-width: 10ch;
+}
+
+.cm-table-widget tbody > tr > td:first-child {
+  min-width: 2rem;
+}
+
+.cm-table-widget tbody > tr > td:last-child {
+  min-width: 1.25rem;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline,
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-scroller,
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-content {
+  height: auto !important;
+  min-height: 0 !important;
+  /* Nested shells share ancestor CM theme selectors; never inherit file margins. */
+  padding: 0 !important;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-cursorLayer {
+  visibility: visible;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline {
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--font-smaller);
+  line-height: 1.4285714;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline.cm-focused {
+  outline: 0 !important;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-content {
+  background: transparent;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-scroller,
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-content,
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-line,
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  p {
+  font-family: inherit;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-content {
+  padding: 0 !important;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-line,
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  p {
+  white-space: pre-wrap;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  p {
+  line-height: 1.75;
+}
+
+:is(.markdown-editor-surface, .markdown-widget-shell)
+  .mira-table-widget-shell
+  .cm-editor.mod-inline
+  .cm-content
+  p {
+  margin: 0 !important;
+}
+
+.cm-table-widget td[data-align="left"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-align="left"] .table-cell-wrapper > :first-child {
+  text-align: left;
+}
+
+.cm-table-widget td[data-align="center"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-align="center"] .table-cell-wrapper > :first-child {
+  text-align: center;
+}
+
+.cm-table-widget td[data-align="right"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-align="right"] .table-cell-wrapper > :first-child {
+  text-align: right;
+}
+
+.cm-table-widget td[data-align="justify"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-align="justify"] .table-cell-wrapper > :first-child {
+  text-align: justify;
+}
+
+.cm-table-widget td[data-valign="bottom"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-valign="bottom"] .table-cell-wrapper > :first-child {
+  align-items: flex-end;
+  display: flex;
+}
+
+.cm-table-widget td[data-valign="top"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-valign="top"] .table-cell-wrapper > :first-child {
+  align-items: flex-start;
+  display: flex;
+}
+
+.cm-table-widget td[data-valign="middle"] .table-cell-wrapper > :first-child,
+.cm-table-widget th[data-valign="middle"] .table-cell-wrapper > :first-child {
+  align-items: center;
+  display: flex;
+}
+
+.cm-table-widget tbody > tr:first-child td.is-selected,
+.cm-table-widget tbody > tr:first-child th.is-selected {
+  border-bottom: 1px;
+}
+
+.cm-table-widget th.is-selected.is-partial::after,
+.cm-table-widget td.is-selected.is-partial::after {
+  background-color: transparent;
+}
+
+.cm-table-widget.is-selected td,
+.cm-table-widget.is-selected td:hover {
+  background-color: var(--table-selection);
+}
+
+.cm-table-widget.is-selected td:first-child,
+.cm-table-widget.is-selected tr:first-child > td:last-child {
+  background-color: transparent;
+}
+
+.cm-table-widget td.is-dragging-right {
+  border-right: 3px solid var(--table-selection-border-color);
+}
+
+.cm-table-widget td.is-dragging-left {
+  border-left: 3px solid var(--table-selection-border-color);
+}
+
+.cm-table-widget td.is-dragging-top {
+  border-top: 3px solid var(--table-selection-border-color);
+}
+
+.cm-table-widget td.is-dragging-bottom {
+  border-bottom: 3px solid var(--table-selection-border-color);
+}
+
+.cm-table-widget th.is-selected.start::after,
+.cm-table-widget td.is-selected.start::after {
+  border-inline-start-width: var(--table-selection-border-width);
+  inset-inline-start: calc(-1 * var(--table-selection-border-width));
+}
+
+.cm-table-widget th.is-selected.end::after,
+.cm-table-widget td.is-selected.end::after {
+  border-inline-end-width: var(--table-selection-border-width);
+  inset-inline-end: calc(-1 * var(--table-selection-border-width));
+}
+
+.cm-table-widget th.is-selected.top.end::after,
+.cm-table-widget td.is-selected.top.end::after {
+  border-start-end-radius: var(--table-selection-border-radius);
+}
+
+.cm-table-widget th.is-selected.bottom.end::after,
+.cm-table-widget td.is-selected.bottom.end::after {
+  border-end-end-radius: var(--table-selection-border-radius);
+}
+
+.cm-table-widget th.is-selected.top.start::after,
+.cm-table-widget td.is-selected.top.start::after {
+  border-start-start-radius: var(--table-selection-border-radius);
+}
+
+.cm-table-widget th.is-selected.bottom.start::after,
+.cm-table-widget td.is-selected.bottom.start::after {
+  border-end-start-radius: var(--table-selection-border-radius);
+}
+
+.cm-table-widget th.is-selected .table-cell-wrapper,
+.cm-table-widget td.is-selected .table-cell-wrapper {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.cm-table-widget th.is-selected::after,
+.cm-table-widget td.is-selected::after {
+  background-color: var(--table-selection);
+  border: 0 solid var(--table-selection-border-color);
+  bottom: calc(-1 * var(--table-border-width));
+  content: "";
+  display: block;
+  inset-inline-end: calc(-1 * var(--table-border-width));
+  inset-inline-start: calc(-1 * var(--table-border-width));
+  mix-blend-mode: var(--table-selection-blend-mode);
+  pointer-events: none;
+  position: absolute;
+  top: calc(-1 * var(--table-border-width));
+  z-index: 1;
+}
+
+.cm-table-widget th.top::after,
+.cm-table-widget td.top::after {
+  border-top-width: var(--table-selection-border-width);
+  top: calc(-1 * var(--table-selection-border-width));
+}
+
+.cm-table-widget th.bottom::after,
+.cm-table-widget td.bottom::after {
+  border-bottom-width: var(--table-selection-border-width);
+  bottom: calc(-1 * var(--table-selection-border-width));
+}
+
+.cm-table-widget .markdown-table-chrome {
+  color: var(--table-drag-handle-color);
+  pointer-events: auto;
+}
+
+.cm-table-widget .markdown-table-chrome--drag-handle {
+  --table-drag-handle-size: 1rem;
+
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: var(--table-drag-handle-color-active);
+  display: inline-flex;
+  height: var(--table-drag-handle-size);
+  min-width: var(--table-drag-handle-size);
+  transform: none;
+  width: var(--table-drag-handle-size);
+}
+
+.cm-table-widget [data-markdown-table-drag-handle="row"] {
+  height: var(--table-drag-handle-size);
+  padding: 0;
+  right: calc(-1 * var(--table-drag-handle-size) / 2);
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--table-drag-handle-size);
+}
+
+.cm-table-widget
+  button.markdown-table-chrome--drag-handle[data-markdown-table-drag-handle="row"] {
+  min-width: var(--table-drag-handle-size);
+  width: var(--table-drag-handle-size);
+}
+
+.cm-table-widget [data-markdown-table-drag-handle="row"] svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+.cm-table-widget [data-markdown-table-drag-handle="col"] {
+  bottom: calc(-1 * var(--table-drag-handle-size) / 2);
+  height: var(--table-drag-handle-size);
+  left: 50%;
+  min-width: var(--table-drag-handle-size);
+  padding: 0;
+  transform: translateX(-50%);
+  width: var(--table-drag-handle-size);
+}
+
+.cm-table-widget [data-markdown-table-drag-handle="col"] svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+@media (hover: hover) {
+  .cm-table-widget .markdown-table-chrome.opacity-0 {
+    opacity: 0;
+  }
+
+  /* Per-row / per-col local group hover (not whole-table). */
+  .cm-table-widget
+    :is(.group:hover, .group:focus-within)
+    .group-hover\:opacity-100 {
+    opacity: 1;
+  }
+
+  /* Active cell’s row gutter + column header (and their nested chrome). */
+  .cm-table-widget .markdown-table-chrome.is-chrome-active,
+  .cm-table-widget .markdown-table-chrome.is-chrome-active .opacity-0,
+  .cm-table-widget .markdown-table-chrome.is-chrome-active .opacity-40,
+  .cm-table-widget
+    .markdown-table-chrome.is-chrome-active
+    .group-hover\:opacity-100 {
+    opacity: 1;
+  }
+
+  .cm-table-widget
+    .markdown-table-chrome.is-chrome-active
+    .group-hover\:inline-flex,
+  .cm-table-widget
+    .markdown-table-chrome.is-chrome-active.group-hover\:inline-flex {
+    display: inline-flex;
+  }
+
+  .cm-table-widget .markdown-table-chrome--gutter-cell.is-chrome-active {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--border);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-top-style: solid;
+    border-top-width: 1px;
+  }
+
+  /* Add/delete stay on their own control hover, not cell focus. */
+  .cm-table-widget
+    [data-markdown-table-chrome="delete-table"]:is(:hover, :focus-within),
+  .cm-table-widget
+    [data-markdown-table-chrome="add-row"]:is(:hover, :focus-within),
+  .cm-table-widget
+    [data-markdown-table-chrome="add-col"]:is(:hover, :focus-within),
+  .cm-table-widget
+    [data-markdown-table-chrome="add-col"]:is(:hover, :focus-within)
+    .markdown-table-chrome {
+    opacity: 1;
+  }
+
+  .cm-table-widget.is-table-chrome-dragging .is-drag-source,
+  .cm-table-widget.is-table-chrome-dragging
+    .is-drag-source
+    .markdown-table-chrome {
+    opacity: 1;
+  }
+}
+
+@media (hover: none) {
+  .cm-table-widget .markdown-table-chrome {
+    opacity: 0.55 !important;
+  }
+
+  .cm-table-widget:focus-within .markdown-table-chrome,
+  .cm-table-widget.is-table-chrome-dragging .markdown-table-chrome,
+  .cm-table-widget .markdown-table-chrome:active,
+  .cm-table-widget .markdown-table-chrome:focus-visible {
+    opacity: 1 !important;
+  }
+
+  .cm-table-widget .markdown-table-chrome--gutter-cell,
+  .cm-table-widget .markdown-table-chrome--edge-cell,
+  .cm-table-widget .markdown-table-chrome--footer-cell {
+    border-color: var(--border);
+    border-style: solid;
+  }
+
+  .cm-table-widget .markdown-table-chrome--gutter-cell {
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-top-width: 1px;
+  }
+
+  .cm-table-widget .markdown-table-chrome--edge-cell {
+    border-bottom-width: 1px;
+    border-right-width: 1px;
+    border-top-width: 1px;
+  }
+
+  .cm-table-widget .markdown-table-chrome--footer-cell {
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-right-width: 1px;
+  }
+}