@aicayzer/inkkit 0.0.17 → 0.1.0

package/dist/style.css

@@ -1,57 +1,7 @@
-/* Scoped ProseMirror table styles; attribution and licence are in NOTICE. */
-.inkkit-root .ProseMirror .tableWrapper {
-  overflow-x: auto;
-}
-.inkkit-root .ProseMirror table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  overflow: hidden;
-}
-.inkkit-root .ProseMirror td,
-.inkkit-root .ProseMirror th {
-  vertical-align: top;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.inkkit-root .ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
-.inkkit-root .ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
-  /* Scoped equivalent of the upstream ProseMirror table sizing rules. */
-  min-width: var(--default-cell-min-width);
-}
-
-.inkkit-root .ProseMirror .column-resize-handle {
-  position: absolute;
-  right: -2px;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  z-index: 20;
-  background-color: var(--_inkkit-accent);
-  pointer-events: none;
-}
-.inkkit-root .ProseMirror.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
-}
-
-.inkkit-root .ProseMirror .selectedCell:after {
-  z-index: 2;
-  position: absolute;
-  content: '';
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: color-mix(in srgb, var(--_inkkit-accent) 25%, transparent);
-  pointer-events: none;
-}
-
 .inkkit-root {
   box-sizing: border-box;
   color-scheme: var(--inkkit-color-scheme, light dark);
-  color: var(--inkkit-text-color, var(--text, CanvasText));
+  color: var(--inkkit-text-color, CanvasText);
   font-family: var(
     --inkkit-font-family,
     -apple-system,
@@ -63,23 +13,39 @@
   line-height: var(--inkkit-line-height, normal);
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
-  --_inkkit-accent: var(--inkkit-accent-color, var(--accent, #0a84ff));
-  --_inkkit-text: var(--inkkit-text-color, var(--text, CanvasText));
+  --_inkkit-accent: var(--inkkit-accent-color, #0a84ff);
+  --_inkkit-text: var(--inkkit-text-color, CanvasText);
   --_inkkit-muted: var(
     --inkkit-muted-color,
-    var(--muted, color-mix(in srgb, CanvasText 55%, transparent))
+    color-mix(in srgb, CanvasText 55%, transparent)
   );
   --_inkkit-rule: var(
     --inkkit-rule-color,
-    var(--rule, color-mix(in srgb, CanvasText 14%, transparent))
+    color-mix(in srgb, CanvasText 14%, transparent)
   );
   --_inkkit-code-bg: var(
     --inkkit-code-background,
-    var(--code-bg, color-mix(in srgb, CanvasText 8%, transparent))
+    color-mix(in srgb, CanvasText 8%, transparent)
   );
   --_inkkit-mono: var(
     --inkkit-monospace-font,
-    var(--mono, ui-monospace, 'SF Mono', Menlo, monospace)
+    ui-monospace,
+    'SF Mono',
+    Menlo,
+    monospace
+  );
+  /* The percentage resolves against the containing block of the element that
+     uses the value, so both surfaces, and a host header in a container as wide
+     as the root, line up. */
+  --_inkkit-column-inset: var(
+    --inkkit-column-inset,
+    max(
+      var(--inkkit-padding-inline, 16px),
+      calc(
+        (100% - var(--inkkit-reading-width, 100%)) / 2 +
+          var(--inkkit-padding-inline, 16px)
+      )
+    )
   );
 }
 
@@ -90,7 +56,7 @@
   border: 0;
   resize: none;
   outline: none;
-  padding: var(--inkkit-padding-top, 10px) var(--inkkit-padding-inline, 16px)
+  padding: var(--inkkit-padding-top, 10px) var(--_inkkit-column-inset)
     var(--inkkit-padding-bottom, 48px);
   background: transparent;
   color: var(--_inkkit-text);
@@ -102,100 +68,152 @@
   display: none;
 }
 
-.inkkit-root .milkdown-table-block {
+/* Tables: the table block draws the table in a horizontal scroller, with
+   controls for the active column and row beside it. The cell and selection
+   rules are adapted from prosemirror-tables; attribution and licence are in
+   NOTICE. */
+.inkkit-root .inkkit-table-block {
   position: relative;
-  margin: calc(var(--inkkit-font-size, 15px) * 1.5) 0;
+  margin: 0 0
+    var(--inkkit-paragraph-spacing, calc(var(--inkkit-font-size, 15px) * 0.667));
 }
-.inkkit-root .milkdown-table-block .table-wrapper {
+.inkkit-root .inkkit-table-scroll {
   overflow-x: auto;
 }
-.inkkit-root .milkdown-table-block table {
+.inkkit-root .ProseMirror table {
   border-collapse: collapse;
+  width: 100%;
 }
-.inkkit-root .milkdown-table-block th,
-.inkkit-root .milkdown-table-block td {
-  border: 1px solid var(--_inkkit-rule);
-  min-width: calc(var(--inkkit-font-size, 15px) * 3);
+.inkkit-root .ProseMirror td,
+.inkkit-root .ProseMirror th {
+  position: relative;
+  box-sizing: border-box;
+  min-width: calc(var(--inkkit-font-size, 15px) * 4);
   padding: calc(var(--inkkit-font-size, 15px) * 0.4)
     calc(var(--inkkit-font-size, 15px) * 0.6);
+  border: 1px solid var(--_inkkit-rule);
   vertical-align: top;
 }
-.inkkit-root .milkdown-table-block th {
+.inkkit-root .ProseMirror th {
   background: var(--_inkkit-code-bg);
+  font-weight: 600;
 }
-.inkkit-root .milkdown-table-block th p,
-.inkkit-root .milkdown-table-block td p {
+.inkkit-root .ProseMirror td p,
+.inkkit-root .ProseMirror th p {
   margin: 0;
 }
-.inkkit-root .milkdown-table-block .handle,
-.inkkit-root .milkdown-table-block .button-group,
-.inkkit-root .milkdown-table-block .drag-preview {
+.inkkit-root .ProseMirror .selectedCell::after,
+.inkkit-root .ProseMirror .inkkit-table-line::after {
   position: absolute;
-  z-index: 20;
+  inset: 0;
+  z-index: 2;
+  content: '';
+  background: color-mix(in srgb, var(--_inkkit-accent) 25%, transparent);
+  pointer-events: none;
+}
+
+.inkkit-root .inkkit-table-controls {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
 }
-.inkkit-root .milkdown-table-block [data-show='false'],
-.inkkit-root .milkdown-table-block .button-group[data-show='false'],
-.inkkit-root .milkdown-table-block.readonly .handle {
+.inkkit-root .inkkit-table-controls[hidden],
+.inkkit-root .inkkit-table-controls [hidden],
+.inkkit-root .ProseMirror[contenteditable='false'] .inkkit-table-controls {
   display: none;
 }
-.inkkit-root .milkdown-table-block .cell-handle {
-  cursor: grab;
-  font-size: calc(var(--inkkit-font-size, 15px) * 0.75);
-  padding: 2px 5px;
-  border-radius: 5px;
-  background: Canvas;
+.inkkit-root .inkkit-table-controls button {
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
   color: var(--_inkkit-muted);
-  box-shadow: 0 0 0 1px var(--_inkkit-rule);
-}
-.inkkit-root .milkdown-table-block .button-group {
-  display: flex;
-  gap: 3px;
-  padding: 4px;
-  border-radius: 6px;
   background: Canvas;
-  box-shadow: 0 0 0 1px var(--_inkkit-rule);
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
 }
-.inkkit-root .milkdown-table-block button {
+.inkkit-root .inkkit-table-controls button:hover:not(:disabled) {
   color: var(--_inkkit-text);
-  background: Canvas;
-  border: 1px solid var(--_inkkit-rule);
+}
+.inkkit-root .inkkit-table-controls button:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+/* Each grip sits across the table's edge, so the pointer can reach it
+   without leaving the table. */
+.inkkit-root .inkkit-table-grip {
+  position: absolute;
+  transform: translate(-50%, -50%);
   border-radius: 4px;
-  padding: 4px 6px;
-  cursor: pointer;
-  white-space: nowrap;
+  box-shadow: 0 0 0 1px var(--_inkkit-rule);
+  cursor: grab;
+  touch-action: none;
 }
-.inkkit-root .milkdown-table-block button:hover {
-  background: var(--_inkkit-code-bg);
+.inkkit-root .inkkit-table-grip[data-inkkit-axis='column'] {
+  width: 24px;
+  height: 14px;
+}
+.inkkit-root .inkkit-table-grip[data-inkkit-axis='row'] {
+  width: 14px;
+  height: 24px;
 }
-.inkkit-root .milkdown-table-block .line-handle {
+.inkkit-root .inkkit-table-grip[aria-expanded='true'] {
+  color: Canvas;
   background: var(--_inkkit-accent);
-  min-width: 1px;
-  min-height: 1px;
+  box-shadow: none;
 }
-.inkkit-root .milkdown-table-block .add-button {
+/* At the caret alone the grips wait out of sight, for the keyboard. */
+.inkkit-root
+  .inkkit-table-controls[data-inkkit-shown='false']
+  .inkkit-table-grip:not(:focus-visible) {
+  opacity: 0;
+}
+@media (hover: none) {
+  .inkkit-root
+    .inkkit-table-controls[data-inkkit-shown='false']
+    .inkkit-table-grip:not(:focus-visible) {
+    opacity: 1;
+  }
+}
+.inkkit-root .inkkit-table-menu {
   position: absolute;
-  padding: 2px 5px;
-  transform: translate(-50%, -50%);
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 6px;
   background: Canvas;
-  color: var(--_inkkit-text);
-  border: 1px solid var(--_inkkit-rule);
-  border-radius: 4px;
+  box-shadow:
+    0 0 0 1px var(--_inkkit-rule),
+    0 2px 8px color-mix(in srgb, CanvasText 12%, transparent);
   white-space: nowrap;
-  cursor: pointer;
 }
-.inkkit-root
-  .milkdown-table-block
-  .line-handle[data-display-type='indicator']
-  .add-button {
-  display: none;
+.inkkit-root .inkkit-table-menu button {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
 }
-.inkkit-root .milkdown-table-block .drag-preview {
-  opacity: 0.6;
-  background: Canvas;
-  outline: 1px solid var(--_inkkit-accent);
+.inkkit-root .inkkit-table-menu button:hover:not(:disabled) {
+  background: var(--_inkkit-code-bg);
+}
+.inkkit-root .inkkit-table-marker {
+  position: absolute;
+  background: var(--_inkkit-accent);
+  pointer-events: none;
+}
+.inkkit-root .inkkit-table-marker[data-inkkit-axis='column'] {
+  width: 2px;
+  transform: translateX(-1px);
+}
+.inkkit-root .inkkit-table-marker[data-inkkit-axis='row'] {
+  height: 2px;
+  transform: translateY(-1px);
 }
 
-.inkkit-root .ProseMirror .image {
+.inkkit-root .ProseMirror .inkkit-image {
   position: relative;
   display: inline-block;
   max-width: 100%;
@@ -208,11 +226,14 @@
     var(--inkkit-paragraph-spacing, calc(var(--inkkit-font-size, 15px) * 0.667));
   line-height: 0;
 }
-.inkkit-root .ProseMirror .inkkit-image-block > .image {
+.inkkit-root .ProseMirror .inkkit-image-block > .inkkit-image {
   line-height: normal;
 }
 /* A card that shares its paragraph with text sits on its own line within it. */
-.inkkit-root .ProseMirror :not(.inkkit-image-block) > .image.inkkit-file {
+.inkkit-root
+  .ProseMirror
+  :not(.inkkit-image-block)
+  > .inkkit-image.inkkit-file {
   display: block;
   width: fit-content;
 }
@@ -222,7 +243,7 @@
 .inkkit-root
   .ProseMirror
   .inkkit-image-block.ProseMirror-selectednode
-  > .image {
+  > .inkkit-image {
   outline: 2px solid color-mix(in srgb, var(--_inkkit-accent) 60%, transparent);
   outline-offset: 2px;
   border-radius: 6px;
@@ -249,7 +270,7 @@
 .inkkit-root .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }
-.inkkit-root .ProseMirror .image img {
+.inkkit-root .ProseMirror .inkkit-image img {
   display: block;
   max-width: 100%;
   height: auto;
@@ -262,11 +283,11 @@
   max-width: 100%;
   line-height: 0;
 }
-.inkkit-root .ProseMirror .image-absent {
+.inkkit-root .ProseMirror .inkkit-image-absent {
   color: var(--_inkkit-muted);
   font-style: italic;
 }
-.inkkit-root .ProseMirror .image-handle {
+.inkkit-root .ProseMirror .inkkit-image-handle {
   position: absolute;
   right: 0;
   top: 50%;
@@ -279,11 +300,11 @@
   cursor: col-resize;
   opacity: 0;
 }
-.inkkit-root .ProseMirror .image:hover .image-handle,
-.inkkit-root .ProseMirror .image-handle:active {
+.inkkit-root .ProseMirror .inkkit-image:hover .inkkit-image-handle,
+.inkkit-root .ProseMirror .inkkit-image-handle:active {
   opacity: 1;
 }
-.inkkit-root .ProseMirror .image-handle::after {
+.inkkit-root .ProseMirror .inkkit-image-handle::after {
   content: '';
   position: absolute;
   right: 8px;
@@ -295,7 +316,7 @@
   border-radius: 2px;
   background: var(--_inkkit-accent);
 }
-.inkkit-root .ProseMirror[contenteditable='false'] .image-handle {
+.inkkit-root .ProseMirror[contenteditable='false'] .inkkit-image-handle {
   display: none;
 }
 
@@ -326,7 +347,9 @@
   width: 0;
   min-width: 100%;
 }
-.inkkit-root .ProseMirror .image.inkkit-file:has(> .inkkit-image-preview) {
+.inkkit-root
+  .ProseMirror
+  .inkkit-image.inkkit-file:has(> .inkkit-image-preview) {
   min-width: min(100%, 8em);
 }
 /* The name truncates; the open arrow stays visible right after it. */
@@ -394,10 +417,6 @@
   color: var(--_inkkit-text);
   background: var(--_inkkit-code-bg);
 }
-.inkkit-root .ProseMirror .inkkit-file-open:focus-visible {
-  outline: 2px solid var(--_inkkit-accent);
-  outline-offset: 1px;
-}
 .inkkit-root .ProseMirror .inkkit-file-open svg {
   width: 0.85em;
   height: 0.85em;
@@ -414,14 +433,7 @@
   box-sizing: border-box;
   /* Scroll the final line above the floating footer without reserving a solid row. */
   /* Keep the editor full-width for hit testing; center only the writing column. */
-  padding: var(--inkkit-padding-top, 10px)
-    max(
-      var(--inkkit-padding-inline, 16px),
-      calc(
-        (100% - var(--inkkit-reading-width, var(--reading-width, 100%))) / 2 +
-          var(--inkkit-padding-inline, 16px)
-      )
-    )
+  padding: var(--inkkit-padding-top, 10px) var(--_inkkit-column-inset)
     var(--inkkit-padding-bottom, 48px);
   outline: none;
   white-space: pre-wrap;
@@ -430,11 +442,11 @@
   cursor: text;
 }
 
-.inkkit-root .ProseMirror .empty {
+.inkkit-root .ProseMirror .inkkit-empty {
   position: relative;
 }
 
-.inkkit-root .ProseMirror .empty::before {
+.inkkit-root .ProseMirror .inkkit-empty::before {
   content: attr(data-placeholder);
   position: absolute;
   color: var(--_inkkit-muted);
@@ -442,7 +454,7 @@
 }
 
 /* The selection plugin draws the selection over the text alone; the engine's own fills the margins too. */
-.inkkit-root .ProseMirror ::selection {
+.inkkit-root .ProseMirror.inkkit-painted-selection ::selection {
   background: transparent;
 }
 
@@ -506,7 +518,9 @@
   text-decoration: underline;
 }
 
-.meta .inkkit-root .ProseMirror a {
+/* Held Mod opens a link on click; an empty address opens nothing. */
+.inkkit-root.inkkit-link-modifier .ProseMirror a[href]:not([href='']),
+.inkkit-root.inkkit-link-modifier .inkkit-wiki-link {
   cursor: pointer;
 }
 
@@ -550,7 +564,7 @@
   user-select: none;
 }
 
-.inkkit-root .ProseMirror pre .copy {
+.inkkit-root .ProseMirror pre .inkkit-copy {
   position: absolute;
   top: 6px;
   right: 6px;
@@ -568,12 +582,12 @@
   user-select: none;
 }
 
-.inkkit-root .ProseMirror pre:hover .copy,
-.inkkit-root .ProseMirror pre .copy[data-copied] {
+.inkkit-root .ProseMirror pre:hover .inkkit-copy,
+.inkkit-root .ProseMirror pre .inkkit-copy[data-copied] {
   opacity: 1;
 }
 
-.inkkit-root .ProseMirror pre .copy:hover {
+.inkkit-root .ProseMirror pre .inkkit-copy:hover {
   color: var(--_inkkit-text);
 }
 
@@ -684,79 +698,71 @@
   border-radius: 4px;
 }
 
-/* Syntax colors: One Dark and One Light, without the blues. */
+/* Syntax colors: One Light and One Dark hues without the blues, darkened or
+   lightened to WCAG AA contrast on the code background. light-dark() follows
+   the editor's color scheme, which a host can force. */
 .inkkit-root {
   --_inkkit-code-comment: var(--_inkkit-muted);
-  --_inkkit-code-keyword: #a626a4;
-  --_inkkit-code-string: #50a14f;
-  --_inkkit-code-number: #986801;
-  --_inkkit-code-title: #c18401;
-  --_inkkit-code-attr: #e45649;
-}
-
-@media (prefers-color-scheme: dark) {
-  .inkkit-root {
-    --_inkkit-code-keyword: #c678dd;
-    --_inkkit-code-string: #98c379;
-    --_inkkit-code-number: #d19a66;
-    --_inkkit-code-title: #e5c07b;
-    --_inkkit-code-attr: #e06c75;
-  }
+  --_inkkit-code-keyword: light-dark(#a626a4, #c77bde);
+  --_inkkit-code-string: light-dark(#3b763a, #98c379);
+  --_inkkit-code-number: light-dark(#8d6001, #d19a66);
+  --_inkkit-code-title: light-dark(#8d6101, #e5c07b);
+  --_inkkit-code-attr: light-dark(#c82c1e, #e37981);
 }
 
-.inkkit-root .hljs-comment,
-.inkkit-root .hljs-quote {
+.inkkit-root .inkkit-hljs-comment,
+.inkkit-root .inkkit-hljs-quote {
   color: var(--inkkit-code-comment, var(--_inkkit-code-comment));
   font-style: italic;
 }
 
-.inkkit-root .hljs-keyword,
-.inkkit-root .hljs-literal,
-.inkkit-root .hljs-built_in,
-.inkkit-root .hljs-type,
-.inkkit-root .hljs-selector-tag,
-.inkkit-root .hljs-doctag {
+.inkkit-root .inkkit-hljs-keyword,
+.inkkit-root .inkkit-hljs-literal,
+.inkkit-root .inkkit-hljs-built_in,
+.inkkit-root .inkkit-hljs-type,
+.inkkit-root .inkkit-hljs-selector-tag,
+.inkkit-root .inkkit-hljs-doctag {
   color: var(--inkkit-code-keyword, var(--_inkkit-code-keyword));
 }
 
-.inkkit-root .hljs-string,
-.inkkit-root .hljs-regexp,
-.inkkit-root .hljs-addition,
-.inkkit-root .hljs-template-tag {
+.inkkit-root .inkkit-hljs-string,
+.inkkit-root .inkkit-hljs-regexp,
+.inkkit-root .inkkit-hljs-addition,
+.inkkit-root .inkkit-hljs-template-tag {
   color: var(--inkkit-code-string, var(--_inkkit-code-string));
 }
 
-.inkkit-root .hljs-number,
-.inkkit-root .hljs-symbol,
-.inkkit-root .hljs-bullet,
-.inkkit-root .hljs-link,
-.inkkit-root .hljs-meta {
+.inkkit-root .inkkit-hljs-number,
+.inkkit-root .inkkit-hljs-symbol,
+.inkkit-root .inkkit-hljs-bullet,
+.inkkit-root .inkkit-hljs-link,
+.inkkit-root .inkkit-hljs-meta {
   color: var(--inkkit-code-number, var(--_inkkit-code-number));
 }
 
-.inkkit-root .hljs-title,
-.inkkit-root .hljs-section,
-.inkkit-root .hljs-name,
-.inkkit-root .hljs-selector-id,
-.inkkit-root .hljs-selector-class {
+.inkkit-root .inkkit-hljs-title,
+.inkkit-root .inkkit-hljs-section,
+.inkkit-root .inkkit-hljs-name,
+.inkkit-root .inkkit-hljs-selector-id,
+.inkkit-root .inkkit-hljs-selector-class {
   color: var(--inkkit-code-title, var(--_inkkit-code-title));
 }
 
-.inkkit-root .hljs-attr,
-.inkkit-root .hljs-attribute,
-.inkkit-root .hljs-property,
-.inkkit-root .hljs-variable,
-.inkkit-root .hljs-template-variable,
-.inkkit-root .hljs-tag,
-.inkkit-root .hljs-deletion {
+.inkkit-root .inkkit-hljs-attr,
+.inkkit-root .inkkit-hljs-attribute,
+.inkkit-root .inkkit-hljs-property,
+.inkkit-root .inkkit-hljs-variable,
+.inkkit-root .inkkit-hljs-template-variable,
+.inkkit-root .inkkit-hljs-tag,
+.inkkit-root .inkkit-hljs-deletion {
   color: var(--inkkit-code-attr, var(--_inkkit-code-attr));
 }
 
-.inkkit-root .hljs-emphasis {
+.inkkit-root .inkkit-hljs-emphasis {
   font-style: italic;
 }
 
-.inkkit-root .hljs-strong {
+.inkkit-root .inkkit-hljs-strong {
   font-weight: 700;
 }
 
@@ -771,7 +777,7 @@
   background: color-mix(in srgb, var(--_inkkit-accent) 55%, transparent);
 }
 
-.inkkit-root .ProseMirror .literal-markdown {
+.inkkit-root .ProseMirror .inkkit-literal-markdown {
   white-space: pre-wrap;
   font-family: var(--_inkkit-mono);
   font-size: calc(var(--inkkit-font-size, 15px) * 0.9);
@@ -783,12 +789,6 @@
   font-size: calc(var(--inkkit-font-size, 15px) * 0.75);
 }
 
-.inkkit-root .inkkit-footnote-reference:focus-visible {
-  outline: var(--inkkit-focus-width, 2px) solid
-    var(--inkkit-focus-color, currentColor);
-  outline-offset: var(--inkkit-focus-offset, 2px);
-}
-
 .inkkit-root .inkkit-footnote-definition {
   border-inline-start: 2px solid var(--_inkkit-muted, currentColor);
   padding-inline-start: calc(var(--inkkit-font-size, 15px) * 1);
@@ -811,24 +811,24 @@
 }
 
 .inkkit-root .ProseMirror .inkkit-callout {
-  --callout-color: var(--_inkkit-accent);
-  border-inline-start: 3px solid var(--callout-color);
+  --_inkkit-callout-color: var(--_inkkit-accent);
+  border-inline-start: 3px solid var(--_inkkit-callout-color);
   padding: calc(var(--inkkit-font-size, 15px) * 0.65)
     calc(var(--inkkit-font-size, 15px) * 1);
-  background: color-mix(in srgb, var(--callout-color) 7%, transparent);
+  background: color-mix(in srgb, var(--_inkkit-callout-color) 7%, transparent);
 }
 
 .inkkit-root .ProseMirror [data-inkkit-callout='TIP'] {
-  --callout-color: #30a46c;
+  --_inkkit-callout-color: #30a46c;
 }
 .inkkit-root .ProseMirror [data-inkkit-callout='IMPORTANT'] {
-  --callout-color: #8e4ec6;
+  --_inkkit-callout-color: #8e4ec6;
 }
 .inkkit-root .ProseMirror [data-inkkit-callout='WARNING'] {
-  --callout-color: #d28b00;
+  --_inkkit-callout-color: #d28b00;
 }
 .inkkit-root .ProseMirror [data-inkkit-callout='CAUTION'] {
-  --callout-color: #e5484d;
+  --_inkkit-callout-color: #e5484d;
 }
 
 .inkkit-root .inkkit-callout-header {
@@ -874,17 +874,15 @@
     overflow: visible;
   }
 
-  .inkkit-root .milkdown-table-block .table-wrapper,
+  .inkkit-root .inkkit-table-scroll,
   .inkkit-root .ProseMirror pre {
     overflow: visible;
   }
 
   .inkkit-root .inkkit-comment,
   .inkkit-root [data-inkkit-callout-toggle],
-  .inkkit-root .ProseMirror pre .copy,
-  .inkkit-root .milkdown-table-block .handle,
-  .inkkit-root .milkdown-table-block .button-group,
-  .inkkit-root .milkdown-table-block .line-handle {
+  .inkkit-root .ProseMirror pre .inkkit-copy,
+  .inkkit-root .inkkit-table-controls {
     display: none !important;
   }
 
@@ -898,8 +896,8 @@
 .inkkit-root .inkkit-mermaid-preview {
   padding: 16px;
   overflow: auto;
-  background: #fff;
-  color: #222;
+  background: var(--inkkit-diagram-background, #fff);
+  color: var(--inkkit-diagram-text-color, #222);
 }
 .inkkit-root .inkkit-mermaid-preview svg {
   display: block;
@@ -907,14 +905,37 @@
   height: auto;
 }
 .inkkit-root .inkkit-mermaid-preview[data-state='error'] {
-  color: #9b2424;
+  color: var(--inkkit-diagram-error-color, #9b2424);
   font-size: calc(var(--inkkit-font-size, 15px) * 0.9);
 }
 
-.inkkit-root .ProseMirror:focus-visible,
-.inkkit-root .inkkit-plain:focus-visible,
-.inkkit-root button:focus-visible {
+/* One ring for every control InkKit draws; the editing surfaces can be set apart. */
+.inkkit-root button:focus-visible,
+.inkkit-root .inkkit-file audio:focus-visible,
+.inkkit-root .inkkit-file video:focus-visible {
   outline: var(--inkkit-focus-width, 2px) solid
     var(--inkkit-focus-color, var(--_inkkit-accent));
   outline-offset: var(--inkkit-focus-offset, -2px);
 }
+
+/* Inline references sit in running text, so their ring sits outside it. */
+.inkkit-root .inkkit-footnote-reference:focus-visible,
+.inkkit-root .inkkit-wiki-link:focus-visible {
+  outline: var(--inkkit-focus-width, 2px) solid
+    var(--inkkit-focus-color, currentColor);
+  outline-offset: var(--inkkit-focus-offset, 2px);
+}
+
+.inkkit-root .ProseMirror:focus-visible,
+.inkkit-root .inkkit-plain:focus-visible {
+  outline: var(--inkkit-surface-focus-width, var(--inkkit-focus-width, 2px))
+    solid
+    var(
+      --inkkit-surface-focus-color,
+      var(--inkkit-focus-color, var(--_inkkit-accent))
+    );
+  outline-offset: var(
+    --inkkit-surface-focus-offset,
+    var(--inkkit-focus-offset, -2px)
+  );
+}