@knime/kds-code-editor 11.0.0 → 11.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/kds-code-editor
 
+## 11.1.1
+
+### Patch Changes
+
+- Updated dependencies [7dbad9a, 2c0897f]
+  - @knime/kds-components@11.1.1
+  - @knime/kds-styles@11.1.1
+
+## 11.1.0
+
+### Patch Changes
+
+- Updated dependencies [1cbcad8]
+  - @knime/kds-styles@11.1.0
+  - @knime/kds-components@11.1.0
+
 ## 11.0.0
 
 ### Patch Changes

package/README.md

@@ -2,7 +2,7 @@
 
 This is part of the [KNIME Design System](https://github.com/knime/knime-designsystem) maintained by the [UI Core Team](mailto:team-ui-core@knime.com).
 
-This package contains the `KdsCodeEditor` component, a code editor that follows the KNIME Design System. It is based on the [Vue] JavaScript framework and powered by the [Monaco editor][Monaco].
+This package contains the `KdsCodeEditor`, `KdsCodeDiffEditor`, and `KdsConsole` components, which follow the KNIME Design System. They are based on the [Vue] JavaScript framework; the editors are powered by the [Monaco editor][Monaco] and the console by [xterm.js][xterm].
 
 It's published as npm package: [@knime/kds-code-editor]
 
@@ -52,28 +52,33 @@ updated with it — re-copy the patch file when you bump Monaco.
 
 ### Monaco state is global
 
-Standalone Monaco keeps page-global state, and `KdsCodeEditor` participates
-in it:
+Standalone Monaco keeps page-global state, and `KdsCodeEditor` and
+`KdsCodeDiffEditor` participate in it:
 
-- **Theme:** the component switches Monaco's built-in `vs-light` / `vs-dark`
+- **Theme:** the components switch Monaco's built-in `vs-light` / `vs-dark`
   theme to follow the KDS dark-mode setting — once at mount and again on every
   dark-mode change. Monaco's theme applies to **every** standalone editor on
   the page, so the host app's own Monaco editors switch along with it, and a
-  custom theme set by the host is overridden while a `KdsCodeEditor` is
-  mounted. If your app defines its own Monaco editors, expect them to render
-  with `vs-light` / `vs-dark` alongside this component.
-- **Worker environment and languages:** `setupMonacoEnvironment` installs a
-  `MonacoEnvironment` only when the host app has not already defined one, and
-  the custom language grammars shipped with this package (e.g. `toml`) are
-  registered in Monaco's global language registry at import time — they are
-  also available to the host app's own editors.
+  custom theme set by the host is overridden while one of them is mounted. If your app defines its own Monaco editors, expect them to render
+  with `vs-light` / `vs-dark` alongside these components.
+- **Worker environment and languages:** `setupMonacoEnvironment` (called by
+  both editor components on setup) installs a `MonacoEnvironment` only when the
+  host app has not already defined one, and registers the custom language
+  grammars shipped with this package (e.g. `toml`) in Monaco's global language
+  registry — they are then also available to the host app's own editors.
 
 ## Using the editor in a Vue application
 
-Install the [@knime/kds-code-editor] npm package as a dependency. It requires `@knime/kds-components`, `monaco-editor`, and `vue` as peer dependencies:
+Install the [@knime/kds-code-editor] npm package together with `@knime/kds-styles`. It declares `monaco-editor`, `vue`, and `@vueuse/core` as peer dependencies:
 
 ```sh
-pnpm add @knime/kds-code-editor @knime/kds-components @knime/kds-styles monaco-editor
+pnpm add @knime/kds-code-editor @knime/kds-styles monaco-editor vue @vueuse/core
+```
+
+The components use the KDS CSS variables but do not load them. Import them once in your app (e.g. in `main.ts`):
+
+```ts
+import "@knime/kds-styles/kds-variables.css";
 ```
 
 ```vue
@@ -94,18 +99,44 @@ const value = ref('key = "value"');
 
 All public symbols follow the KDS `Kds` prefix convention:
 
-| Export                            | Kind      | Description                                                   |
-| --------------------------------- | --------- | ------------------------------------------------------------- |
-| `KdsCodeEditor`                   | component | The code editor (with header, copy button, and sub-text)      |
-| `setupMonacoEnvironment`          | function  | Installs the Monaco worker environment (no-op if already set) |
-| `kdsCodeEditorState`              | const     | Editor states (`default` / `error` / `warning`)               |
-| `kdsCodeEditorStates`             | const     | Array of all editor states                                    |
-| `KdsCodeEditorProps`              | type      | Props of `KdsCodeEditor`                                      |
-| `KdsCodeEditorState`              | type      | Union of the editor states                                    |
-| `KdsCodeEditorAction`             | type      | Union of the header action types below                        |
-| `KdsCodeEditorButtonAction`       | type      | Header action rendered as `KdsButton`                         |
-| `KdsCodeEditorToggleButtonAction` | type      | Header action rendered as `KdsToggleButton`                   |
-| `KdsCodeEditorMenuButtonAction`   | type      | Header action rendered as `KdsMenuButton`                     |
+| Export                            | Kind      | Description                                                        |
+| --------------------------------- | --------- | ------------------------------------------------------------------ |
+| `KdsCodeEditor`                   | component | The code editor (with header, copy button, and sub-text)           |
+| `KdsCodeDiffEditor`               | component | Side-by-side or inline diff editor with an optional change summary |
+| `KdsConsole`                      | component | Read-only output console (xterm.js based)                          |
+| `setupMonacoEnvironment`          | function  | Installs the Monaco worker environment (no-op if already set)      |
+| `kdsCodeEditorState`              | const     | Editor states (`default` / `error` / `warning`)                    |
+| `kdsCodeEditorStates`             | const     | Array of all editor states                                         |
+| `KdsCodeEditorProps`              | type      | Props of `KdsCodeEditor`                                           |
+| `KdsCodeDiffEditorProps`          | type      | Props of `KdsCodeDiffEditor`                                       |
+| `KdsConsoleHandler`               | type      | Handle for writing to / clearing a `KdsConsole`                    |
+| `KdsConsoleText`                  | type      | A console line (`{ text }`, `{ warning }`, or `{ error }`)         |
+| `KdsCodeEditorState`              | type      | Union of the editor states                                         |
+| `KdsCodeEditorAction`             | type      | Union of the header action types below                             |
+| `KdsCodeEditorButtonAction`       | type      | Header action rendered as `KdsButton`                              |
+| `KdsCodeEditorToggleButtonAction` | type      | Header action rendered as `KdsToggleButton`                        |
+| `KdsCodeEditorMenuButtonAction`   | type      | Header action rendered as `KdsMenuButton`                          |
+
+`KdsConsole` exposes its writer through the `console-created` event rather than
+props — store the handler and call `write` / `writeln` / `clear` from your app.
+The console fills its parent (`height: 100%`), so give the parent a height:
+
+```vue
+<script setup lang="ts">
+import { KdsConsole, type KdsConsoleHandler } from "@knime/kds-code-editor";
+
+const onConsoleCreated = (handler: KdsConsoleHandler) => {
+  handler.writeln({ text: "Execution started" });
+  handler.writeln({ warning: "Deprecated option used" });
+};
+</script>
+
+<template>
+  <div style="height: 200px">
+    <KdsConsole @console-created="onConsoleCreated" />
+  </div>
+</template>
+```
 
 ### Using with Vitest, Nuxt, or Vite SSR
 
@@ -136,4 +167,5 @@ export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
 
 [Vue]: https://vuejs.org/
 [Monaco]: https://microsoft.github.io/monaco-editor/
+[xterm]: https://xtermjs.org/
 [@knime/kds-code-editor]: https://www.npmjs.com/package/@knime/kds-code-editor

package/dist/index.js

@@ -371,6 +371,62 @@ var color = {
 				}
 			}
 		},
+		"neutral-opaque": {
+			initial: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 99,
+					a: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 22,
+					a: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%))",
+					variable: "var(--kds-color-background-neutral-opaque-initial)"
+				}
+			},
+			hover: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 94.1,
+					a: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 32.2,
+					a: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
+					variable: "var(--kds-color-background-neutral-opaque-hover)"
+				}
+			},
+			active: {
+				light: {
+					h: 0,
+					s: 0,
+					l: 90.2,
+					a: 1
+				},
+				dark: {
+					h: 0,
+					s: 0,
+					l: 43,
+					a: 1
+				},
+				css: {
+					value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 43%))",
+					variable: "var(--kds-color-background-neutral-opaque-active)"
+				}
+			}
+		},
 		primary: {
 			initial: {
 				light: {
@@ -1798,6 +1854,60 @@ var color = {
 				value: "light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68))",
 				variable: "var(--kds-color-border-neutral-bold-active)"
 			}
+		},
+		"neutral-opaque-initial": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 64,
+				a: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 64,
+				a: 1
+			},
+			css: {
+				value: "hsl(0, 0%, 64%)",
+				variable: "var(--kds-color-border-neutral-opaque-initial)"
+			}
+		},
+		"neutral-opaque-hover": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 43,
+				a: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 72.5,
+				a: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+				variable: "var(--kds-color-border-neutral-opaque-hover)"
+			}
+		},
+		"neutral-opaque-active": {
+			light: {
+				h: 0,
+				s: 0,
+				l: 32.2,
+				a: 1
+			},
+			dark: {
+				h: 0,
+				s: 0,
+				l: 90.2,
+				a: 1
+			},
+			css: {
+				value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
+				variable: "var(--kds-color-border-neutral-opaque-active)"
+			}
 		}
 	},
 	focus: {