@aleph-alpha/chat-kit 6.4.0 → 6.4.1

package/dist/{CkHistory.vue_vue_type_script_setup_true_lang-B0WUzTHa.js → CkHistory.vue_vue_type_script_setup_true_lang-BvRIp3m6.js}

@@ -1,6 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, createElementBlock, createElementVNode, normalizeClass, renderSlot, createCommentVNode, mergeProps, withCtx, ref, watch, onScopeDispose, computed, useTemplateRef, createVNode, toDisplayString, resolveDynamicComponent, onBeforeUnmount, useSlots, onMounted, nextTick, onUnmounted, Fragment, renderList, normalizeStyle, Transition, createStaticVNode, Teleport, withModifiers, toValue, h, toRefs, useId, createTextVNode, useAttrs, onUpdated, createSlots, normalizeProps, guardReactiveProps, Comment, Text } from "vue";
-import { UiIcon, UiButton, UiFileType, UiTooltip, UiPopover, UiPopoverTrigger, UiPopoverContent, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiFloatActions, UiFloatActionItems, UiCodeBlock, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
-import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, b as useMarkdownParser } from "./useChatKitLabels-CatQSpfL.js";
+import { UiIcon, UiButton, UiFileType, UiTooltip, UiPopover, UiPopoverTrigger, UiPopoverContent, formatFileSize, UiDialog, UiDialogContent, UiDialogDescription, UiFieldLabel, UiToggleGroup, UiToggleGroupItem, UiField, UiTextarea, UiFileItem, UiProgress, Primitive, UiFloatActions, UiFloatActionItems, UiFadeMask, UiCodeBlock, UiAvatar, UiAvatarImage, UiSpinner, UiAvatarFallback, UiSidebarPopoverMenu, UiSidebarPopoverMenuItem } from "@aleph-alpha/ui-library";
+import { u as useChatKitLabels, d as defaultChatKitLabels, r as remarkCitations, b as useMarkdownParser } from "./useChatKitLabels-DxW0N5U-.js";
+import { f as findAndReplace } from "./index-CfVHzirA.js";
 const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
