@aleph-alpha/chat-kit 6.4.1 → 6.4.3

package/dist/{createCodeMirror-BO-TWTzn.js → createCodeMirror-CN8xL8qU.js}

@@ -114,22 +114,22 @@ function baseExtensions(options) {
     ...options.placeholder ? [placeholder(options.placeholder)] : []
   ];
 }
-async function createCodeMirror(options) {
+function createCodeMirror(options) {
   const languageSlot = new Compartment();
   const readonlySlot = new Compartment();
   const lineNumbersSlot = new Compartment();
   const wrappingSlot = new Compartment();
   const badgeSlot = new Compartment();
   const lineSeparatorSlot = new Compartment();
-  const support = await resolveLanguage(options.language);
   let languageRequestId = 0;
+  let destroyed = false;
   const view = new EditorView({
     parent: options.parent,
     state: EditorState.create({
       doc: options.doc,
       extensions: [
         ...baseExtensions(options),
-        languageSlot.of(support ? [support] : []),
+        languageSlot.of([]),
         readonlySlot.of(readonlyState(options.readonly)),
         lineNumbersSlot.of(options.showLineNumbers ? lineNumbers() : []),
         wrappingSlot.of(options.lineWrapping ? EditorView.lineWrapping : []),
@@ -141,8 +141,20 @@ async function createCodeMirror(options) {
     })
   });
   function reconfigure(slot, extension) {
+    if (destroyed) return;
     view.dispatch({ effects: slot.reconfigure(extension) });
   }
+  async function setLanguage(language) {
+    const request = ++languageRequestId;
+    const next = await resolveLanguage(language);
+    if (request !== languageRequestId) return;
+    try {
+      reconfigure(languageSlot, next ? [next] : []);
+    } catch (error) {
+      console.warn(`[CkCodeEditor] Could not apply "${language}":`, error);
+    }
+  }
+  setLanguage(options.language).catch(() => void 0);
   return {
     view,
     getCode: () => readDoc(view.state),
@@ -158,12 +170,7 @@ async function createCodeMirror(options) {
         selection: { anchor: cursor }
       });
     },
-    setLanguage: async (language) => {
-      const request = ++languageRequestId;
-      const next = await resolveLanguage(language);
-      if (request !== languageRequestId) return;
-      reconfigure(languageSlot, next ? [next] : []);
-    },
+    setLanguage,
     setReadonly: (readonly) => {
       reconfigure(readonlySlot, readonlyState(readonly));
     },
@@ -177,7 +184,10 @@ async function createCodeMirror(options) {
       reconfigure(badgeSlot, rule ? badgeExtension(rule) : []);
     },
     focus: () => view.focus(),
-    destroy: () => view.destroy()
+    destroy: () => {
+      destroyed = true;
+      view.destroy();
+    }
   };
 }
 export {

package/dist/index.d.ts

@@ -6,8 +6,8 @@ export { useChat, useConversationSessions, useConversations, } from './composabl
 export type { ChatActions, ChatState, ConversationSession, CreateConversationInput, MessageHandler, MutationOptions, UseChatReturn, UseConversationSessionsReturn, UseConversationsOptions, UseConversationsReturn, } from './composables';
 export { SdkError, createDocumentUploadProvider, defaultDocumentUploadConfig, defaultEndpoints, useDocumentUploadWithDefaultConfig, } from './composables/fileUpload';
 export type { DocumentUploadConfig, DocumentUploadProvider, FileEntry, FileStatus, } from './composables/fileUpload';
-export { CkAgentMessage, CkAgentMessageHeader, CkHeaderActivityButton, CkCitation, CkCitationLabel, CkCitationCard, CkConversation, CkConversationLayout, CkCopyMessageButton, CkDropZoneOverlay, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistory, CkHistoryItem, CkHistoryWrapper, CkMarkdownRenderer, CkMessageButton, CkModelSelector, CkPromptSendButton, CkPromptMenuButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkRegenerateMessageButton, CkSendIcon, CkStopIcon, CkUserMessage, CkEditableUserMessage, CkMilkdownEditor, CkCodeEditor, } from './components';
-export type { CkAgentMessageHeaderProps, CkHeaderActivityButtonProps, CkHeaderActivityButtonEmits, CkCitationProps, CkCitationEmits, CkCitationSource, CkCitationLabelProps, CkCitationCardProps, CkCitationCardEmits, CkConversationLayoutProps, CkConversationProps, CkDropZoneOverlayProps, CkDropZoneOverlayEmits, CkDropZoneRejection, CkDropZoneRejectionReason, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryEmits, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkMarkdownRendererEmits, CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, CkPromptMenuButtonProps, CkUserMessageProps, CkEditableUserMessageProps, CkEditableUserMessageEmits, CkMilkdownEditorEmits, CkMilkdownEditorExposed, CkMilkdownEditorProps, CkCodeEditorEmits, CkCodeEditorExposed, CkCodeEditorProps, } from './components';
+export { CkAgentMessage, CkAgentMessageHeader, CkHeaderActivityButton, CkCitation, CkCitationLabel, CkCitationCard, CkConversation, CkConversationLayout, CkCopyMessageButton, CkDropZoneOverlay, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistory, CkHistoryItem, CkHistoryWrapper, CkMarkdownRenderer, CkMessageButton, CkModelSelector, CkPromptSendButton, CkPromptMenuButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkRegenerateMessageButton, CkSendIcon, CkStopIcon, CkUserMessage, CkEditableUserMessage, CkMilkdownEditor, CkCodeEditor, preloadCkCodeEditor, } from './components';
+export type { CkAgentMessageHeaderProps, CkHeaderActivityButtonProps, CkHeaderActivityButtonEmits, CkCitationProps, CkCitationEmits, CkCitationSource, CkCitationLabelProps, CkCitationCardProps, CkCitationCardEmits, CkConversationLayoutProps, CkConversationProps, CkDropZoneOverlayProps, CkDropZoneOverlayEmits, CkDropZoneRejection, CkDropZoneRejectionReason, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryEmits, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkMarkdownRendererEmits, CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, CkPromptMenuButtonProps, CkUserMessageProps, CkEditableUserMessageProps, CkEditableUserMessageEmits, CkMilkdownEditorEmits, CkMilkdownEditorExposed, CkMilkdownEditorProps, CkCodeEditorEmits, CkCodeEditorExposed, CkCodeEditorFadeSurface, CkCodeEditorProps, } from './components';
 export { formatRelativeTime, markdownToPlainText } from './helpers';
 export type { ActiveComparison, BaseMessage, ComparisonLane, Conversation, ConversationTree, MessageContent, MessageContentStatus, MessageMetadata, MessageReasoningContent, MessageRole, MessageStatus, MessageTextContent, MessageToolContent, TreeMessage, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AASpB,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,aAAa,EACb,6BAA6B,EAC7B,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,2BAA2B,EAC3B,gBAAgB,EAChB,kCAAkC,GACnC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,UAAU,GACX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,GACb,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,yBAAyB,EACzB,2BAA2B,EAC3B,2BAA2B,EAC3B,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,EAClB,0BAA0B,EAC1B,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGpE,YAAY,EACV,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,GACZ,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AASpB,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,aAAa,EACb,6BAA6B,EAC7B,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,2BAA2B,EAC3B,gBAAgB,EAChB,kCAAkC,GACnC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,UAAU,GACX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,yBAAyB,EACzB,2BAA2B,EAC3B,2BAA2B,EAC3B,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,EAClB,0BAA0B,EAC1B,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGpE,YAAY,EACV,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,GACZ,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-Bkzrdgfj.js";
 import { C, d, p, u as u2, b } from "./useChatKitLabels-DxW0N5U-.js";
 import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-D0DQjdsq.js";
-import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B, D, E } from "./CkHistory.vue_vue_type_script_setup_true_lang-BvRIp3m6.js";
+import { _, a as a2, b as b3, c as c2, C as C2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v, w, x, y, z, A, B, D, F, E } from "./CkHistory.vue_vue_type_script_setup_true_lang-Bv3FuKT4.js";
 import { m as m2 } from "./markdownToPlainText-DN_G-I6g.js";
 export {
   C as CHAT_KIT_LABELS,
@@ -41,8 +41,9 @@ export {
   d as defaultChatKitLabels,
   d2 as defaultDocumentUploadConfig,
   f as defaultEndpoints,
-  E as formatRelativeTime,
+  F as formatRelativeTime,
   m2 as markdownToPlainText,
+  E as preloadCkCodeEditor,
   p as provideChatKitLabels,
   u3 as useChat,
   u2 as useChatKitLabels,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "6.4.1",
+  "version": "6.4.3",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -115,8 +115,8 @@
     "vue": "^3.5.27",
     "vue-tsc": "^3.2.4",
     "wait-on": "9.0.3",
-    "@aleph-alpha/eslint-config-frontend": "0.7.1",
     "@aleph-alpha/prettier-config-frontend": "2.1.1",
+    "@aleph-alpha/eslint-config-frontend": "0.7.1",
     "@aleph-alpha/tsconfig-frontend": "0.7.3"
   },
   "scripts": {

package/src/components/base/CkCodeEditor/CkCodeEditor.spec.ts

@@ -1,8 +1,17 @@
 import { render, screen, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
+import type { MockInstance } from 'vitest';
 import CkCodeEditor from './CkCodeEditor.vue';
 import { detectLineSeparator, resolveLanguage } from './createCodeMirror';
 import { matchBadgeRanges } from './badgeDecoration';
+import { loadCodeMirror } from './loadCodeMirror';
+
+// Wrapped so a test can make the lazy chunk fail; every other test gets the
+// real module.
+vi.mock('./loadCodeMirror', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./loadCodeMirror')>();
+  return { ...actual, loadCodeMirror: vi.fn(actual.loadCodeMirror) };
+});
 
 // CodeMirror measures its own layout on construction; jsdom has none of the
 // geometry APIs it calls. The stubs stay in this spec rather than the global
@@ -273,6 +282,34 @@ describe('CkCodeEditor', () => {
     ).toBe('0px');
   });
 
+  it('fades into the design surfaces by default', async () => {
+    const { container } = await renderEditor({ modelValue: 'a\nb' });
+
+    const mask = container.querySelector('.ui-fade-mask') as HTMLElement;
+    expect(mask.style.getPropertyValue('--ck-code-fade-top')).toBe(
+      'var(--background-surface-secondary)',
+    );
+    expect(mask.style.getPropertyValue('--ck-code-fade-bottom')).toBe(
+      'var(--background-surface-floating)',
+    );
+  });
+
+  it('fades each edge into the surface its prop names', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'a\nb',
+      fadeTopBackground: 'modal',
+      fadeBottomBackground: 'primary',
+    });
+
+    const mask = container.querySelector('.ui-fade-mask') as HTMLElement;
+    expect(mask.style.getPropertyValue('--ck-code-fade-top')).toBe(
+      'var(--background-surface-modal)',
+    );
+    expect(mask.style.getPropertyValue('--ck-code-fade-bottom')).toBe(
+      'var(--background-surface-primary)',
+    );
+  });
+
   it('omits the fade mask when `scrollFade` is off', async () => {
     const { container } = await renderEditor({
       modelValue: 'a\nb',
@@ -325,6 +362,68 @@ describe('CkCodeEditor', () => {
     const late = await renderEditor({ modelValue: 'y' });
     expect(() => late.unmount()).not.toThrow();
   });
+
+  describe('when CodeMirror fails to load', () => {
+    let logError: MockInstance;
+
+    beforeEach(() => {
+      vi.mocked(loadCodeMirror).mockRejectedValueOnce(
+        new Error('Failed to fetch dynamically imported module'),
+      );
+      logError = vi
+        .spyOn(globalThis.console, 'error')
+        .mockImplementation(() => undefined);
+    });
+
+    afterEach(() => {
+      logError.mockRestore();
+    });
+
+    async function renderFallback(
+      props: InstanceType<typeof CkCodeEditor>['$props'] = {},
+    ) {
+      const utils = render(CkCodeEditor, { props });
+      const textarea = await waitFor(() => {
+        const found = utils.container.querySelector(
+          '.ck-code-editor--fallback textarea',
+        );
+        expect(found).toBeInTheDocument();
+        return found as HTMLTextAreaElement;
+      });
+      return { ...utils, textarea };
+    }
+
+    it('falls back to a textarea with the value, placeholder and label', async () => {
+      const { textarea } = await renderFallback({
+        modelValue: 'body',
+        placeholder: 'Write the skill',
+        ariaLabel: 'Skill body',
+      });
+
+      expect(textarea.value).toBe('body');
+      expect(textarea.placeholder).toBe('Write the skill');
+      expect(textarea.getAttribute('aria-label')).toBe('Skill body');
+      expect(logError).toHaveBeenCalled();
+    });
+
+    it('keeps v-model working through the textarea', async () => {
+      const { textarea, emitted } = await renderFallback({ modelValue: '' });
+
+      await userEvent.type(textarea, 'hi');
+
+      const updates = emitted()['update:modelValue'] as string[][];
+      expect(updates.at(-1)?.[0]).toBe('hi');
+    });
+
+    it('locks the textarea when readonly', async () => {
+      const { textarea } = await renderFallback({
+        modelValue: 'x',
+        readonly: true,
+      });
+
+      expect(textarea.readOnly).toBe(true);
+    });
+  });
 });
 
 describe('resolveLanguage', () => {

package/src/components/base/CkCodeEditor/CkCodeEditor.stories.ts

@@ -58,6 +58,16 @@ const meta: Meta<typeof CkCodeEditor> = {
     lineWrapping: { control: 'boolean' },
     autofocus: { control: 'boolean' },
     scrollFade: { control: 'boolean' },
+    fadeTopBackground: {
+      control: 'inline-radio',
+      options: ['primary', 'secondary', 'floating', 'modal'],
+      description: 'Surface the top scroll fade dissolves into.',
+    },
+    fadeBottomBackground: {
+      control: 'inline-radio',
+      options: ['primary', 'secondary', 'floating', 'modal'],
+      description: 'Surface the bottom scroll fade dissolves into.',
+    },
     // A regex plus a callback cannot be typed into a control, so the rule is
     // offered as named presets instead. Without this, badges could only be seen
     // on the one story that hard-codes a rule.

package/src/components/base/CkCodeEditor/CkCodeEditor.vue

@@ -11,6 +11,7 @@ import {
 import { UiButton, UiFadeMask, UiIcon } from '@aleph-alpha/ui-library';
 import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { CodeMirrorHandle } from './createCodeMirror';
+import { loadCodeMirror } from './loadCodeMirror';
 import type { CkCodeEditorEmits, CkCodeEditorProps } from './types';
 
 defineOptions({ name: 'CkCodeEditor' });
@@ -30,6 +31,8 @@ const props = withDefaults(defineProps<CkCodeEditorProps>(), {
   maxHeight: undefined,
   autofocus: false,
   scrollFade: true,
+  fadeTopBackground: 'secondary',
+  fadeBottomBackground: 'floating',
   badge: undefined,
   writeToClipboard: undefined,
 });
@@ -39,8 +42,12 @@ const emit = defineEmits<CkCodeEditorEmits>();
 const labels = useChatKitLabels();
 const rootRef = useTemplateRef<HTMLDivElement>('rootRef');
 const hostRef = useTemplateRef<HTMLDivElement>('hostRef');
+const fallbackRef = useTemplateRef<HTMLTextAreaElement>('fallbackRef');
 const isLocked = computed(() => props.readonly || props.disabled);
 const isReady = ref(false);
+// CodeMirror could not be loaded or built; a plain textarea stands in so the
+// field can still be typed into.
+const isFallback = ref(false);
 const isCopied = ref(false);
 
 // `UiCodeBlock` labels the block with the filename when there is one and hides
@@ -84,8 +91,11 @@ const fadeProps = computed(() => {
   const down = canScrollDown.value;
   return {
     position: edgeToFade(up, down),
-    background: 'secondary',
-    style: { '--ui-fade-mask-height': up || down ? FADE_HEIGHT : '0px' },
+    style: {
+      '--ui-fade-mask-height': up || down ? FADE_HEIGHT : '0px',
+      '--ck-code-fade-top': `var(--background-surface-${props.fadeTopBackground})`,
+      '--ck-code-fade-bottom': `var(--background-surface-${props.fadeBottomBackground})`,
+    },
   };
 });
 
@@ -125,19 +135,16 @@ function handleChange(value: string): void {
   emit('update:modelValue', value);
 }
 
-onMounted(async () => {
-  const parent = hostRef.value;
-  if (!parent) return;
-
-  // Lazy: CodeMirror and its grammars load only once an editor is shown.
-  const { createCodeMirror } = await import('./createCodeMirror');
+async function mountEditor(parent: HTMLElement): Promise<void> {
+  // Lazy: CodeMirror loads only once an editor is shown. The grammar follows in
+  // the background, so a slow one delays the colours, not the editor.
+  const { createCodeMirror } = await loadCodeMirror();
   if (destroyed) return;
 
-  const initialCode = props.modelValue;
-  lastKnownCode = initialCode;
-  const handle = await createCodeMirror({
+  lastKnownCode = props.modelValue;
+  const handle = createCodeMirror({
     parent,
-    doc: initialCode,
+    doc: props.modelValue,
     language: props.language,
     placeholder: props.placeholder,
     ariaLabel: props.ariaLabel,
@@ -149,20 +156,39 @@ onMounted(async () => {
     onFocus: () => emit('focus'),
   });
 
-  // Unmounted while the grammar was loading.
-  if (destroyed) {
-    handle.destroy();
-    return;
-  }
-
   editor = handle;
-  // Props may have moved on while the grammar loaded; catch up.
-  if (props.modelValue !== initialCode) handle.setCode(props.modelValue);
   watchScrolling(handle.view.scrollDOM, handle.view.contentDOM);
   isReady.value = true;
   if (props.autofocus) handle.focus();
+}
+
+onMounted(async () => {
+  const parent = hostRef.value;
+  if (!parent) return;
+
+  try {
+    await mountEditor(parent);
+  } catch (error) {
+    // A stale or unreachable chunk, or a CodeMirror setup error such as
+    // duplicate `@codemirror/state` copies. Left alone, the header would sit
+    // over an empty body with no way to type.
+    // eslint-disable-next-line no-console
+    console.error('[CkCodeEditor] Falling back to a plain textarea:', error);
+    if (destroyed) return;
+    editor?.destroy();
+    editor = undefined;
+    isFallback.value = true;
+    if (props.autofocus) {
+      await nextTick();
+      fallbackRef.value?.focus();
+    }
+  }
 });
 
+function onFallbackInput(event: Event): void {
+  handleChange((event.target as HTMLTextAreaElement).value);
+}
+
 watch(
   () => props.modelValue,
   (next) => {
@@ -234,7 +260,8 @@ function onFocusOut(event: FocusEvent): void {
 }
 
 function focus(): void {
-  editor?.focus();
+  if (editor) editor.focus();
+  else fallbackRef.value?.focus();
 }
 
 function getCode(): string {
@@ -250,6 +277,7 @@ defineExpose({ focus, getCode });
     :class="[
       'ck-code-editor ck-code-surface border-border-surface-default bg-background-input-default min-w-0 overflow-hidden rounded-xl border',
       isReady && 'ck-code-editor--ready',
+      isFallback && 'ck-code-editor--fallback',
       isLocked && 'ck-code-editor--readonly',
       disabled && 'ck-code-editor--disabled',
     ]"
@@ -283,7 +311,22 @@ defineExpose({ focus, getCode });
         ref="hostRef"
         class="ck-code-editor__host"
         :style="maxHeight ? { '--ck-code-max-height': maxHeight } : undefined"
-      />
+      >
+        <textarea
+          v-if="isFallback"
+          ref="fallbackRef"
+          class="ck-code-editor__fallback"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :aria-label="ariaLabel"
+          :readonly="readonly"
+          :disabled="disabled"
+          :wrap="lineWrapping ? 'soft' : 'off'"
+          spellcheck="false"
+          @input="onFallbackInput"
+          @focus="emit('focus')"
+        />
+      </div>
     </component>
   </div>
 </template>
@@ -296,19 +339,15 @@ defineExpose({ focus, getCode });
  * `theme.ts`, because `CkMilkdownEditor`'s code blocks use that theme too and
  * must keep matching the rendered block. */
 .ck-code-editor {
+  /* `theme.ts` paints the editor from these; transparent lets the root's
+   * input surface show through. */
   --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 :deep(.cm-editor) {
-  background: var(--ck-cm-bg);
-  color: var(--ck-cm-foreground);
-}
-
-/* Same declarations as the `body-14-regular` typography utility. */
+/* `:deep` is needed below because CodeMirror builds its own DOM, which scoped
+ * styles do not reach. Same declarations as the `body-14-regular` typography utility. */
 .ck-code-editor__host :deep(.cm-scroller) {
   max-height: var(--ck-code-max-height, none);
   font-family: Saans, sans-serif;
@@ -343,14 +382,64 @@ defineExpose({ focus, getCode });
   font-weight: 500;
 }
 
+/* A column so the stand-in below grows into a host a consumer has stretched
+ * (as a fixed-height dialog does), rather than sitting at its minimum height
+ * at the top of an empty panel. */
+.ck-code-editor--fallback .ck-code-editor__host {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Stand-in for when CodeMirror fails to load: same text metrics and insets as
+ * the editor without a gutter, so the field reads as the same surface. Where
+ * supported, it grows with its content the way the editor does. */
+.ck-code-editor__fallback {
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 5rem;
+  field-sizing: content;
+  max-height: var(--ck-code-max-height, none);
+  resize: none;
+  border: 0;
+  outline: none;
+  padding: 0.75rem 1.25rem 1rem 1rem;
+  background: var(--ck-cm-bg);
+  color: var(--ck-cm-foreground);
+  font-family: Saans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+.ck-code-editor__fallback::placeholder,
 .ck-code-editor__host :deep(.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 :deep(.cm-activeLine),
-.ck-code-editor--readonly .ck-code-editor__host :deep(.cm-activeLineGutter) {
-  background: transparent;
+/* Each band fades into its own surface (`fadeTopBackground` /
+ * `fadeBottomBackground`), whereas `UiFadeMask`'s `background` sets one for
+ * both and only knows `primary` and `secondary`. The gradient, edges and band
+ * height stay the mask's own. `[data-background]` outranks the mask's
+ * per-surface rule regardless of stylesheet order. */
+.ck-code-editor__body
+  :deep(.ui-fade-mask__band[data-background][data-position='top']) {
+  --ui-fade-mask-surface: var(--ck-code-fade-top);
+  /* The mask turns its top band opaque halfway down on desktop, which left a
+   * solid strip under the header; mirror the bottom band's stops instead. */
+  --ui-fade-mask-stop: 20%;
+}
+
+.ck-code-editor__body
+  :deep(.ui-fade-mask__band[data-background][data-position='bottom']) {
+  --ui-fade-mask-surface: var(--ck-code-fade-bottom);
+}
+
+@media (min-width: 768px) {
+  .ck-code-editor__body
+    :deep(.ui-fade-mask__band[data-background][data-position='top']) {
+    --ui-fade-mask-stop: 100%;
+  }
 }
 
 .ck-code-editor--disabled {

package/src/components/base/CkCodeEditor/createCodeMirror.ts

@@ -151,10 +151,14 @@ function baseExtensions(options: CreateCodeMirrorOptions): Extension[] {
 /**
  * Build a CodeMirror view themed like `UiCodeBlock`. Loaded lazily by
  * `CkCodeEditor` so CodeMirror stays out of the package's main chunk.
+ *
+ * The view is built at once, as plain text, and the grammar is applied when it
+ * arrives: the placeholder, gutter and content must not wait on a network
+ * request that may be slow or never finish. Only the syntax colours do.
  */
-export async function createCodeMirror(
+export function createCodeMirror(
   options: CreateCodeMirrorOptions,
-): Promise<CodeMirrorHandle> {
+): CodeMirrorHandle {
   // One set per view: a compartment is the key a reconfigure targets, so
   // sharing them across editors would make the instances interfere.
   const languageSlot = new Compartment();
@@ -164,9 +168,10 @@ export async function createCodeMirror(
   const badgeSlot = new Compartment();
   const lineSeparatorSlot = new Compartment();
 
-  const support = await resolveLanguage(options.language);
   // Guards against out-of-order grammar loads; see `setLanguage` below.
   let languageRequestId = 0;
+  // A grammar can land after the view is gone; it must not touch it then.
+  let destroyed = false;
 
   const view = new EditorView({
     parent: options.parent,
@@ -174,7 +179,7 @@ export async function createCodeMirror(
       doc: options.doc,
       extensions: [
         ...baseExtensions(options),
-        languageSlot.of(support ? [support] : []),
+        languageSlot.of([]),
         readonlySlot.of(readonlyState(options.readonly)),
         lineNumbersSlot.of(options.showLineNumbers ? lineNumbers() : []),
         wrappingSlot.of(options.lineWrapping ? EditorView.lineWrapping : []),
@@ -187,9 +192,29 @@ export async function createCodeMirror(
   });
 
   function reconfigure(slot: Compartment, extension: Extension): void {
+    if (destroyed) return;
     view.dispatch({ effects: slot.reconfigure(extension) });
   }
 
+  async function setLanguage(language: string): Promise<void> {
+    // Grammars load over the network and out of order, so a slow one must not
+    // land on top of a language chosen after it.
+    const request = ++languageRequestId;
+    const next = await resolveLanguage(language);
+    if (request !== languageRequestId) return;
+    try {
+      reconfigure(languageSlot, next ? [next] : []);
+    } catch (error) {
+      // Typically a grammar built against another `@codemirror/state` copy.
+      // The editor keeps working as plain text; say why the colours are gone.
+      // eslint-disable-next-line no-console
+      console.warn(`[CkCodeEditor] Could not apply "${language}":`, error);
+    }
+  }
+
+  // Nothing waits on this; a failed grammar already resolves to plain text.
+  setLanguage(options.language).catch(() => undefined);
+
   return {
     view,
     getCode: () => readDoc(view.state),
@@ -208,14 +233,7 @@ export async function createCodeMirror(
         selection: { anchor: cursor },
       });
     },
-    setLanguage: async (language) => {
-      // Grammars load over the network and out of order, so a slow one must not
-      // land on top of a language chosen after it.
-      const request = ++languageRequestId;
-      const next = await resolveLanguage(language);
-      if (request !== languageRequestId) return;
-      reconfigure(languageSlot, next ? [next] : []);
-    },
+    setLanguage,
     setReadonly: (readonly) => {
       reconfigure(readonlySlot, readonlyState(readonly));
     },
@@ -229,6 +247,9 @@ export async function createCodeMirror(
       reconfigure(badgeSlot, rule ? badgeExtension(rule) : []);
     },
     focus: () => view.focus(),
-    destroy: () => view.destroy(),
+    destroy: () => {
+      destroyed = true;
+      view.destroy();
+    },
   };
 }

package/src/components/base/CkCodeEditor/index.ts

@@ -1,2 +1,3 @@
 export { default as CkCodeEditor } from './CkCodeEditor.vue';
+export { preloadCkCodeEditor } from './loadCodeMirror';
 export type * from './types';

package/src/components/base/CkCodeEditor/loadCodeMirror.ts

@@ -0,0 +1,28 @@
+import type * as CodeMirrorModule from './createCodeMirror';
+
+let pending: Promise<typeof CodeMirrorModule> | undefined;
+
+/**
+ * Import the CodeMirror chunk once and share the result.
+ *
+ * A failed import is forgotten rather than cached, so the next editor to mount
+ * (or the next `preloadCkCodeEditor` call) tries again instead of inheriting the
+ * failure.
+ */
+export function loadCodeMirror(): Promise<typeof CodeMirrorModule> {
+  pending ??= import('./createCodeMirror').catch((error: unknown) => {
+    pending = undefined;
+    throw error;
+  });
+  return pending;
+}
+
+/**
+ * Start fetching `CkCodeEditor`'s CodeMirror chunk ahead of time, for example
+ * when a view that will open an editor is shown. The editor then appears
+ * without waiting on the network. Safe to call repeatedly; failures are
+ * swallowed here and surface, if still failing, when an editor mounts.
+ */
+export function preloadCkCodeEditor(): void {
+  loadCodeMirror().catch(() => undefined);
+}