@aicayzer/inkkit 0.3.4 → 0.3.6

package/dist/style.css

@@ -912,6 +912,30 @@
   color: inherit;
 }
 
+.inkkit-root .ProseMirror u {
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--inkkit-underline-thickness, auto);
+  text-underline-offset: var(--inkkit-underline-offset, auto);
+}
+
+/* Shifted rather than vertically aligned, so a line holding them keeps its
+   height. A footnote reference is also a `sup` and keeps its own style. */
+.inkkit-root .ProseMirror sup:not([data-inkkit-footnote-reference]),
+.inkkit-root .ProseMirror sub {
+  position: relative;
+  font-size: var(--inkkit-script-size, 0.75em);
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+.inkkit-root .ProseMirror sup:not([data-inkkit-footnote-reference]) {
+  top: calc(var(--inkkit-superscript-shift, 0.5em) * -1);
+}
+
+.inkkit-root .ProseMirror sub {
+  bottom: calc(var(--inkkit-subscript-shift, 0.25em) * -1);
+}
+
 .inkkit-root .ProseMirror .inkkit-callout {
   --_inkkit-callout-color: var(--_inkkit-accent);
   border-inline-start: 3px solid var(--_inkkit-callout-color);
@@ -997,10 +1021,74 @@
 }
 /* Diagram previews are presentation; the authored code remains editable. */
 .inkkit-root .inkkit-mermaid-preview {
+  --_inkkit-diagram-bg: var(
+    --inkkit-diagram-background,
+    light-dark(#ffffff, #1c1c1e)
+  );
+  --_inkkit-diagram-fg: var(
+    --inkkit-diagram-text-color,
+    light-dark(#1c1c1e, #f2f2f7)
+  );
+  --_inkkit-diagram-muted: light-dark(#636366, #aeaeb2);
+  --_inkkit-diagram-line: light-dark(#48484a, #d1d1d6);
+  --_inkkit-diagram-surface: light-dark(#f2f2f7, #2c2c2e);
+  --_inkkit-diagram-surface-alt: light-dark(#e5e5ea, #3a3a3c);
+  --_inkkit-diagram-border: #8e8e93;
+  --_inkkit-diagram-font: Arial, sans-serif;
+  --_inkkit-diagram-font-mono: monospace;
+  --_inkkit-diagram-series-1: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-1, light-dark(#0088ff, #0091ff))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-2: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-2, light-dark(#34c759, #30d158))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-3: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-3, light-dark(#6155f5, #6d7cff))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-4: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-4, light-dark(#ff8d28, #ff9230))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-5: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-5, light-dark(#ff383c, #ff4245))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-6: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-6, light-dark(#00c8b3, #00dac3))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-7: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-7, light-dark(#ffcc00, #ffd600))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-series-8: color-mix(
+    in srgb,
+    var(--inkkit-diagram-series-8, light-dark(#00c0e8, #3cd3fe))
+      var(--inkkit-diagram-color-strength, 35%),
+    var(--_inkkit-diagram-bg)
+  );
+  --_inkkit-diagram-accent: var(--_inkkit-diagram-series-1);
   padding: 16px;
   overflow: auto;
-  background: var(--inkkit-diagram-background, #fff);
-  color: var(--inkkit-diagram-text-color, #222);
+  background: var(--_inkkit-diagram-bg);
+  color: var(--_inkkit-diagram-fg);
 }
 .inkkit-root .inkkit-mermaid-preview svg {
   display: block;
@@ -1008,7 +1096,7 @@
   height: auto;
 }
 .inkkit-root .inkkit-mermaid-preview[data-state='error'] {
-  color: var(--inkkit-diagram-error-color, #9b2424);
+  color: var(--inkkit-diagram-error-color, light-dark(#9b2424, #ffb4ab));
   font-size: calc(var(--_inkkit-font-size) * 0.9);
 }
 

package/dist/types.d.ts

@@ -1,5 +1,14 @@
 /** `md` is Markdown; `txt` is literal text, shown and saved as typed. */
 export type DocumentFormat = 'md' | 'txt';
+/** What saving promises for a format. `exact` saves the file exactly. `structure` keeps the
+ *  structure and marks and replaces fonts, colors and sizes with Inkkit's style. `lossy` is a
+ *  conversion that drops something and says what. */
+export type FormatPromise = 'exact' | 'structure' | 'lossy';
+/** A format the host offered at mount, with what saving it promises. */
+export interface OfferedFormat {
+    format: DocumentFormat;
+    promise: FormatPromise;
+}
 /** What every adapter call receives, to tell which document, load and call it belongs to. The
  *  operation ID is opaque and differs for each call from one editor. */
 export interface DocumentContext {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -54,9 +54,6 @@
     "test:browser": "playwright test --project=chromium",
     "test:built-playground": "playwright test --config playwright.built.config.ts"
   },
-  "dependencies": {
-    "mermaid": "12.1.0"
-  },
   "devDependencies": {
     "@milkdown/kit": "7.22.3",
     "@playwright/test": "^1.64.0",
@@ -85,6 +82,7 @@
     "micromark-extension-mdxjs": "3.0.0",
     "micromark-util-normalize-identifier": "^2.0.1",
     "micromark-util-types": "^2.0.3",
+    "pele": "1.12.0",
     "prettier": "^3.9.8",
     "prosemirror-drop-indicator": "0.1.4",
     "prosemirror-search": "^1.1.1",