@@ -1160,6 +1161,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 const CkFeedbackButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-c4c638c3"]]);
+const SOFT_BREAK_RE = /\r?\n/g;
+const remarkBreaks = () => {
+  return (tree) => {
+    findAndReplace(tree, [
+      SOFT_BREAK_RE,
+      () => ({ type: "break" })
+    ]);
+  };
+};
 function useCitationRendering(citations, onOpenSource) {
   const sourcesByIndex = computed(
     () => new Map(
@@ -1251,6 +1261,7 @@ const _sfc_main$i = defineComponent({
       default: () => ({})
     },
     plugins: { type: Array, default: void 0 },
+    breaks: { type: Boolean, default: false },
     citations: {
       type: Array,
       default: void 0
@@ -1271,6 +1282,7 @@ const _sfc_main$i = defineComponent({
     );
     const effectivePlugins = computed(() => [
       ...props.plugins ?? [],
+      ...props.breaks ? [remarkBreaks] : [],
       ...citationPlugins.value
     ]);
     const { html } = useMarkdownParser(content, effectivePlugins);
@@ -2733,7 +2745,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     onMounted(async () => {
       const root = rootRef.value;
       if (!root) return;
-      const { createCrepeEditor } = await import("./createCrepeEditor-C-AQ1w_e.js");
+      const { createCrepeEditor } = await import("./createCrepeEditor-BGSlwmKn.js");
       if (destroyed) return;
       const initialMarkdown = props.modelValue;
       lastKnownMarkdown = initialMarkdown;
@@ -2814,6 +2826,7 @@ const _hoisted_2 = {
   class: "bg-background-surface-muted-subtle flex h-9 items-center justify-between px-3"
 };
 const _hoisted_3 = { class: "text-content-on-surface-secondary label-12-regular" };
+const FADE_HEIGHT = "53px";
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ name: "CkCodeEditor" },
   __name: "CkCodeEditor",
@@ -2830,6 +2843,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     showLineNumbers: { type: Boolean, default: true },
     lineWrapping: { type: Boolean, default: false },
     maxHeight: { default: void 0 },
+    scrollFade: { type: Boolean, default: true },
     autofocus: { type: Boolean, default: false },
     badge: { default: void 0 },
     writeToClipboard: { type: Function, default: void 0 }
@@ -2851,6 +2865,40 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const copyLabel = computed(
       () => isCopied.value ? labels.value.codeEditorCopied ?? "Copied" : labels.value.codeEditorCopy ?? "Copy code"
     );
+    const canScrollUp = ref(false);
+    const canScrollDown = ref(false);
+    let scrollTarget;
+    let scrollObserver;
+    function edgeToFade(up, down) {
+      if (up && down) return "both";
+      return up ? "top" : "bottom";
+    }
+    const fadeProps = computed(() => {
+      if (!props.scrollFade) return {};
+      const up = canScrollUp.value;
+      const down = canScrollDown.value;
+      return {
+        position: edgeToFade(up, down),
+        background: "secondary",
+        style: { "--ui-fade-mask-height": up || down ? FADE_HEIGHT : "0px" }
+      };
+    });
+    function syncScrollFades() {
+      if (!scrollTarget) return;
+      const { scrollTop, scrollHeight, clientHeight } = scrollTarget;
+      canScrollUp.value = scrollTop > 1;
+      canScrollDown.value = scrollTop + clientHeight < scrollHeight - 1;
+    }
+    function watchScrolling(scroller, content) {
+      scrollTarget = scroller;
+      scroller.addEventListener("scroll", syncScrollFades, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        scrollObserver = new ResizeObserver(syncScrollFades);
+        scrollObserver.observe(scroller);
+        scrollObserver.observe(content);
+      }
+      syncScrollFades();
+    }
     let editor;
     let destroyed = false;
     let lastKnownCode = props.modelValue;
@@ -2863,7 +2911,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     onMounted(async () => {
       const parent = hostRef.value;
       if (!parent) return;
-      const { createCodeMirror } = await import("./createCodeMirror-5iswYetS.js");
+      const { createCodeMirror } = await import("./createCodeMirror-BO-TWTzn.js");
       if (destroyed) return;
       const initialCode = props.modelValue;
       lastKnownCode = initialCode;
@@ -2878,8 +2926,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         lineWrapping: props.lineWrapping,
         badge: props.badge,
         onChange: handleChange,
-        onFocus: () => emit("focus"),
-        onBlur: () => emit("blur")
+        onFocus: () => emit("focus")
       });
       if (destroyed) {
         handle.destroy();
@@ -2887,6 +2934,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
       editor = handle;
       if (props.modelValue !== initialCode) handle.setCode(props.modelValue);
+      watchScrolling(handle.view.scrollDOM, handle.view.contentDOM);
       isReady.value = true;
       if (props.autofocus) handle.focus();
     });
@@ -2896,6 +2944,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         if (next === lastKnownCode) return;
         lastKnownCode = next;
         editor?.setCode(next);
+        void nextTick(syncScrollFades);
       }
     );
     watch(
@@ -2920,6 +2969,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       destroyed = true;
       clearTimeout(copyTimer);
+      scrollTarget?.removeEventListener("scroll", syncScrollFades);
+      scrollObserver?.disconnect();
+      scrollTarget = void 0;
       editor?.destroy();
       editor = void 0;
     });
@@ -2955,7 +3007,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         ref_key: "rootRef",
         ref: rootRef,
         class: normalizeClass([
-          "ck-code-editor ck-code-surface border-border-surface-default min-w-0 overflow-hidden rounded-lg border",
+          "ck-code-editor ck-code-surface border-border-surface-default bg-background-input-default min-w-0 overflow-hidden rounded-xl border",
           isReady.value && "ck-code-editor--ready",
           isLocked.value && "ck-code-editor--readonly",
           __props.disabled && "ck-code-editor--disabled"
@@ -2981,17 +3033,22 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["aria-label"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          ref_key: "hostRef",
-          ref: hostRef,
-          class: "ck-code-editor__host",
-          style: normalizeStyle(__props.maxHeight ? { "--ck-code-max-height": __props.maxHeight } : void 0)
-        }, null, 4)
+        (openBlock(), createBlock(resolveDynamicComponent(__props.scrollFade ? unref(UiFadeMask) : "div"), mergeProps(fadeProps.value, { class: "ck-code-editor__body min-w-0" }), {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "hostRef",
+              ref: hostRef,
+              class: "ck-code-editor__host",
+              style: normalizeStyle(__props.maxHeight ? { "--ck-code-max-height": __props.maxHeight } : void 0)
+            }, null, 4)
+          ]),
+          _: 1
+        }, 16))
       ], 42, _hoisted_1$1);
     };
   }
 });
