@aleph-alpha/chat-kit 6.2.0 → 6.3.0

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

@@ -0,0 +1,188 @@
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from '@codemirror/commands';
+import {
+  bracketMatching,
+  indentOnInput,
+  indentUnit,
+  type LanguageSupport,
+} from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+import { Compartment, EditorState, type Extension } from '@codemirror/state';
+import {
+  EditorView,
+  drawSelection,
+  highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
+  lineNumbers,
+  placeholder as placeholderExt,
+} from '@codemirror/view';
+import { ckCodeMirrorTheme } from '../../../helpers/codemirror/theme';
+import '../../../helpers/codemirror/code-palette.css';
+
+export interface CreateCodeMirrorOptions {
+  /** Element the view is mounted into. */
+  parent: HTMLElement;
+  doc: string;
+  language: string;
+  placeholder?: string;
+  ariaLabel?: string;
+  readonly: boolean;
+  showLineNumbers: boolean;
+  lineWrapping: boolean;
+  /** Called synchronously whenever the document changes. */
+  onChange: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+/** Imperative surface `CkCodeEditor` drives; keeps CodeMirror out of the SFC. */
+export interface CodeMirrorHandle {
+  view: EditorView;
+  getCode: () => string;
+  /** Replace the whole document, keeping the cursor where it still fits. */
+  setCode: (value: string) => void;
+  setLanguage: (language: string) => Promise<void>;
+  setReadonly: (readonly: boolean) => void;
+  setShowLineNumbers: (show: boolean) => void;
+  setLineWrapping: (wrap: boolean) => void;
+  focus: () => void;
+  destroy: () => void;
+}
+
+/** Plain text, and the value `UiCodeBlock` also treats as "no language". */
+const PLAIN_ALIASES = new Set(['text', 'txt', 'plain', 'plaintext', '']);
+
+/**
+ * Resolve a language id the way a reader would expect: by name, by alias, or by
+ * file extension, all case-insensitively. Returns `null` for plain text and for
+ * anything CodeMirror does not know, so an unrecognised id degrades to
+ * unhighlighted code instead of throwing.
+ */
+export async function resolveLanguage(
+  language: string,
+): Promise<LanguageSupport | null> {
+  const id = language.trim().toLowerCase();
+  if (PLAIN_ALIASES.has(id)) return null;
+
+  const description = languages.find(
+    (candidate) =>
+      candidate.name.toLowerCase() === id ||
+      candidate.alias.includes(id) ||
+      candidate.extensions.includes(id),
+  );
+  if (!description) return null;
+
+  try {
+    return await description.load();
+  } catch {
+    // A grammar that fails to load must not take the editor down with it.
+    return null;
+  }
+}
+
+// `readOnly` rejects edits while keeping the text selectable; `editable`
+// additionally drops `contenteditable`, which hides the caret and keeps the
+// editor out of the tab order.
+function readonlyState(readonly: boolean): Extension {
+  return [EditorState.readOnly.of(readonly), EditorView.editable.of(!readonly)];
+}
+
+function baseExtensions(options: CreateCodeMirrorOptions): Extension[] {
+  return [
+    // Deliberately not CodeMirror's `basicSetup`: it also brings autocomplete,
+    // search, folding and bracket closing, none of which suit a snippet field,
+    // and its fold gutter would sit next to the line numbers.
+    history(),
+    drawSelection(),
+    highlightSpecialChars(),
+    highlightActiveLine(),
+    bracketMatching(),
+    indentOnInput(),
+    indentUnit.of('  '),
+    keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+    ckCodeMirrorTheme,
+    EditorView.contentAttributes.of({
+      role: 'textbox',
+      'aria-multiline': 'true',
+      ...(options.ariaLabel ? { 'aria-label': options.ariaLabel } : {}),
+    }),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) options.onChange(update.state.doc.toString());
+      if (update.focusChanged) {
+        if (update.view.hasFocus) options.onFocus();
+        else options.onBlur();
+      }
+    }),
+    ...(options.placeholder ? [placeholderExt(options.placeholder)] : []),
+  ];
+}
+
+/**
+ * Build a CodeMirror view themed like `UiCodeBlock`. Loaded lazily by
+ * `CkCodeEditor` so CodeMirror stays out of the package's main chunk.
+ */
+export async function createCodeMirror(
+  options: CreateCodeMirrorOptions,
+): Promise<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();
+  const readonlySlot = new Compartment();
+  const lineNumbersSlot = new Compartment();
+  const wrappingSlot = new Compartment();
+
+  const support = await resolveLanguage(options.language);
+
+  const view = new EditorView({
+    parent: options.parent,
+    state: EditorState.create({
+      doc: options.doc,
+      extensions: [
+        ...baseExtensions(options),
+        languageSlot.of(support ? [support] : []),
+        readonlySlot.of(readonlyState(options.readonly)),
+        lineNumbersSlot.of(options.showLineNumbers ? lineNumbers() : []),
+        wrappingSlot.of(options.lineWrapping ? EditorView.lineWrapping : []),
+      ],
+    }),
+  });
+
+  function reconfigure(slot: Compartment, extension: Extension): void {
+    view.dispatch({ effects: slot.reconfigure(extension) });
+  }
+
+  return {
+    view,
+    getCode: () => view.state.doc.toString(),
+    setCode: (value) => {
+      if (value === view.state.doc.toString()) return;
+      // Replacing the whole document would otherwise send the cursor home
+      // whenever a parent echoes the value back; clamp it to the new length.
+      const cursor = Math.min(view.state.selection.main.head, value.length);
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: value },
+        selection: { anchor: cursor },
+      });
+    },
+    setLanguage: async (language) => {
+      const next = await resolveLanguage(language);
+      reconfigure(languageSlot, next ? [next] : []);
+    },
+    setReadonly: (readonly) => {
+      reconfigure(readonlySlot, readonlyState(readonly));
+    },
+    setShowLineNumbers: (show) => {
+      reconfigure(lineNumbersSlot, show ? lineNumbers() : []);
+    },
+    setLineWrapping: (wrap) => {
+      reconfigure(wrappingSlot, wrap ? EditorView.lineWrapping : []);
+    },
+    focus: () => view.focus(),
+    destroy: () => view.destroy(),
+  };
+}

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

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

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

