@aleph-alpha/chat-kit 6.3.0 → 6.4.1

package/dist/{index-Cxs6kPho.js → index-DqUiBDRo.js}

@@ -1,6 +1,6 @@
-import { L as LRParser, E as ExternalTokenizer, C as ContextTracker } from "./index-CN8d3yl1.js";
-import { u as styleTags, v as tags, q as LanguageSupport, L as LRLanguage, t as foldNodeProp, A as foldInside, r as indentNodeProp, s as continuedIndent } from "./code-palette-DAJUTnR-.js";
-import { defineCSSCompletionSource } from "./index-BhvbqYsK.js";
+import { L as LRParser, E as ExternalTokenizer, C as ContextTracker } from "./index-2YPxXIaf.js";
+import { s as styleTags, t as tags, a as LanguageSupport, L as LRLanguage, f as foldNodeProp, g as foldInside, i as indentNodeProp, c as continuedIndent } from "./code-palette-BWrZDi47.js";
+import { defineCSSCompletionSource } from "./index-CefLTKmi.js";
 const indent = 168, dedent = 169, descendantOp = 170, InterpolationEnd = 1, InterpolationContinue = 2, Unit = 3, callee = 171, identifier = 172, VariableName = 4, queryIdentifier = 173, InterpolationStart = 5, newline = 174, blankLineStart = 175, eof = 176, whitespace = 177, LineComment = 6, Comment = 7, IndentedMixin = 8, IndentedInclude = 9, Dialect_indented = 0;
 const space = [
   9,

package/dist/{index-DhwsowEf.js → index-GDUM7K5V.js}

@@ -1,5 +1,5 @@
-import { L as LRParser, E as ExternalTokenizer } from "./index-CN8d3yl1.js";
-import { u as styleTags, v as tags, q as LanguageSupport, L as LRLanguage, r as indentNodeProp, s as continuedIndent, t as foldNodeProp, A as foldInside } from "./code-palette-DAJUTnR-.js";
+import { L as LRParser, E as ExternalTokenizer } from "./index-2YPxXIaf.js";
+import { s as styleTags, t as tags, a as LanguageSupport, L as LRLanguage, i as indentNodeProp, c as continuedIndent, f as foldNodeProp, g as foldInside } from "./code-palette-BWrZDi47.js";
 const closureParamDelim = 1, tpOpen = 2, tpClose = 3, RawString = 4, Float = 5;
 const _b = 98, _e = 101, _f = 102, _r = 114, _E = 69, Zero = 48, Dot = 46, Plus = 43, Minus = 45, Hash = 35, Quote = 34, Pipe = 124, LessThan = 60, GreaterThan = 62;
 function isNum(ch) {

package/dist/{index-CB6xZVsf.js → index-Hro6EPZS.js}

@@ -1,5 +1,5 @@
-import { L as LRParser } from "./index-CN8d3yl1.js";
-import { u as styleTags, v as tags, q as LanguageSupport, L as LRLanguage, r as indentNodeProp, s as continuedIndent, t as foldNodeProp, A as foldInside } from "./code-palette-DAJUTnR-.js";
+import { L as LRParser } from "./index-2YPxXIaf.js";
+import { s as styleTags, t as tags, a as LanguageSupport, L as LRLanguage, i as indentNodeProp, c as continuedIndent, f as foldNodeProp, g as foldInside } from "./code-palette-BWrZDi47.js";
 const jsonHighlighting = styleTags({
   String: tags.string,
   Number: tags.number,

package/dist/{index-D6ftdiLa.js → index-KgumaL1c.js}

@@ -1,4 +1,4 @@
-import { w as syntaxTree, T as Transaction, B as Text, S as StateEffect, D as codePointAt, x as EditorSelection, j as indentUnit, F as Annotation, G as Decoration, H as StateField, E as EditorView, P as Prec, k as keymap, I as codePointSize, R as RangeSet, J as showTooltip, V as ViewPlugin, K as logException, M as getTooltip, N as Facet, O as combineConfig, Q as fromCodePoint, U as MapMode, W as WidgetType, X as RangeValue, Y as Direction, Z as CharCategory } from "./code-palette-DAJUTnR-.js";
+import { b as syntaxTree, T as Transaction, h as Text, S as StateEffect, j as codePointAt, d as EditorSelection, k as indentUnit, A as Annotation, D as Decoration, l as StateField, E as EditorView, P as Prec, m as keymap, n as codePointSize, R as RangeSet, o as showTooltip, V as ViewPlugin, q as logException, r as getTooltip, F as Facet, u as combineConfig, v as fromCodePoint, M as MapMode, W as WidgetType, w as RangeValue, x as Direction, C as CharCategory } from "./code-palette-BWrZDi47.js";
 class CompletionContext {
   /**
   Create a new completion context. (Mostly useful for testing

package/dist/{index-CIF93PZF.js → index-TemHfU1M.js}

@@ -1,6 +1,6 @@
-import { q as LanguageSupport, L as LRLanguage, r as indentNodeProp, s as continuedIndent, t as foldNodeProp, A as foldInside, u as styleTags, v as tags } from "./code-palette-DAJUTnR-.js";
-import { defineCSSCompletionSource } from "./index-BhvbqYsK.js";
-import { L as LRParser, E as ExternalTokenizer } from "./index-CN8d3yl1.js";
+import { a as LanguageSupport, L as LRLanguage, i as indentNodeProp, c as continuedIndent, f as foldNodeProp, g as foldInside, s as styleTags, t as tags } from "./code-palette-BWrZDi47.js";
+import { defineCSSCompletionSource } from "./index-CefLTKmi.js";
+import { L as LRParser, E as ExternalTokenizer } from "./index-2YPxXIaf.js";
 const descendantOp = 110, Unit = 1, openArgList = 2;
 const space = [
   9,

package/dist/{index-CYk7AB8M.js → index-g_Bs6dNr.js}

@@ -1,7 +1,7 @@
-import { L as LRLanguage, q as LanguageSupport, y as parseMixed, u as styleTags, v as tags } from "./code-palette-DAJUTnR-.js";
-import { html } from "./index-DxTzaHLr.js";
-import { javascriptLanguage } from "./index-DufAP1JF.js";
-import { L as LRParser, E as ExternalTokenizer } from "./index-CN8d3yl1.js";
+import { L as LRLanguage, a as LanguageSupport, p as parseMixed, s as styleTags, t as tags } from "./code-palette-BWrZDi47.js";
+import { html } from "./index-ptbBQ53d.js";
+import { javascriptLanguage } from "./index-Cx5ThXzs.js";
+import { L as LRParser, E as ExternalTokenizer } from "./index-2YPxXIaf.js";
 const Text = 1, attributeContentSingle = 33, attributeContentDouble = 34, scriptAttributeContentSingle = 35, scriptAttributeContentDouble = 36;
 const text = /* @__PURE__ */ new ExternalTokenizer((input) => {
   let start = input.pos;

package/dist/{index-B2tew8uf.js → index-oO_X5wU0.js}

@@ -1,6 +1,6 @@
-import { E as EditorView, x as EditorSelection, q as LanguageSupport, y as parseMixed, w as syntaxTree, L as LRLanguage, u as styleTags, v as tags, r as indentNodeProp, z as delimitedIndent, t as foldNodeProp } from "./code-palette-DAJUTnR-.js";
-import { html } from "./index-DxTzaHLr.js";
-import { L as LRParser, E as ExternalTokenizer } from "./index-CN8d3yl1.js";
+import { E as EditorView, d as EditorSelection, a as LanguageSupport, p as parseMixed, b as syntaxTree, L as LRLanguage, s as styleTags, t as tags, i as indentNodeProp, e as delimitedIndent, f as foldNodeProp } from "./code-palette-BWrZDi47.js";
+import { html } from "./index-ptbBQ53d.js";
+import { L as LRParser, E as ExternalTokenizer } from "./index-2YPxXIaf.js";
 const interpolationStart = 1, tagStart = 2, endTagStart = 3, text = 180, endrawTagStart = 4, rawText = 181, endcommentTagStart = 5, commentText = 182, InlineComment = 6;
 function wordChar(code) {
   return code >= 65 && code <= 90 || code >= 97 && code <= 122;

package/dist/{index-DxTzaHLr.js → index-ptbBQ53d.js}

@@ -1,7 +1,7 @@
-import { L as LRParser, E as ExternalTokenizer, C as ContextTracker } from "./index-CN8d3yl1.js";
-import { y as parseMixed, u as styleTags, v as tags, E as EditorView, w as syntaxTree, x as EditorSelection, q as LanguageSupport, L as LRLanguage, r as indentNodeProp, t as foldNodeProp, af as bracketMatchingHandle } from "./code-palette-DAJUTnR-.js";
-import { cssLanguage, css } from "./index-BhvbqYsK.js";
-import { typescriptLanguage, jsxLanguage, tsxLanguage, javascriptLanguage, javascript } from "./index-DufAP1JF.js";
+import { L as LRParser, E as ExternalTokenizer, C as ContextTracker } from "./index-2YPxXIaf.js";
+import { p as parseMixed, s as styleTags, t as tags, E as EditorView, b as syntaxTree, d as EditorSelection, a as LanguageSupport, L as LRLanguage, i as indentNodeProp, f as foldNodeProp, ag as bracketMatchingHandle } from "./code-palette-BWrZDi47.js";
+import { cssLanguage, css } from "./index-CefLTKmi.js";
+import { typescriptLanguage, jsxLanguage, tsxLanguage, javascriptLanguage, javascript } from "./index-Cx5ThXzs.js";
 const scriptText = 55, StartCloseScriptTag = 1, styleText = 56, StartCloseStyleTag = 2, textareaText = 57, StartCloseTextareaTag = 3, EndTag = 4, SelfClosingEndTag = 5, StartTag = 6, StartScriptTag = 7, StartStyleTag = 8, StartTextareaTag = 9, StartSelfClosingTag = 10, StartCloseTag = 11, NoMatchStartCloseTag = 12, MismatchedStartCloseTag = 13, missingCloseTag = 58, IncompleteTag = 14, IncompleteCloseTag = 15, commentContent$1 = 59, Element = 21, TagName = 23, Attribute = 24, AttributeName = 25, AttributeValue = 27, UnquotedAttributeValue = 28, ScriptText = 29, StyleText = 32, TextareaText = 35, OpenTag = 37, CloseTag = 38, Dialect_noMatch = 0, Dialect_selfClosing = 1;
 const selfClosers$1 = {
   area: true,

package/dist/index.js

@@ -1,8 +1,8 @@
-import { u } from "./useMessageHandler-nnsort0-.js";
-import { C, d, p, u as u2, b } from "./useChatKitLabels-CatQSpfL.js";
-import { S, c, d as d2, f, u as u3, a, b as b2, e } from "./index-CZFx44C7.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-gV-lp0ZB.js";
-import { m as m2 } from "./markdownToPlainText-BOtlQ_BY.js";
+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 { m as m2 } from "./markdownToPlainText-DN_G-I6g.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,

package/dist/{markdownToPlainText-BOtlQ_BY.js → markdownToPlainText-DN_G-I6g.js}

@@ -1,4 +1,4 @@
-import { u as unified, r as remarkParse, a as remarkGfm } from "./index-CLdXUpL8.js";
+import { u as unified, r as remarkParse, a as remarkGfm } from "./index-CfVHzirA.js";
 function generateId() {
   return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : String(Date.now());
 }

package/dist/{useChatKitLabels-CatQSpfL.js → useChatKitLabels-DxW0N5U-.js}

@@ -1,6 +1,6 @@
 import { computed, toValue, inject, provide } from "vue";
 import { p as purify } from "./katex.min-md74IFlY.js";
-import { b as asciiAlphanumeric, o as ok, l as longestStreak, f as factorySpace, m as markdownLineEnding, v as visit, c as convert, d as visitParents, S as SKIP, e as ccount, u as unified, r as remarkParse, a as remarkGfm, g as findAndReplace } from "./index-CLdXUpL8.js";
+import { b as asciiAlphanumeric, o as ok, l as longestStreak, c as factorySpace, m as markdownLineEnding, v as visit, d as convert, e as visitParents, S as SKIP, g as ccount, u as unified, r as remarkParse, a as remarkGfm, f as findAndReplace } from "./index-CfVHzirA.js";
 function normalizeUri(value) {
   const result = [];
   let index = -1;

package/dist/{useMessageHandler-nnsort0-.js → useMessageHandler-Bkzrdgfj.js}

@@ -1,4 +1,4 @@
-import { g as generateId } from "./markdownToPlainText-BOtlQ_BY.js";
+import { g as generateId } from "./markdownToPlainText-DN_G-I6g.js";
 import { reactive, ref, computed, readonly } from "vue";
 function createEmptyTree() {
   return { nodes: {}, rootId: null };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",
@@ -115,9 +115,9 @@
     "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/tsconfig-frontend": "0.7.3",
-    "@aleph-alpha/eslint-config-frontend": "0.7.1"
+    "@aleph-alpha/tsconfig-frontend": "0.7.3"
   },
   "scripts": {
     "build": "vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist",

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

@@ -1,7 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import CkCodeEditor from './CkCodeEditor.vue';
-import { resolveLanguage } from './createCodeMirror';
+import { detectLineSeparator, resolveLanguage } from './createCodeMirror';
+import { matchBadgeRanges } from './badgeDecoration';
 
 // 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
@@ -199,6 +200,124 @@ describe('CkCodeEditor', () => {
     );
   });
 
+  it('draws matched references as pills while the document keeps the text', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'use @collection:alpha here',
+      badge: {
+        pattern: /@collection:([\w-]+)/g,
+        render: (m: RegExpExecArray) => ({ label: m[1] as string }),
+      },
+    });
+
+    const pill = container.querySelector('.ck-code-badge');
+    expect(pill?.textContent).toBe('alpha');
+    // The raw reference is what a consumer reads back, not the label.
+    expect(container.querySelector('.cm-content')?.textContent).not.toContain(
+      '@collection:alpha',
+    );
+  });
+
+  it('leaves a match alone when the rule returns null', async () => {
+    const { container } = await renderEditor({
+      modelValue: '@collection:alpha and @collection:skip',
+      badge: {
+        pattern: /@collection:([\w-]+)/g,
+        render: (m: RegExpExecArray) =>
+          m[1] === 'skip' ? null : { label: m[1] as string },
+      },
+    });
+
+    const pills = [...container.querySelectorAll('.ck-code-badge')].map(
+      (e) => e.textContent,
+    );
+    expect(pills).toEqual(['alpha']);
+  });
+
+  it('keeps Windows line endings instead of rewriting them', async () => {
+    const crlf = 'alpha\r\nbeta\r\ngamma';
+    const { emitted } = await renderEditor({ modelValue: crlf });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.type(content, '!');
+
+    await waitFor(() => expect(emitted()['update:modelValue']).toBeTruthy());
+    const updates = emitted()['update:modelValue'] as string[][];
+    const value = updates.at(-1)?.[0] ?? '';
+    // Every original separator survives, rather than being flattened to \n.
+    expect(value).toContain('alpha\r\nbeta\r\ngamma');
+    expect(value).not.toContain('alpha\nbeta');
+  });
+
+  it('leaves a Unix document on Unix endings', async () => {
+    const { emitted } = await renderEditor({ modelValue: 'alpha\nbeta' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.type(content, '!');
+
+    await waitFor(() => expect(emitted()['update:modelValue']).toBeTruthy());
+    const updates = emitted()['update:modelValue'] as string[][];
+    expect(updates.at(-1)?.[0]).not.toContain('\r');
+  });
+
+  it('wraps the code in the design system fade mask', async () => {
+    const { container } = await renderEditor({ modelValue: 'a\nb' });
+
+    const mask = container.querySelector('.ui-fade-mask');
+    expect(mask).toBeInTheDocument();
+    expect(mask?.querySelector('.ck-code-editor__host')).toBeInTheDocument();
+    // jsdom reports no layout, so nothing scrolls and the bands collapse.
+    expect(
+      (mask as HTMLElement).style.getPropertyValue('--ui-fade-mask-height'),
+    ).toBe('0px');
+  });
+
+  it('omits the fade mask when `scrollFade` is off', async () => {
+    const { container } = await renderEditor({
+      modelValue: 'a\nb',
+      scrollFade: false,
+    });
+
+    expect(container.querySelector('.ui-fade-mask')).toBeNull();
+    expect(
+      container.querySelector('.ck-code-editor__host'),
+    ).toBeInTheDocument();
+  });
+
+  // CodeMirror reports focus changes from a 10ms timeout, so a test asserting
+  // that no event followed has to outlast it.
+  const settleFocus = () => new Promise((resolve) => setTimeout(resolve, 30));
+
+  it('keeps focus while it moves between the code and the header', async () => {
+    const { emitted } = await renderEditor({ modelValue: 'x' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await waitFor(() => expect(emitted().focus).toBeTruthy());
+
+    // The copy button is inside the component, so the editor has not been left.
+    await userEvent.click(screen.getByRole('button', { name: 'Copy code' }));
+    await settleFocus();
+    expect(emitted().blur).toBeUndefined();
+  });
+
+  it('emits `blur` once focus leaves the component entirely', async () => {
+    const outside = document.createElement('button');
+    document.body.append(outside);
+    const { emitted } = await renderEditor({ modelValue: 'x' });
+
+    const content = document.querySelector('.cm-content') as HTMLElement;
+    await userEvent.click(content);
+    await userEvent.click(outside);
+
+    await waitFor(() => expect(emitted().blur).toHaveLength(1));
+    // And exactly once, not again from CodeMirror's own focus tracking.
+    await settleFocus();
+    expect(emitted().blur).toHaveLength(1);
+    outside.remove();
+  });
+
   it('does not throw when unmounted before or after the editor is created', async () => {
     const early = render(CkCodeEditor, { props: { modelValue: 'x' } });
     expect(() => early.unmount()).not.toThrow();
@@ -221,3 +340,44 @@ describe('resolveLanguage', () => {
     await expect(resolveLanguage('not-a-language')).resolves.toBeNull();
   });
 });
+
+describe('matchBadgeRanges', () => {
+  const rule = {
+    pattern: /@collection:([\w-]+)/g,
+    render: (m: RegExpExecArray) => ({ label: m[1] as string }),
+  };
+
+  it('finds every occurrence, with or without the global flag', () => {
+    const text = '@collection:a then @collection:b';
+    expect(matchBadgeRanges(rule, text)).toHaveLength(2);
+    expect(
+      matchBadgeRanges({ ...rule, pattern: /@collection:([\w-]+)/ }, text),
+    ).toHaveLength(2);
+  });
+
+  it('spans exactly the matched text', () => {
+    const [range] = matchBadgeRanges(rule, 'x @collection:a y');
+    expect(range?.from).toBe(2);
+    expect(range?.to).toBe('x @collection:a'.length);
+  });
+
+  it('skips matches the rule declines', () => {
+    expect(
+      matchBadgeRanges({ ...rule, render: () => null }, '@collection:a'),
+    ).toHaveLength(0);
+  });
+});
+
+describe('detectLineSeparator', () => {
+  it('reports the separator a document already uses', () => {
+    expect(detectLineSeparator('a\nb')).toBe('\n');
+    expect(detectLineSeparator('a\r\nb')).toBe('\r\n');
+    expect(detectLineSeparator('no newlines at all')).toBe('\n');
+    expect(detectLineSeparator('')).toBe('\n');
+  });
+
+  it('follows the majority in a mixed document', () => {
+    expect(detectLineSeparator('a\r\nb\r\nc\nd')).toBe('\r\n');
+    expect(detectLineSeparator('a\nb\nc\r\nd')).toBe('\n');
+  });
+});

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

@@ -4,6 +4,32 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import CkCodeEditor from './CkCodeEditor.vue';
 import CkMarkdownRenderer from '../CkMarkdownRenderer/CkMarkdownRenderer.vue';
 
+const folderIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" ' +
+  'stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+  'stroke-linejoin="round" width="12" height="12" aria-hidden="true">' +
+  '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>';
+
+/** Matches `@collection:<id>` and draws each one as a folder pill. */
+const collectionBadge = {
+  pattern: /@collection:([\w-]+)/g,
+  render: (match: RegExpExecArray) => ({
+    label: (match[1] ?? '').replace(/-/g, ' '),
+    icon: folderIcon,
+    title: match[0],
+  }),
+};
+
+/** Matches `{{ name }}`, showing that the trigger is whatever you pattern for. */
+const handlebarsBadge = {
+  pattern: /\{\{\s*([\w-]+)\s*\}\}/g,
+  render: (match: RegExpExecArray) => ({
+    label: match[1] ?? '',
+    icon: folderIcon,
+    title: match[0],
+  }),
+};
+
 const meta: Meta<typeof CkCodeEditor> = {
   title: 'Base/CkCodeEditor',
   component: CkCodeEditor,
@@ -31,6 +57,21 @@ const meta: Meta<typeof CkCodeEditor> = {
     showLineNumbers: { control: 'boolean' },
     lineWrapping: { control: 'boolean' },
     autofocus: { control: 'boolean' },
+    scrollFade: { control: 'boolean' },
+    // 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.
+    badge: {
+      options: ['none', 'collections', 'handlebars'],
+      mapping: {
+        none: undefined,
+        collections: collectionBadge,
+        handlebars: handlebarsBadge,
+      },
+      control: { type: 'radio' },
+      description:
+        'Pattern plus a render callback turning matched text into inline pills. Pick a preset to try it on any story.',
+    },
     writeToClipboard: {
       control: false,
       description:
@@ -69,6 +110,14 @@ const pythonSample = [
   '        return f"{opener}, {self.name}!"',
 ].join('\n');
 
+const badgeSample = [
+  'You improve and draft work writing: emails, project summaries and status',
+  'updates, tightening structure and matching register to the audience.',
+  '',
+  'For analyses, use @collection:collection-name-3 and @collection:collection-name-4',
+  'and distinguish an opinion from a fact.',
+].join('\n');
+
 const defaultTemplateSource = `<script setup lang="ts">
 import { ref } from 'vue';
 import { CkCodeEditor } from '@aleph-alpha/chat-kit';
@@ -149,6 +198,29 @@ const code = ref(longFile);
   <CkCodeEditor v-model="code" language="typescript" max-height="16rem" line-wrapping />
 </template>`;
 
+const withBadgesTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkCodeEditor } from '@aleph-alpha/chat-kit';
+
+const prompt = ref('For analyses, use @collection:sales and @collection:support.');
+
+// The document keeps the raw text; only the drawing is replaced.
+const badge = {
+  pattern: /@collection:([\\w-]+)/g,
+  render: (m) => ({ label: m[1], icon: folderIcon, title: m[0] }),
+};
+</script>
+
+<template>
+  <CkCodeEditor
+    v-model="prompt"
+    language="markdown"
+    :badge="badge"
+    :line-wrapping="true"
+    aria-label="Prompt"
+  />
+</template>`;
+
 const matchesRendererTemplateSource = `<script setup lang="ts">
 import { ref } from 'vue';
 import { CkCodeEditor, CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
@@ -253,7 +325,8 @@ export 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 const ScrollingAndWrapping: Story = {
   render: (args) => ({
@@ -279,6 +352,29 @@ export const ScrollingAndWrapping: Story = {
   parameters: { docs: { source: { code: scrollingTemplateSource } } },
 };
 
+/**
+ * `badge` draws matched references as inline pills, the way a mention renders in
+ * prose. The document still holds the raw `@collection:…` text, so `getCode()`
+ * and copy give the real reference; a pill deletes as one unit.
+ */
+export const WithBadges: Story = {
+  render: (args) => ({
+    components: { CkCodeEditor },
+    setup() {
+      const code = ref(args.modelValue ?? '');
+      return { args, code };
+    },
+    template: `<CkCodeEditor v-bind="args" v-model="code" aria-label="Prompt" />`,
+  }),
+  args: {
+    modelValue: badgeSample,
+    language: 'markdown',
+    badge: collectionBadge,
+    lineWrapping: true,
+  },
+  parameters: { docs: { source: { code: withBadgesTemplateSource } } },
+};
+
 /**
  * Parity check: the editor on the left, the same snippet rendered through
  * `CkMarkdownRenderer` and `UiCodeBlock` on the right. Border, radius, header,