@aleph-alpha/chat-kit 6.4.1 → 6.4.3

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

@@ -6,14 +6,24 @@ export type {
   CkCodeEditorBadgeRule,
 } from './badgeDecoration';
 
+/**
+ * Opaque design-system surfaces the scroll fade can dissolve into, each naming
+ * a `background-surface-*` token. Translucent surfaces are left out: the fade
+ * gradient needs a solid colour to end on.
+ */
+export type CkCodeEditorFadeSurface =
+  | 'primary'
+  | 'secondary'
+  | 'floating'
+  | 'modal';
+
 /**
  * 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.
+ * It shares `UiCodeBlock`'s muted header, carrying the language and a copy
+ * button, and its syntax colours approximating Shiki's `github-light` /
+ * `github-dark`, so highlighted code keeps its colours between a reply and the
+ * editor. The body follows the design-system input field: body text on the
+ * input surface, with muted monospace line numbers.
  *
  * 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,
@@ -114,6 +124,20 @@ export interface CkCodeEditorProps {
    * @default true
    */
   scrollFade?: boolean;
+  /**
+   * Surface the top scroll fade dissolves into, as a `background-surface-*`
+   * token name. The gradient itself is `UiFadeMask`'s; only its colour changes.
+   *
+   * @default 'secondary'
+   */
+  fadeTopBackground?: CkCodeEditorFadeSurface;
+  /**
+   * Surface the bottom scroll fade dissolves into, as a `background-surface-*`
+   * token name. The gradient itself is `UiFadeMask`'s; only its colour changes.
+   *
+   * @default 'floating'
+   */
+  fadeBottomBackground?: CkCodeEditorFadeSurface;
   /**
    * Move focus into the editor once it has been created.
    *

package/src/components/base/index.ts

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

package/src/components/index.ts

@@ -29,6 +29,7 @@ export {
   CkEditableUserMessage,
   CkMilkdownEditor,
   CkCodeEditor,
+  preloadCkCodeEditor,
 } from './base';
 export type {
   CkAgentMessageHeaderProps,
@@ -73,6 +74,7 @@ export type {
   CkMilkdownEditorProps,
   CkCodeEditorEmits,
   CkCodeEditorExposed,
+  CkCodeEditorFadeSurface,
   CkCodeEditorProps,
 } from './base';
 

package/src/index.ts

@@ -101,6 +101,7 @@ export {
   CkEditableUserMessage,
   CkMilkdownEditor,
   CkCodeEditor,
+  preloadCkCodeEditor,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -148,6 +149,7 @@ export type {
   CkMilkdownEditorProps,
   CkCodeEditorEmits,
   CkCodeEditorExposed,
+  CkCodeEditorFadeSurface,
   CkCodeEditorProps,
 } from './components';