@@ -0,0 +1,128 @@
+/**
+ * Single-document code editor built on [CodeMirror 6](https://codemirror.net/).
+ * Its surface is the one `UiCodeBlock` renders for fenced code inside
+ * {@link CkMarkdownRenderer}: the same bordered, rounded panel, the same muted
+ * header carrying the language and a copy button, the same monospace metrics,
+ * and syntax colours approximating Shiki's `github-light` / `github-dark`. A
+ * snippet therefore looks the same whether it is being read in a reply or
+ * edited here.
+ *
+ * Use it wherever a whole document *is* code — a snippet field, a config or
+ * template editor, a "create skill" form. For prose that merely contains code,
+ * use {@link CkMilkdownEditor}, whose fenced blocks share this same theme.
+ *
+ * Grammars load on demand from CodeMirror's language data, so only the
+ * languages actually opened are fetched, and the editor itself loads lazily on
+ * mount so importing the component costs nothing until one is shown.
+ *
+ * @category Form Inputs
+ * @useCases edit a code snippet, config or template editor, code field in a form, review and tweak generated code
+ * @keywords code, editor, codemirror, syntax highlighting, snippet, v-model, monospace, language
+ * @related CkMilkdownEditor, CkMarkdownRenderer
+ */
+export interface CkCodeEditorProps {
+  /**
+   * The code. Supports `v-model`.
+   *
+   * Unlike {@link CkMilkdownEditor}, updates are emitted synchronously on every
+   * change, with no debounce and no reformatting of what you pass in.
+   *
+   * @default ''
+   */
+  modelValue?: string;
+  /**
+   * Language id used for both syntax highlighting and the header label, for
+   * example `typescript`, `python`, `json` or `bash`. Matching is on the names,
+   * aliases and extensions CodeMirror knows; an unknown value still renders as
+   * plain text rather than failing.
+   *
+   * @default 'text'
+   */
+  language?: string;
+  /**
+   * Filename shown in the header instead of the language, mirroring the prop of
+   * the same name on `UiCodeBlock`.
+   */
+  filename?: string;
+  /** Text shown while the document is empty. */
+  placeholder?: string;
+  /**
+   * Render the code without allowing edits. The caret and the active-line
+   * highlight are hidden, but the text stays selectable and copyable.
+   *
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Like `readonly`, but also mutes the editor and marks it `aria-disabled`.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /** Accessible name for the editable region. */
+  ariaLabel?: string;
+  /**
+   * Show the header bar with the language or filename and the copy button. Set
+   * it to `false` for a bare editing surface.
+   *
+   * @default true
+   */
+  showHeader?: boolean;
+  /**
+   * Show the copy button in the header.
+   *
+   * @default true
+   */
+  showCopyButton?: boolean;
+  /**
+   * Show the line-number gutter. On by default, which is what a dedicated code
+   * editor is expected to do; `UiCodeBlock` and `CkMilkdownEditor` default to
+   * `false` because their code is being read rather than written.
+   *
+   * @default true
+   */
+  showLineNumbers?: boolean;
+  /**
+   * Wrap long lines instead of scrolling horizontally. `UiCodeBlock` scrolls,
+   * so the default keeps the two consistent.
+   *
+   * @default false
+   */
+  lineWrapping?: boolean;
+  /**
+   * Maximum height of the scrollable code area, as any CSS length, for example
+   * `'24rem'`. Unset, the editor grows with its content.
+   */
+  maxHeight?: string;
+  /**
+   * Move focus into the editor once it has been created.
+   *
+   * @default false
+   */
+  autofocus?: boolean;
+  /**
+   * Clipboard writer for the copy button. Injected for tests and for hosts that
+   * proxy clipboard access; defaults to `navigator.clipboard.writeText`.
+   */
+  writeToClipboard?: (text: string) => Promise<void>;
+}
+
+/** Events emitted by {@link CkCodeEditor}. */
+export interface CkCodeEditorEmits {
+  /** Emitted on every document change, with the full code. */
+  'update:modelValue': [value: string];
+  /** Emitted when the editing area gains focus. */
+  focus: [];
+  /** Emitted when focus leaves the editor entirely, header included. */
+  blur: [];
+  /** Emitted after the copy button runs, whether or not the write succeeded. */
+  copy: [payload: { success: boolean }];
+}
+
+/** Methods exposed by {@link CkCodeEditor} through a template ref. */
+export interface CkCodeEditorExposed {
+  /** Focus the editing area. No-op until the editor has been created. */
+  focus: () => void;
+  /** Read the current document synchronously. */
+  getCode: () => string;
+}

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

