@aicayzer/inkkit 0.5.0 → 0.6.0

package/dist/chunks/{core-fEBASTpF.js → core-C37056dR.js}

@@ -54959,6 +54959,14 @@ function codeControlsPlugin(visibleRect) {
 					button.setAttribute("aria-label", labels.codeLanguage);
 					button.setAttribute("aria-haspopup", "dialog");
 					button.setAttribute("aria-expanded", "false");
+					const chevron = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+					chevron.setAttribute("viewBox", "0 0 12 12");
+					chevron.setAttribute("aria-hidden", "true");
+					chevron.setAttribute("focusable", "false");
+					const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					path.setAttribute("d", "m3 4.5 3 3 3-3");
+					chevron.append(path);
+					button.append(chevron);
 					wrapper.append(button);
 					let popup;
 					let restore;
@@ -54971,7 +54979,7 @@ function codeControlsPlugin(visibleRect) {
 						if (focus) button.focus();
 					};
 					button.addEventListener("mousedown", (event) => event.preventDefault());
-					button.addEventListener("click", () => {
+					button.addEventListener("click", (event) => {
 						if (popup) {
 							close();
 							return;
@@ -54979,6 +54987,7 @@ function codeControlsPlugin(visibleRect) {
 						const captured = view.state.doc;
 						popup = document.createElement("span");
 						popup.className = "inkkit-code-language-menu";
+						popup.dataset.inkkitInputModality = event.detail === 0 ? "keyboard" : "pointer";
 						popup.setAttribute("role", "dialog");
 						popup.setAttribute("aria-label", labels.codeLanguage);
 						popup.contentEditable = "false";
@@ -55031,7 +55040,11 @@ function codeControlsPlugin(visibleRect) {
 							}
 						};
 						search.addEventListener("input", render);
+						popup.addEventListener("pointerdown", () => {
+							if (popup) popup.dataset.inkkitInputModality = "pointer";
+						});
 						popup.addEventListener("keydown", (event) => {
+							if (popup && (event.key === "Tab" || event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End" || event.key === "Enter")) popup.dataset.inkkitInputModality = "keyboard";
 							if (event.key === "Escape") {
 								event.preventDefault();
 								event.stopPropagation();
@@ -55045,7 +55058,8 @@ function codeControlsPlugin(visibleRect) {
 							if (event.key === "ArrowUp") {
 								event.preventDefault();
 								const options = [...list.querySelectorAll("button")];
-								options[(options.indexOf(document.activeElement) - 1 + options.length) % options.length]?.focus();
+								const index = options.indexOf(document.activeElement);
+								options[index < 0 ? options.length - 1 : (index - 1 + options.length) % options.length]?.focus();
 							}
 							if (event.key === "Enter" && event.target === search) {
 								event.preventDefault();
@@ -57219,7 +57233,7 @@ async function createMilkdownEditor(root, options, runtime) {
 				return true;
 			}
 		}));
-	}).use(labelsCtx).use(linkSchemesCtx).use(formatInputCtx).use(richTextGuard).use(runtime.plugins.paste).use(visibleClipboard).use(runtime.plugins.suggestions).use(runtime.plugins.keymap).use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files))).use(codeControlCtx).use(codeControlsPlugin(() => runtime.visibleRect())).use(tablePlugins).use(tableBlock).use(runtime.plugins.change).use(runtime.plugins.historyInput).use(history).use(clipboard).use(cursor).use(taskListPlugin((operation) => runtime.mutate(operation))).use(undoTypedRule).use(quoteBackspace).use(calloutEnter).use(literalEnter).use(literalReread).use(listItemBackspace).use(nestedItemEnter).use(rejoinLists).use(movedListItems).use(textInputPolicy).use(runtime.copy ? codeCopyPlugin((text) => runtime.copy?.(text)) : []).use(placeholderPlugin).use(options.rendering?.codeHighlighting === false ? [] : (await import("./highlight-D3LQRB1-.js")).highlightPlugin).use(options.rendering?.diagramPreview === false || !diagramsAvailable() ? [] : mermaidPreview(runtime.diagrams, (error) => runtime.report(error))).use(selectionPlugin).use($prose(() => search())).use(runtime.plugins.policy).use(options.wikiLinks ? wikiLinkView(options.wikiLinks, {
+	}).use(labelsCtx).use(linkSchemesCtx).use(formatInputCtx).use(richTextGuard).use(runtime.plugins.paste).use(visibleClipboard).use(runtime.plugins.suggestions).use(runtime.plugins.keymap).use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files))).use(codeControlCtx).use(codeControlsPlugin(() => runtime.visibleRect())).use(tablePlugins).use(tableBlock).use(runtime.plugins.change).use(runtime.plugins.historyInput).use(history).use(clipboard).use(cursor).use(taskListPlugin((operation) => runtime.mutate(operation))).use(undoTypedRule).use(quoteBackspace).use(calloutEnter).use(literalEnter).use(literalReread).use(listItemBackspace).use(nestedItemEnter).use(rejoinLists).use(movedListItems).use(textInputPolicy).use(runtime.copy ? codeCopyPlugin((text) => runtime.copy?.(text)) : []).use(placeholderPlugin).use(options.rendering?.codeHighlighting === false ? [] : (await import("./highlight-ByA5v5o7.js")).highlightPlugin).use(options.rendering?.diagramPreview === false || !diagramsAvailable() ? [] : mermaidPreview(runtime.diagrams, (error) => runtime.report(error))).use(selectionPlugin).use($prose(() => search())).use(runtime.plugins.policy).use(options.wikiLinks ? wikiLinkView(options.wikiLinks, {
 		capture: () => runtime.capture(),
 		active: () => runtime.active(),
 		labels: {

package/dist/chunks/{highlight-D3LQRB1-.js → highlight-ByA5v5o7.js}

@@ -1,4 +1,4 @@
-import { a as Decoration, c as PluginKey, d as __toESM, i as $prose, o as DecorationSet, s as Plugin, u as __commonJSMin } from "./core-fEBASTpF.js";
+import { a as Decoration, c as PluginKey, d as __toESM, i as $prose, o as DecorationSet, s as Plugin, u as __commonJSMin } from "./core-C37056dR.js";
 //#region node_modules/.pnpm/highlight.js@11.11.2/node_modules/highlight.js/es/languages/arduino.js
 /** @type LanguageFn */
 function cPlusPlus(hljs) {

package/dist/core.js

@@ -1,2 +1,2 @@
-import { r as InkKitError, t as InkKitEditor } from "./chunks/core-fEBASTpF.js";
+import { r as InkKitError, t as InkKitEditor } from "./chunks/core-C37056dR.js";
 export { InkKitEditor, InkKitError };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as registerDiagram, r as InkKitError, t as InkKitEditor } from "./chunks/core-fEBASTpF.js";
+import { n as registerDiagram, r as InkKitError, t as InkKitEditor } from "./chunks/core-C37056dR.js";
 //#region node_modules/.pnpm/dompurify@3.4.17/node_modules/dompurify/dist/purify.es.mjs
 /*! @license DOMPurify 3.4.17 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.17/LICENSE */
 function _OverloadYield(e, d) {

package/dist/style.css

@@ -3,6 +3,7 @@
   box-sizing: border-box;
   color-scheme: var(--inkkit-color-scheme, light dark);
   color: var(--inkkit-text-color, CanvasText);
+  background: var(--inkkit-background-color, transparent);
   font-family: var(
     --inkkit-font-family,
     -apple-system,
@@ -628,7 +629,7 @@
   font-size: calc(var(--_inkkit-font-size) * 0.867);
   line-height: 1.5;
   background: var(--_inkkit-code-bg);
-  border-radius: 8px;
+  border-radius: var(--inkkit-code-radius, 8px);
   padding: calc(var(--_inkkit-font-size) * 0.8)
     calc(var(--_inkkit-font-size) * 0.933);
   margin: 0 0 calc(var(--_inkkit-font-size) * 0.8);
@@ -679,9 +680,27 @@
 }
 
 .inkkit-root .ProseMirror blockquote {
+  position: relative;
   margin: 0 0 calc(var(--_inkkit-font-size) * 0.8);
-  padding: 2px 0 2px calc(var(--_inkkit-font-size) * 0.8);
-  border-left: 2px solid var(--_inkkit-accent);
+  padding: 2px 0 2px
+    calc(var(--_inkkit-font-size) * 0.8 + var(--inkkit-quote-rule-width, 2px));
+}
+
+.inkkit-root .ProseMirror blockquote::before {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--inkkit-quote-rule-width, 2px);
+  border-radius: var(--inkkit-quote-rule-radius, 0px);
+  background: var(--inkkit-quote-rule-color, var(--_inkkit-accent));
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  .inkkit-root .ProseMirror blockquote::before {
+    background: CanvasText;
+    forced-color-adjust: none;
+  }
 }
 
 .inkkit-root .ProseMirror blockquote > :first-child {
@@ -1211,6 +1230,9 @@
   user-select: none;
 }
 .inkkit-root .inkkit-code-language {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   height: 24px;
   padding: 0 6px;
   border: 0;
@@ -1220,9 +1242,15 @@
   font: inherit;
   cursor: pointer;
 }
-.inkkit-root .inkkit-code-language::after {
-  content: '⌄';
-  margin-left: 5px;
+.inkkit-root .inkkit-code-language svg {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 .inkkit-root .inkkit-code-language:hover {
   background: color-mix(in srgb, CanvasText 7%, transparent);
@@ -1240,7 +1268,7 @@
   flex-direction: column;
   width: 220px;
   max-height: min(320px, 50vh);
-  padding: 5px;
+  padding: 6px;
   box-sizing: border-box;
   border: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
   border-radius: 8px;
@@ -1252,10 +1280,10 @@
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
-  padding: 7px;
-  border: 0;
-  border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
-  background: transparent;
+  padding: 7px 8px;
+  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
+  border-radius: 5px;
+  background: color-mix(in srgb, CanvasText 3%, transparent);
   color: inherit;
   font: inherit;
 }
@@ -1263,7 +1291,7 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding-top: 4px;
+  padding: 4px 0 0;
 }
 .inkkit-root .inkkit-code-language-list button {
   flex-shrink: 0;
@@ -1277,10 +1305,40 @@
   cursor: pointer;
 }
 .inkkit-root .inkkit-code-language-list button:hover,
-.inkkit-root .inkkit-code-language-list button:focus-visible,
+.inkkit-root
+  .inkkit-code-language-menu[data-inkkit-input-modality='keyboard']
+  .inkkit-code-language-list
+  button:focus,
 .inkkit-root .inkkit-code-language-list button[aria-pressed='true'] {
   background: color-mix(in srgb, CanvasText 8%, transparent);
 }
+.inkkit-root .inkkit-code-language-menu input:focus,
+.inkkit-root .inkkit-code-language-menu button:focus {
+  outline: none;
+}
+.inkkit-root
+  .inkkit-code-language-menu[data-inkkit-input-modality='keyboard']
+  input:focus,
+.inkkit-root
+  .inkkit-code-language-menu[data-inkkit-input-modality='keyboard']
+  button:focus {
+  outline: var(--inkkit-focus-width, 2px) solid
+    var(--inkkit-focus-color, var(--_inkkit-accent));
+  outline-offset: var(--inkkit-focus-offset, -2px);
+}
+@media (forced-colors: active) {
+  .inkkit-root .inkkit-code-language-menu input {
+    border-color: ButtonBorder;
+  }
+  .inkkit-root
+    .inkkit-code-language-menu[data-inkkit-input-modality='keyboard']
+    input:focus,
+  .inkkit-root
+    .inkkit-code-language-menu[data-inkkit-input-modality='keyboard']
+    button:focus {
+    outline-color: Highlight;
+  }
+}
 
 .inkkit-root .milkdown-drop-indicator {
   background: var(--inkkit-drop-indicator-color, var(--_inkkit-accent));

package/dist/themes/calm.css

@@ -0,0 +1,36 @@
+:where([data-inkkit-theme='calm']) {
+  --inkkit-font-family:
+    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --inkkit-font-size: 15px;
+  --inkkit-paragraph-spacing: calc(var(--inkkit-font-size) * 0.667);
+  --inkkit-reading-width: 100%;
+  --inkkit-background-color: light-dark(#ffffff, #1d2430);
+  --inkkit-text-color: light-dark(#252c36, #e6eaf0);
+  --inkkit-muted-color: light-dark(#656f7c, #a4adbb);
+  --inkkit-accent-color: light-dark(#3064af, #9abbf5);
+  --inkkit-rule-color: light-dark(#dce2e9, #434d5e);
+  --inkkit-checkbox-border-color: var(--inkkit-muted-color);
+  --inkkit-code-background: light-dark(#f3f5f8, #272e3a);
+  --inkkit-table-radius: 8px;
+  --inkkit-code-radius: 8px;
+  --inkkit-quote-rule-width: 3px;
+  --inkkit-quote-rule-radius: 2px;
+  --inkkit-quote-rule-color: light-dark(#a6a6a6, #777777);
+  --inkkit-code-comment: light-dark(#6e6e6e, #99999a);
+  --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-diagram-background: light-dark(#ffffff, #1d2430);
+  --inkkit-diagram-text-color: light-dark(#252c36, #e6eaf0);
+  --inkkit-diagram-color-strength: 35%;
+  --inkkit-diagram-series-1: light-dark(#4d87d5, #9abbf5);
+  --inkkit-diagram-series-2: light-dark(#69ad91, #a1d6bd);
+  --inkkit-diagram-series-3: light-dark(#9b80ce, #c4aff0);
+  --inkkit-diagram-series-4: light-dark(#d6a660, #edce9b);
+  --inkkit-diagram-series-5: light-dark(#ce819a, #eeb4c8);
+  --inkkit-diagram-series-6: light-dark(#65b4b1, #9edbd7);
+  --inkkit-diagram-series-7: light-dark(#cab85d, #e9dd99);
+  --inkkit-diagram-series-8: light-dark(#7ca9c5, #b1d6ed);
+}

package/dist/themes/essential.css

@@ -0,0 +1,36 @@
+:where([data-inkkit-theme='essential']) {
+  --inkkit-font-family:
+    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --inkkit-font-size: 15px;
+  --inkkit-paragraph-spacing: calc(var(--inkkit-font-size) * 0.667);
+  --inkkit-reading-width: 100%;
+  --inkkit-background-color: light-dark(#ffffff, #1c1c1c);
+  --inkkit-text-color: light-dark(#262626, #e8e8e8);
+  --inkkit-muted-color: light-dark(#707070, #a6a6a6);
+  --inkkit-accent-color: light-dark(#555555, #c4c4c4);
+  --inkkit-rule-color: light-dark(#dddddd, #444444);
+  --inkkit-checkbox-border-color: var(--inkkit-muted-color);
+  --inkkit-code-background: light-dark(#f7f7f7, #2a2a2a);
+  --inkkit-table-radius: 4px;
+  --inkkit-code-radius: 4px;
+  --inkkit-quote-rule-width: 3px;
+  --inkkit-quote-rule-radius: 2px;
+  --inkkit-quote-rule-color: light-dark(#a6a6a6, #777777);
+  --inkkit-code-comment: light-dark(#707070, #929292);
+  --inkkit-code-keyword: light-dark(#333333, #eeeeee);
+  --inkkit-code-string: light-dark(#686868, #bbbbbb);
+  --inkkit-code-number: light-dark(#555555, #c8c8c8);
+  --inkkit-code-title: light-dark(#444444, #dddddd);
+  --inkkit-code-attr: light-dark(#707070, #aaaaaa);
+  --inkkit-diagram-background: light-dark(#ffffff, #1c1c1c);
+  --inkkit-diagram-text-color: light-dark(#262626, #e8e8e8);
+  --inkkit-diagram-color-strength: 75%;
+  --inkkit-diagram-series-1: light-dark(#3d3d3d, #eeeeee);
+  --inkkit-diagram-series-2: light-dark(#5a5a5a, #d6d6d6);
+  --inkkit-diagram-series-3: light-dark(#747474, #bebebe);
+  --inkkit-diagram-series-4: light-dark(#8b8b8b, #a6a6a6);
+  --inkkit-diagram-series-5: light-dark(#a0a0a0, #8e8e8e);
+  --inkkit-diagram-series-6: light-dark(#b4b4b4, #767676);
+  --inkkit-diagram-series-7: light-dark(#c6c6c6, #5e5e5e);
+  --inkkit-diagram-series-8: light-dark(#d7d7d7, #464646);
+}

package/dist/themes/standard.css

@@ -0,0 +1,39 @@
+:where([data-inkkit-theme='standard']) {
+  --inkkit-font-family:
+    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --inkkit-font-size: 15px;
+  --inkkit-paragraph-spacing: calc(var(--inkkit-font-size) * 0.667);
+  --inkkit-reading-width: 100%;
+  --inkkit-background-color: light-dark(#ffffff, #1c1c1e);
+  --inkkit-text-color: CanvasText;
+  --inkkit-muted-color: light-dark(#6e6e6e, #99999a);
+  --inkkit-accent-color: light-dark(#0069d1, #409cff);
+  --inkkit-rule-color: color-mix(in srgb, CanvasText 14%, transparent);
+  --inkkit-checkbox-border-color: var(--inkkit-muted-color);
+  --inkkit-code-background: light-dark(
+    #f3f5f8,
+    color-mix(in srgb, CanvasText 8%, transparent)
+  );
+  --inkkit-table-radius: 8px;
+  --inkkit-code-radius: 8px;
+  --inkkit-quote-rule-width: 3px;
+  --inkkit-quote-rule-radius: 2px;
+  --inkkit-quote-rule-color: light-dark(#a6a6a6, #777777);
+  --inkkit-code-comment: light-dark(#6e6e6e, #99999a);
+  --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-diagram-background: light-dark(#ffffff, #1c1c1e);
+  --inkkit-diagram-text-color: light-dark(#1c1c1e, #f2f2f7);
+  --inkkit-diagram-color-strength: 35%;
+  --inkkit-diagram-series-1: light-dark(#0088ff, #0091ff);
+  --inkkit-diagram-series-2: light-dark(#34c759, #30d158);
+  --inkkit-diagram-series-3: light-dark(#6155f5, #6d7cff);
+  --inkkit-diagram-series-4: light-dark(#ff8d28, #ff9230);
+  --inkkit-diagram-series-5: light-dark(#ff383c, #ff4245);
+  --inkkit-diagram-series-6: light-dark(#00c8b3, #00dac3);
+  --inkkit-diagram-series-7: light-dark(#ffcc00, #ffd600);
+  --inkkit-diagram-series-8: light-dark(#00c0e8, #3cd3fe);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -17,7 +17,10 @@
       "types": "./dist/core.d.ts",
       "import": "./dist/core.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./themes/standard.css": "./dist/themes/standard.css",
+    "./themes/calm.css": "./dist/themes/calm.css",
+    "./themes/essential.css": "./dist/themes/essential.css"
   },
   "types": "./dist/index.d.ts",
   "files": [