@knime/product-features

This is part of the KNIME Design System.

This package contains composition patterns that combine KNIME Design System components with shared product logic.

It's published as npm package: @knime/product-features

Unlike the @knime/kds-* packages it is versioned independently and is not part of their shared Changesets release group.

Installation

pnpm add @knime/product-features

Peer dependencies: @knime/kds-components, @knime/kds-styles, @vueuse/core, es-toolkit, ofetch and vue.

Usage

This package has no root export — import from one of the subpath entry points, so consumers only pull in the feature area they use:

| Entry point | Source | Contents | | -------------------------------------------- | -------------------------- | --------------------------------------------------------------------------- | | @knime/product-features/ai | src/ai | AI assistant building blocks (KdsPromptInput) | | @knime/product-features/analytics | src/analytics | Typed analytics event builders (README) | | @knime/product-features/auth-utils | src/authUtils | KNIME Hub auth refresher and auth state (README) | | @knime/product-features/data-transfer | src/dataTransfer | File upload/download progress panels and composables | | @knime/product-features/data-transfer/core | src/dataTransfer/core.ts | Framework-agnostic upload managers and upload client | | @knime/product-features/embedding-sdk | src/embeddingSDK | Host/guest messaging for embedding an application in an iframe | | @knime/product-features/nodes | src/nodes | Node description tabs and node preview | | @knime/product-features/rfc-errors | src/rfcErrors | RFC 9457 problem-details error handling and error toasts | | @knime/product-features/toasts | src/toasts | Toast notifications | | @knime/product-features/versions | src/versions | Version history and create-version form |

// ✅ import from a subpath
import { useToasts } from "@knime/product-features/toasts";

// ❌ fails — there is no "." export
import { useToasts } from "@knime/product-features";

Using with Vitest, Nuxt, or Vite SSR

The published JavaScript imports its CSS as a side effect (e.g. import "./index.css"), which bundlers handle automatically. When the package is instead evaluated by Node's native ESM loader — as Vitest and Vite/Nuxt SSR do by default, since they externalize node_modules — Node has no .css loader and throws Unknown file extension ".css". Configure the consuming project once so @knime/* packages are processed instead of externalized:

// Vitest — vitest.config.ts
export default defineConfig({
  test: { server: { deps: { inline: [/@knime\//] } } },
});

// Vite SSR — vite.config.ts
export default defineConfig({ ssr: { noExternal: [/@knime\//] } });

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });

License

KNIME-Commercial-License-2.0