@@ -142,6 +142,19 @@ describe('CkMilkdownEditor', () => {
     ).toBe('false');
   });
 
+  it('toggles the line-number gutter with `showLineNumbers`', async () => {
+    const { container, rerender } = await renderEditor({
+      modelValue: 'Hello',
+      showLineNumbers: true,
+    });
+
+    const root = () => container.querySelector('.ck-milkdown');
+    expect(root()?.className).toContain('ck-milkdown--line-numbers');
+
+    await rerender({ modelValue: 'Hello', showLineNumbers: false });
+    expect(root()?.className).not.toContain('ck-milkdown--line-numbers');
+  });
+
   it('exposes the editable region as a labelled textbox', async () => {
     const { container } = await renderEditor({
       modelValue: 'Hello',

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

@@ -25,6 +25,7 @@ const meta: Meta<typeof CkMilkdownEditor> = {
     readonly: { control: 'boolean' },
     disabled: { control: 'boolean' },
     autofocus: { control: 'boolean' },
+    showLineNumbers: { control: 'boolean' },
   },
 };
 
@@ -109,6 +110,21 @@ const markdown = '# Read me\\n\\nThis document **cannot** be edited.';
   <CkMilkdownEditor :model-value="markdown" readonly aria-label="Read-only document" />
 </template>`;
 
+const withLineNumbersTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkMilkdownEditor } from '@aleph-alpha/chat-kit';
+
+const markdown = ref('# Notes\\n\\nA fenced block with a gutter.');
+</script>
+
+<template>
+  <CkMilkdownEditor
+    v-model="markdown"
+    show-line-numbers
+    aria-label="Editor with line numbers"
+  />
+</template>`;
+
 const disabledTemplateSource = `<script setup lang="ts">
 import { CkMilkdownEditor } from '@aleph-alpha/chat-kit';
 
@@ -210,6 +226,24 @@ export const Readonly: Story = {
   parameters: { docs: { source: { code: readonlyTemplateSource } } },
 };
 
+/**
+ * `showLineNumbers` reveals the line-number gutter on fenced code blocks. It
+ * matches the prop of the same name on `UiCodeBlock`, so the same flag can keep
+ * the editor and the rendered message consistent.
+ */
+export const WithLineNumbers: Story = {
+  render: (args) => ({
+    components: { CkMilkdownEditor },
+    setup() {
+      const markdown = ref(args.modelValue ?? '');
+      return { args, markdown };
+    },
+    template: `<CkMilkdownEditor v-bind="args" v-model="markdown" aria-label="Editor with line numbers" />`,
+  }),
+  args: { modelValue: richContent, showLineNumbers: true },
+  parameters: { docs: { source: { code: withLineNumbersTemplateSource } } },
+};
+
 /**
  * `disabled` also mutes the content and blocks pointer interaction, and sets
  * `aria-disabled` on the root.

package/src/components/base/CkMilkdownEditor/CkMilkdownEditor.vue

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<CkMilkdownEditorProps>(), {
   ariaLabel: undefined,
   classes: () => ({}),
   autofocus: false,
+  showLineNumbers: false,
 });
 
 const emit = defineEmits<CkMilkdownEditorEmits>();
@@ -132,9 +133,10 @@ defineExpose({ focus, getMarkdown });
   <div
     ref="rootRef"
     :class="[
-      'ck-milkdown min-w-0 break-words',
+      'ck-milkdown ck-code-surface min-w-0 break-words',
       isReady && 'ck-milkdown--ready',
       disabled && 'ck-milkdown--disabled',
+      showLineNumbers && 'ck-milkdown--line-numbers',
     ]"
     :aria-disabled="disabled || undefined"
     @focusin="onFocusIn"

package/src/components/base/CkMilkdownEditor/createCrepeEditor.ts

@@ -6,7 +6,7 @@ import {
   type ChatKitLabels,
 } from '../../../handlers/useChatKitLabels';
 import type { CkMarkdownElementClasses } from '../CkMarkdownRenderer';
-import { ckCodeMirrorTheme } from './codeMirrorTheme';
+import { ckCodeMirrorTheme } from '../../../helpers/codemirror/theme';
 import { crepeIcons } from './crepeIcons';
 import { applyMarkdownClasses } from './markdownClassAttrs';
 
@@ -24,6 +24,7 @@ import '@milkdown/crepe/theme/common/list-item.css';
 import '@milkdown/crepe/theme/common/link-tooltip.css';
 import '@milkdown/crepe/theme/common/toolbar.css';
 import '@milkdown/crepe/theme/common/code-mirror.css';
+import '../../../helpers/codemirror/code-palette.css';
 import './milkdown-theme.css';
 
 export interface CreateCrepeEditorOptions {

package/src/components/base/CkMilkdownEditor/milkdown-theme.css

@@ -49,36 +49,12 @@
   --crepe-shadow-1: var(--shadow-md);
   --crepe-shadow-2: var(--shadow-lg);
 
-  /* CodeMirror palette ≈ Shiki `github-light` (what UiCodeBlock renders). */
-  --ck-cm-bg: #ffffff;
-  --ck-cm-foreground: #24292f;
-  --ck-cm-keyword: #cf222e;
-  --ck-cm-string: #0a3069;
-  --ck-cm-comment: #6e7781;
-  --ck-cm-function: #8250df;
-  --ck-cm-constant: #0550ae;
-  /* UiCodeBlock rewrites Shiki's orange entity colour to the primary text token. */
-  --ck-cm-entity: oklch(var(--content-on-surface-primary));
-  --ck-cm-tag: #116329;
-  --ck-cm-error: #82071e;
-  --ck-cm-selection: oklch(var(--background-accent-soft));
+  /* The `--ck-cm-*` syntax palette comes from the shared `code-palette.css`
+   * via the `ck-code-surface` class on this same root. */
 
   position: relative;
 }
 
-/* CodeMirror palette ≈ Shiki `github-dark`. */
-html.dark .ck-milkdown {
-  --ck-cm-bg: #24292e;
-  --ck-cm-foreground: #c9d1d9;
-  --ck-cm-keyword: #ff7b72;
-  --ck-cm-string: #a5d6ff;
-  --ck-cm-comment: #8b949e;
-  --ck-cm-function: #d2a8ff;
-  --ck-cm-constant: #79c0ff;
-  --ck-cm-tag: #7ee787;
-  --ck-cm-error: #ffa198;
-}
-
 /* ------------------------------------------------------------------------ */
 /* Minimal reset (replaces Crepe's reset.css)                                */
 /* ------------------------------------------------------------------------ */
@@ -407,10 +383,47 @@ html.dark .ck-milkdown {
   color: var(--ck-cm-foreground);
 }
 
+/* Line-number gutter. CodeMirror's `basicSetup` (which Crepe always loads)
+ * always renders it, so `showLineNumbers` only toggles this class — no
+ * reconfiguration, and the change applies to code blocks already on screen.
+ * Hidden by default to match `UiCodeBlock`, whose `showLineNumbers` is also
+ * false by default, so a document reads the same in the editor and in
+ * `CkMarkdownRenderer`. */
 .ck-milkdown .milkdown .milkdown-code-block .cm-gutters {
   display: none;
 }
 
+.ck-milkdown--line-numbers .milkdown .milkdown-code-block .cm-gutters {
+  display: flex;
+}
+
+/* `basicSetup` also installs a code-folding gutter. Its chevrons are noise in
+ * a prose editor and have no counterpart in `UiCodeBlock`, so only the numbers
+ * are ever shown. `!important` is required because CodeMirror's own base theme
+ * declares `.cm-gutter { display: flex !important }`, which no amount of
+ * specificity can outrank. Crepe always passes `basicSetup`, so the extension
+ * cannot simply be left out. */
+.ck-milkdown .milkdown .milkdown-code-block .cm-foldGutter {
+  display: none !important;
+}
+
+.ck-milkdown--line-numbers
+  .milkdown
+  .milkdown-code-block
+  .cm-lineNumbers
+  .cm-gutterElement {
+  min-width: 2.25rem;
+  padding: 0 0.75rem 0 1rem;
+  color: oklch(var(--content-on-surface-muted));
+  text-align: right;
+}
+
+/* The gutter supplies the left inset once it is visible, so the code itself
+ * should not pay for it twice. */
+.ck-milkdown--line-numbers .milkdown .milkdown-code-block .cm-content {
+  padding-left: 0;
+}
+
 /* Shown while the CodeMirror instance is still mounting. */
 .ck-milkdown .milkdown .milkdown-code-block .milkdown-code-block-placeholder {
   margin: 0;

package/src/components/base/CkMilkdownEditor/types.ts

@@ -71,6 +71,14 @@ export interface CkMilkdownEditorProps {
    * @default false
    */
   autofocus?: boolean;
+  /**
+   * Show a line-number gutter on fenced code blocks. Matches the prop of the
+   * same name on `UiCodeBlock`, so one flag can drive the editor and the
+   * rendered message alike. Applies to code blocks already on screen.
+   *
+   * @default false
+   */
+  showLineNumbers?: boolean;
 }
 
 /** Events emitted by {@link CkMilkdownEditor}. */

package/src/components/base/index.ts

@@ -86,3 +86,9 @@ export type {
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
 } from './CkMilkdownEditor';
+export { CkCodeEditor } from './CkCodeEditor';
+export type {
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
+} from './CkCodeEditor';

package/src/components/index.ts

@@ -28,6 +28,7 @@ export {
   CkUserMessage,
   CkEditableUserMessage,
   CkMilkdownEditor,
+  CkCodeEditor,
 } from './base';
 export type {
   CkAgentMessageHeaderProps,
@@ -70,6 +71,9 @@ export type {
   CkMilkdownEditorEmits,
   CkMilkdownEditorExposed,
   CkMilkdownEditorProps,
+  CkCodeEditorEmits,
+  CkCodeEditorExposed,
+  CkCodeEditorProps,
 } from './base';
 
 // Composed (pattern) components

package/src/handlers/useChatKitLabels.ts

@@ -111,6 +111,10 @@ export type ChatKitLabels = {
    * set and more conversations exist than the limit.
    */
   historyShowAll?: string;
+  /** Accessible name of the copy button in the `CkCodeEditor` header. */
+  codeEditorCopy?: string;
+  /** Accessible name of the `CkCodeEditor` copy button just after a copy. */
+  codeEditorCopied?: string;
   /** Accessible name of the "Bold" button in the `CkMilkdownEditor` toolbar. */
   markdownEditorBold?: string;
   /** Accessible name of the "Italic" button in the `CkMilkdownEditor` toolbar. */
@@ -168,6 +172,8 @@ export const defaultChatKitLabels = {
   historyItemEditAction: 'Edit',
   historyItemDeleteAction: 'Delete',
   historyShowAll: 'Show all',
+  codeEditorCopy: 'Copy code',
+  codeEditorCopied: 'Copied',
   markdownEditorBold: 'Bold',
   markdownEditorItalic: 'Italic',
   markdownEditorStrikethrough: 'Strikethrough',

package/src/helpers/codemirror/code-palette.css

@@ -0,0 +1,49 @@
+/*
+ * Syntax palette shared by every CodeMirror surface in chat-kit — the code
+ * blocks inside `CkMilkdownEditor` and the standalone `CkCodeEditor`.
+ *
+ * The values are Shiki's `github-light` and `github-dark`, which is what
+ * `UiCodeBlock` renders inside `CkMarkdownRenderer`, read off a rendered block
+ * rather than copied from memory. A snippet therefore keeps its colours whether
+ * it is being read or edited. `theme.ts` maps CodeMirror's syntax tags onto
+ * these variables; nothing else should hardcode a code colour.
+ *
+ * Apply `.ck-code-surface` to the root of any component hosting a CodeMirror
+ * instance. The dark values follow `html.dark`, matching how `UiCodeBlock`
+ * switches its own Shiki theme.
+ *
+ * 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.
+ */
+
+.ck-code-surface {
+  --ck-cm-bg: #ffffff;
+  --ck-cm-foreground: #24292e;
+  --ck-cm-keyword: #d73a49;
+  --ck-cm-string: #032f62;
+  --ck-cm-comment: #6a737d;
+  /* Declared functions, classes and interfaces. */
+  --ck-cm-function: #6f42c1;
+  /* Built-in types, literals and plain variables. */
+  --ck-cm-constant: #005cc5;
+  /* `UiCodeBlock` rewrites Shiki's orange (#e36209 / #ffab70) to the primary
+   * text token, which is what declared property names end up as. */
+  --ck-cm-property: oklch(var(--content-on-surface-primary));
+  --ck-cm-tag: #22863a;
+  --ck-cm-error: #b31d28;
+  --ck-cm-selection: oklch(var(--background-accent-soft));
+}
+
+html.dark .ck-code-surface {
+  --ck-cm-bg: #24292e;
+  --ck-cm-foreground: #e1e4e8;
+  --ck-cm-keyword: #f97583;
+  --ck-cm-string: #9ecbff;
+  --ck-cm-comment: #6a737d;
+  --ck-cm-function: #b392f0;
+  --ck-cm-constant: #79b8ff;
+  --ck-cm-tag: #85e89d;
+  --ck-cm-error: #fdaeb7;
+}