-const CkCodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c1539a6f"]]);
+const CkCodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-75f52b7e"]]);
 const _hoisted_1 = {
   key: 1,
   class: "flex size-8 shrink-0 items-center justify-center rounded-2xl bg-background-surface-muted-subtle"

package/dist/adapters/responses-api.js

@@ -1,4 +1,4 @@
-import { g as generateId } from "../markdownToPlainText-BOtlQ_BY.js";
+import { g as generateId } from "../markdownToPlainText-DN_G-I6g.js";
 function extractMessageText(parts) {
   let text = "";
   for (const part of parts) {

package/dist/chat-kit.css

@@ -170,22 +170,69 @@
   pointer-events: none;
 }
 
+/* The body follows the design-system field rather than `UiCodeBlock`: body
+ * text in the primary content colour on the input surface, with muted mono
+ * line numbers. Only the syntax colours stay shared with `UiCodeBlock` (see
+ * `helpers/codemirror/code-palette.css`). The overrides live here, not in
+ * `theme.ts`, because `CkMilkdownEditor`'s code blocks use that theme too and
+ * must keep matching the rendered block. */
+.ck-code-editor[data-v-75f52b7e] {
+  --ck-cm-bg: transparent;
+  --ck-cm-foreground: oklch(var(--content-on-surface-primary));
+  --ck-cm-line-number: oklch(var(--content-on-surface-muted));
+}
+
 /* The editor fills the panel; `:deep` is needed because CodeMirror builds its
  * own DOM, which scoped styles do not reach. */
-.ck-code-editor__host[data-v-c1539a6f] .cm-editor {
+.ck-code-editor__host[data-v-75f52b7e] .cm-editor {
   background: var(--ck-cm-bg);
   color: var(--ck-cm-foreground);
 }
-.ck-code-editor__host[data-v-c1539a6f] .cm-scroller {
+
+/* Same declarations as the `body-14-regular` typography utility. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-scroller {
   max-height: var(--ck-code-max-height, none);
+  font-family: Saans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+/* 12px below the header, 16px above the bottom edge, and a 20px right inset,
+ * as in the design. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-content {
+  padding: 0.75rem 1.25rem 1rem 1rem;
+}
+
+/* The number column already carries the 1rem left inset, so the code must not
+ * pay for it a second time. The sibling selector only matches while the gutter
+ * is mounted, which is exactly when `showLineNumbers` is on. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-gutters ~ .cm-content {
+  padding-left: 0;
+}
+
+/* Numbers stay monospaced so the column does not jitter as digits change; the
+ * 12px right padding is the gap before the code. */
+.ck-code-editor__host[data-v-75f52b7e] .cm-lineNumbers .cm-gutterElement {
+  min-width: 0;
+  padding: 0 0.75rem 0 1rem;
+  /* `CODE_FONT_FAMILY` from `theme.ts`, repeated because importing it here
+   * would pull CodeMirror out of its lazy chunk. */
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
+  font-weight: 500;
+}
+.ck-code-editor__host[data-v-75f52b7e] .cm-placeholder {
+  color: oklch(var(--content-on-surface-muted));
 }
 
 /* Nothing is being edited, so the active-line band would only be noise. */
-.ck-code-editor--readonly .ck-code-editor__host[data-v-c1539a6f] .cm-activeLine,
-.ck-code-editor--readonly .ck-code-editor__host[data-v-c1539a6f] .cm-activeLineGutter {
+.ck-code-editor--readonly .ck-code-editor__host[data-v-75f52b7e] .cm-activeLine,
+.ck-code-editor--readonly .ck-code-editor__host[data-v-75f52b7e] .cm-activeLineGutter {
   background: transparent;
 }
-.ck-code-editor--disabled[data-v-c1539a6f] {
+.ck-code-editor--disabled[data-v-75f52b7e] {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
@@ -207,11 +254,23 @@
  * Exact parity is not achievable for every token: Shiki classifies with
  * TextMate grammars and CodeMirror with Lezer, and the two disagree at the
  * edges. The mapping in `theme.ts` targets the classes that actually occur in
- * everyday code.
+ * everyday code. Where one Lezer tag covers cases the GitHub themes colour
+ * differently, the mapping follows the more common one, which leaves a few
+ * known gaps: YAML keys and plain scalars both arrive as tags that mean
+ * something else in JavaScript, so they stay unhighlighted; `typeName` is blue
+ * here because that is right for TypeScript's primitives, though Rust and Go
+ * would want purple and red; and a fenced code block inside a Markdown
+ * document is not highlighted in its own language the way Shiki's embedded
+ * grammars do it.
  */
 
 .ck-code-surface {
-  --ck-cm-bg: #ffffff;
+  /* Held as bare oklch components, not a hex, because that is the form both
+   * `oklch()` and `UiFadeMask`'s surface variable need in order to fade the
+   * colour out to zero alpha. `--ck-cm-bg` is derived from it so there is one
+   * source of truth. */
+  --ck-cm-bg-components: 100% 0 89.88;
+  --ck-cm-bg: oklch(var(--ck-cm-bg-components));
   --ck-cm-foreground: #24292e;
   --ck-cm-keyword: #d73a49;
   --ck-cm-string: #032f62;
@@ -226,10 +285,18 @@
   --ck-cm-tag: #22863a;
   --ck-cm-error: #b31d28;
   --ck-cm-selection: oklch(var(--background-accent-soft));
+  /* Line numbers. `UiCodeBlock` draws its gutter as the code foreground at
+   * 40% opacity rather than as a colour of its own, so this is derived from
+   * `--ck-cm-foreground` and needs no dark-mode counterpart. */
+  --ck-cm-line-number: color-mix(
+    in oklab,
+    var(--ck-cm-foreground) 40%,
+    transparent
+  );
 }
 
 html.dark .ck-code-surface {
-  --ck-cm-bg: #24292e;
+  --ck-cm-bg-components: 27.81% 0.0117 248.25;
   --ck-cm-foreground: #e1e4e8;
   --ck-cm-keyword: #f97583;
   --ck-cm-string: #9ecbff;
@@ -1372,9 +1439,12 @@ img.ProseMirror-separator {
   .milkdown-code-block
   .cm-lineNumbers
   .cm-gutterElement {
-  min-width: 2.25rem;
-  padding: 0 0.75rem 0 1rem;
-  color: oklch(var(--content-on-surface-muted));
+  /* Geometry and colour come from `theme.ts`, which matches `UiCodeBlock`'s
+   * gutter; this rule only exists because Crepe's own code-block styles would
+   * otherwise win on specificity. */
+  min-width: 4rem;
+  padding: 0 1rem;
+  color: var(--ck-cm-line-number);
   text-align: right;
 }
 

package/dist/{code-palette-DH_G7mZ5.js → code-palette-BWrZDi47.js}

@@ -19273,7 +19273,7 @@ function legacy(parser) {
   return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql(dialectName) {
-  return import("./index-GpSpJ3ti.js").then((m) => m.sql({ dialect: m[dialectName] }));
+  return import("./index-DZGfsazg.js").then((m) => m.sql({ dialect: m[dialectName] }));
 }
 const languages = [
   // New-style language modes
@@ -19281,7 +19281,7 @@ const languages = [
     name: "C",
     extensions: ["c", "h", "ino"],
     load() {
-      return import("./index-CWp_t8Wl.js").then((m) => m.cpp());
+      return import("./index-B4uqe-fL.js").then((m) => m.cpp());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19289,7 +19289,7 @@ const languages = [
     alias: ["cpp"],
     extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
     load() {
-      return import("./index-CWp_t8Wl.js").then((m) => m.cpp());
+      return import("./index-B4uqe-fL.js").then((m) => m.cpp());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19304,14 +19304,14 @@ const languages = [
     name: "CSS",
     extensions: ["css"],
     load() {
-      return import("./index-DfLCrnVq.js").then((m) => m.css());
+      return import("./index-CefLTKmi.js").then((m) => m.css());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Go",
     extensions: ["go"],
     load() {
-      return import("./index-g2X42srv.js").then((m) => m.go());
+      return import("./index-Bw39pbRL.js").then((m) => m.go());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19319,14 +19319,14 @@ const languages = [
     alias: ["xhtml"],
     extensions: ["html", "htm", "handlebars", "hbs"],
     load() {
-      return import("./index-BqWO6mvz.js").then((m) => m.html());
+      return import("./index-ptbBQ53d.js").then((m) => m.html());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Java",
     extensions: ["java"],
     load() {
-      return import("./index-hEJ_Bavx.js").then((m) => m.java());
+      return import("./index-Bfo4U-Al.js").then((m) => m.java());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19334,14 +19334,14 @@ const languages = [
     alias: ["ecmascript", "js", "node"],
     extensions: ["js", "mjs", "cjs"],
     load() {
-      return import("./index-BlIc9r0r.js").then((m) => m.javascript());
+      return import("./index-Cx5ThXzs.js").then((m) => m.javascript());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Jinja",
     extensions: ["j2", "jinja", "jinja2"],
     load() {
-      return import("./index-DLjsqQHx.js").then((m) => m.jinja());
+      return import("./index--Yonjzfi.js").then((m) => m.jinja());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19349,28 +19349,28 @@ const languages = [
     alias: ["json5"],
     extensions: ["json", "map"],
     load() {
-      return import("./index-Db5-PJG-.js").then((m) => m.json());
+      return import("./index-Hro6EPZS.js").then((m) => m.json());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "JSX",
     extensions: ["jsx"],
     load() {
-      return import("./index-BlIc9r0r.js").then((m) => m.javascript({ jsx: true }));
+      return import("./index-Cx5ThXzs.js").then((m) => m.javascript({ jsx: true }));
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "LESS",
     extensions: ["less"],
     load() {
-      return import("./index-XZeturb3.js").then((m) => m.less());
+      return import("./index-TemHfU1M.js").then((m) => m.less());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Liquid",
     extensions: ["liquid"],
     load() {
-      return import("./index-S4ylc8JK.js").then((m) => m.liquid());
+      return import("./index-oO_X5wU0.js").then((m) => m.liquid());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19383,7 +19383,7 @@ const languages = [
     name: "Markdown",
     extensions: ["md", "markdown", "mkd"],
     load() {
-      return import("./index-hbS5PDHj.js").then((m) => m.markdown());
+      return import("./index-DTomeh-p.js").then((m) => m.markdown());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19402,7 +19402,7 @@ const languages = [
     name: "PHP",
     extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
     load() {
-      return import("./index-CR2kGrpY.js").then((m) => m.php());
+      return import("./index-CeaT_FBl.js").then((m) => m.php());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19423,28 +19423,28 @@ const languages = [
     extensions: ["BUILD", "bzl", "py", "pyw"],
     filename: /^(BUCK|BUILD)$/,
     load() {
-      return import("./index-Dbi75pKH.js").then((m) => m.python());
+      return import("./index-CZmdzLaU.js").then((m) => m.python());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Rust",
     extensions: ["rs"],
     load() {
-      return import("./index-CFGO7LRz.js").then((m) => m.rust());
+      return import("./index-GDUM7K5V.js").then((m) => m.rust());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Sass",
     extensions: ["sass"],
     load() {
-      return import("./index-ABUMl7H3.js").then((m) => m.sass({ indented: true }));
+      return import("./index-DqUiBDRo.js").then((m) => m.sass({ indented: true }));
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "SCSS",
     extensions: ["scss"],
     load() {
-      return import("./index-ABUMl7H3.js").then((m) => m.sass());
+      return import("./index-DqUiBDRo.js").then((m) => m.sass());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19464,7 +19464,7 @@ const languages = [
     name: "TSX",
     extensions: ["tsx"],
     load() {
-      return import("./index-BlIc9r0r.js").then((m) => m.javascript({ jsx: true, typescript: true }));
+      return import("./index-Cx5ThXzs.js").then((m) => m.javascript({ jsx: true, typescript: true }));
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19472,14 +19472,14 @@ const languages = [
     alias: ["ts"],
     extensions: ["ts", "mts", "cts"],
     load() {
-      return import("./index-BlIc9r0r.js").then((m) => m.javascript({ typescript: true }));
+      return import("./index-Cx5ThXzs.js").then((m) => m.javascript({ typescript: true }));
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "WebAssembly",
     extensions: ["wat", "wast"],
     load() {
-      return import("./index-QAs789O5.js").then((m) => m.wast());
+      return import("./index-DlLnTKv3.js").then((m) => m.wast());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19487,7 +19487,7 @@ const languages = [
     alias: ["rss", "wsdl", "xsd"],
     extensions: ["xml", "xsl", "xsd", "svg"],
     load() {
-      return import("./index-D0IZW-Up.js").then((m) => m.xml());
+      return import("./index-CrBanggA.js").then((m) => m.xml());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -19495,7 +19495,7 @@ const languages = [
     alias: ["yml"],
     extensions: ["yaml", "yml"],
     load() {
-      return import("./index-DPgw0Cf_.js").then((m) => m.yaml());
+      return import("./index-DH9e_hqJ.js").then((m) => m.yaml());
     }
   }),
   // Legacy modes ported from CodeMirror 5
@@ -20284,13 +20284,13 @@ const languages = [
     name: "Vue",
     extensions: ["vue"],
     load() {
-      return import("./index-CIF4qQzR.js").then((m) => m.vue());
+      return import("./index-CGEgwupi.js").then((m) => m.vue());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
     name: "Angular Template",
     load() {
-      return import("./index-DKwEe_Tu.js").then((m) => m.angular());
+      return import("./index-g_Bs6dNr.js").then((m) => m.angular());
     }
   })
 ];
@@ -21398,12 +21398,22 @@ const ckHighlightStyle = HighlightStyle.define([
       tags.definitionKeyword,
       tags.moduleKeyword,
       tags.operatorKeyword,
-      tags.operator
+      tags.operator,
+      // CSS units (`px`, `rem`) are `keyword.other.unit` to a TextMate grammar.
+      tags.unit
     ],
     color: cssVar("keyword")
   },
   {
-    tag: [tags.string, tags.special(tags.string), tags.regexp, tags.escape, tags.character],
+    tag: [
+      tags.string,
+      tags.special(tags.string),
+      tags.regexp,
+      tags.escape,
+      tags.character,
+      // `class="card"` — the quoted value is a string, not a constant.
+      tags.attributeValue
+    ],
     color: cssVar("string")
   },
   {
@@ -21419,7 +21429,8 @@ const ckHighlightStyle = HighlightStyle.define([
       tags.definition(tags.typeName),
       tags.className,
       tags.namespace,
-      tags.self
+      // `entity.other.attribute-name`, which GitHub colours like any entity.
+      tags.attributeName
     ],
     color: cssVar("function")
   },
@@ -21436,19 +21447,35 @@ const ckHighlightStyle = HighlightStyle.define([
       tags.typeName,
       tags.standard(tags.typeName),
       tags.propertyName,
-      tags.attributeName,
-      tags.attributeValue
+      // `this` / `self` are `variable.language`, which GitHub paints blue.
+      tags.self,
+      // CSS colour literals (`#ff0066`), `constant.other.color-*`.
+      tags.color,
+      // Bare identifiers a grammar cannot classify further — SQL column and
+      // table names, for one. Every more specific name tag has its own rule
+      // above, so this only catches what would otherwise be unstyled.
+      tags.name
     ],
     color: cssVar("constant")
   },
   // A declared property name, which UiCodeBlock renders in the text token.
   { tag: tags.definition(tags.propertyName), color: cssVar("property") },
-  { tag: [tags.tagName, tags.angleBracket], color: cssVar("tag") },
+  { tag: tags.tagName, color: cssVar("tag") },
+  // Markdown blockquotes are `markup.quote`, the same green as a tag name.
+  { tag: tags.quote, color: cssVar("tag") },
   {
-    tag: [tags.variableName, tags.punctuation, tags.bracket, tags.separator],
+    tag: [
+      tags.variableName,
+      tags.punctuation,
+      tags.bracket,
+      tags.separator,
+      // `<`, `>` and `</` are plain text in the GitHub themes; only the tag
+      // name inside them is green.
+      tags.angleBracket
+    ],
     color: cssVar("foreground")
   },
-  { tag: tags.heading, fontWeight: "bold" },
+  { tag: tags.heading, color: cssVar("constant"), fontWeight: "bold" },
   { tag: tags.strong, fontWeight: "bold" },
   { tag: tags.emphasis, fontStyle: "italic" },
   { tag: tags.link, textDecoration: "underline" },
@@ -21478,7 +21505,16 @@ const ckCodeMirrorTheme = [
     ".cm-gutters": {
       backgroundColor: "transparent",
       borderRight: "none",
-      color: cssVar("comment")
+      color: cssVar("line-number")
+    },
+    // `UiCodeBlock` draws its numbers as a 2rem right-aligned column inside the
+    // block's 1rem padding, with a 1rem gap before the code. CodeMirror puts
+    // the gutter outside `.cm-content`, so the same geometry is expressed as
+    // padding on the number cell.
+    ".cm-lineNumbers .cm-gutterElement": {
+      minWidth: "4rem",
+      padding: "0 1rem",
+      textAlign: "right"
     },
     ".cm-activeLineGutter": {
       backgroundColor: "transparent"

package/dist/components/base/CkCodeEditor/CkCodeEditor.stories.d.ts

@@ -31,7 +31,8 @@ export declare const Readonly: Story;
 export declare const WithoutHeader: Story;
 /**
  * `maxHeight` caps the scrollable area and `lineWrapping` folds long lines
- * instead of scrolling sideways.
+ * instead of scrolling sideways. Scroll it: the code fades at whichever edge
+ * has more of the document beyond it, and neither edge fades once you reach it.
  */
 export declare const ScrollingAndWrapping: Story;
 /**

package/dist/components/base/CkCodeEditor/CkCodeEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CkCodeEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCodeEditor/CkCodeEditor.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,YAAY,MAAM,oBAAoB,CAAC;AA6B9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CA+CnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgKnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC"}
+{"version":3,"file":"CkCodeEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkCodeEditor/CkCodeEditor.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,YAAY,MAAM,oBAAoB,CAAC;AA6B9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAgDnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgKnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC"}

package/dist/components/base/CkCodeEditor/CkCodeEditor.vue.d.ts

@@ -33,6 +33,7 @@ declare const __VLS_export: import("vue").DefineComponent<CkCodeEditorProps, {
     showCopyButton: boolean;
     lineWrapping: boolean;
     maxHeight: string;
+    scrollFade: boolean;
     badge: import("./badgeDecoration").CkCodeEditorBadgeRule;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;