@svar-ui/svelte-kanban 2.6.0

package/dist/themes/PrintBW.svelte

@@ -0,0 +1,153 @@
+<script>
+	import Willow from "./Willow.svelte";
+	let { fonts = true, children } = $props();
+</script>
+
+{#if children}
+	<Willow {fonts}>
+		<div class="wx-bw-theme">
+			{@render children()}
+		</div>
+	</Willow>
+{:else}
+	<Willow {fonts} />
+{/if}
+
+<style>
+	.wx-bw-theme {
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+
+		/* base palette - black with gray shades for print legibility */
+		--wx-background: #ffffff;
+		--wx-background-alt: #ffffff;
+		--wx-background-hover: transparent;
+		--wx-color-font: #000000;
+		--wx-color-font-alt: #555555;
+		--wx-color-font-disabled: #888888;
+		--wx-color-primary: #000000;
+		--wx-color-primary-selected: transparent;
+		--wx-color-primary-font: #000000;
+		--wx-color-link: #000000;
+		--wx-icon-color: #000000;
+
+		/* kanban surfaces */
+		--wx-kanban-bg: #ffffff;
+		--wx-kanban-column-bg: #ffffff;
+		--wx-kanban-column-over-limit-bg: #ffffff;
+		--wx-kanban-card-bg: #ffffff;
+		--wx-kanban-tag-bg: #ffffff;
+		--wx-kanban-avatar-bg: #ffffff;
+
+		/* kanban progress */
+		--wx-kanban-progress-bg: #ffffff;
+		--wx-kanban-progress-fill: #777777;
+
+		/* kanban borders and shadows */
+		--wx-kanban-border-color: #999999;
+		--wx-kanban-card-shadow: none;
+		--wx-kanban-card-shadow-hover: none;
+		--wx-kanban-card-shadow-drag: none;
+		--wx-kanban-drop-placeholder-bg: transparent;
+
+		/* priority badges - gray/black borders instead of color fills */
+		--wx-kanban-priority-low-bg: #ffffff;
+		--wx-kanban-priority-low-color: #555555;
+		--wx-kanban-priority-medium-bg: #ffffff;
+		--wx-kanban-priority-medium-color: #333333;
+		--wx-kanban-priority-high-bg: #ffffff;
+		--wx-kanban-priority-high-color: #000000;
+	}
+
+	.wx-bw-theme :global(.wx-kanban),
+	.wx-bw-theme :global(.wx-board),
+	.wx-bw-theme :global(.wx-scroll),
+	.wx-bw-theme :global(.wx-content) {
+		background: #ffffff;
+	}
+
+	.wx-bw-theme :global(.wx-column) {
+		background: #ffffff;
+		border-right: 1px solid #fff;
+		border-bottom: 1px solid #fff;
+	}
+
+	.wx-bw-theme :global(.wx-column-header),
+	.wx-bw-theme :global(.wx-scroll-board .wx-column-header),
+	.wx-bw-theme :global(.wx-over-limit .wx-column-header),
+	.wx-bw-theme :global(.wx-over-limit .wx-body) {
+		background: #ffffff;
+	}
+
+	.wx-bw-theme :global(.wx-over-limit.wx-column) {
+		border-color: #000000;
+	}
+
+	.wx-bw-theme :global(.wx-card) {
+		background: #ffffff;
+		border: 1px solid var(--wx-kanban-border-color);
+		box-shadow: none;
+		break-inside: avoid;
+	}
+
+	.wx-bw-theme :global(.wx-card:hover) {
+		box-shadow: none;
+	}
+
+	.wx-bw-theme :global(.wx-cover),
+	.wx-bw-theme :global(.wx-image) {
+		filter: grayscale(1) contrast(1.08);
+	}
+
+	.wx-bw-theme :global(.wx-cover) {
+		box-shadow: inset 0 0 0 1px var(--wx-kanban-border-color);
+	}
+
+	.wx-bw-theme :global(.wx-priority),
+	.wx-bw-theme :global(.wx-tag) {
+		background: #ffffff;
+		border: 1px solid currentColor;
+	}
+
+	.wx-bw-theme :global(.wx-card-priority-medium) {
+		border-style: dashed;
+	}
+
+	.wx-bw-theme :global(.wx-card-priority-high) {
+		border-width: 2px;
+	}
+
+	.wx-bw-theme :global(.wx-progress) {
+		height: 6px;
+		background: #ffffff;
+		border: 1px solid #777777;
+	}
+
+	/* diagonal stripes so progress reads on paper without color */
+	.wx-bw-theme :global(.wx-progress-fill) {
+		background: repeating-linear-gradient(
+			45deg,
+			#777777 0,
+			#777777 1px,
+			transparent 1px,
+			transparent 6px
+		);
+	}
+
+	.wx-bw-theme :global(.wx-avatar) {
+		background: #ffffff;
+		border: 1px solid var(--wx-kanban-border-color);
+	}
+
+	.wx-bw-theme :global(.wx-drop-placeholder) {
+		background: transparent;
+	}
+
+	.wx-bw-theme :global(.wx-add:hover),
+	.wx-bw-theme :global(.wx-toggle:hover),
+	.wx-bw-theme :global(.wx-expand:hover),
+	.wx-bw-theme :global(.wx-menu:hover) {
+		background: transparent;
+	}
+</style>

package/dist/themes/PrintBW.svelte.d.ts

@@ -0,0 +1,13 @@
+export default PrintBW;
+type PrintBW = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PrintBW: import("svelte").Component<{
+    fonts?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    fonts?: boolean;
+    children: any;
+};

package/dist/themes/Willow.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import { Willow } from "@svar-ui/svelte-core";
+let { fonts = true, children } = $props();
+</script>
+
+{#if children}
+	<Willow {fonts}>{@render children()}</Willow>
+{:else}
+	<Willow {fonts} />
+{/if}
+
+<style>
+	:global(.wx-willow-theme) {
+		height: 100%;
+		width: 100%;
+
+		/* kanban surfaces */
+		--wx-kanban-bg: var(--wx-background-alt);
+		--wx-kanban-column-bg: #ebecef;
+		--wx-kanban-column-over-limit-bg: #fde1d6;
+		--wx-kanban-card-bg: var(--wx-background);
+		--wx-kanban-tag-bg: var(--wx-background-alt);
+		--wx-kanban-avatar-bg: #d0d4dc;
+
+		/* kanban progress bar */
+		--wx-kanban-progress-bg: #e5e7eb;
+		--wx-kanban-progress-fill: #3b82f6;
+
+		/* kanban borders and shadows */
+		--wx-kanban-border-color: #d6d8de;
+		--wx-kanban-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+		--wx-kanban-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.12);
+		--wx-kanban-card-shadow-drag: 0 8px 20px rgba(0, 0, 0, 0.18);
+
+		/* drop-target placeholder */
+		--wx-kanban-drop-placeholder-bg: rgba(59, 130, 246, 0.08);
+
+		/* card priority badges */
+		--wx-kanban-priority-low-bg: #dcfce7;
+		--wx-kanban-priority-low-color: #166534;
+		--wx-kanban-priority-medium-bg: #fef3c7;
+		--wx-kanban-priority-medium-color: #92400e;
+		--wx-kanban-priority-high-bg: #fee2e2;
+		--wx-kanban-priority-high-color: #991b1b;
+	}
+</style>

package/dist/themes/Willow.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Willow } from "@svar-ui/svelte-core";
+declare const Willow: import("svelte").Component<{
+    fonts?: boolean;
+    children: any;
+}, {}, "">;
+type Willow = ReturnType<typeof Willow>;
+export default Willow;

package/dist/themes/WillowDark.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">import { WillowDark } from "@svar-ui/svelte-core";
+let { fonts = true, children } = $props();
+</script>
+
+{#if children}
+	<WillowDark {fonts}>{@render children()}</WillowDark>
+{:else}
+	<WillowDark {fonts} />
+{/if}
+
+<style>
+	:global(.wx-willow-dark-theme) {
+		height: 100%;
+		width: 100%;
+
+		/* kanban surfaces */
+		--wx-kanban-bg: var(--wx-background);
+		--wx-kanban-column-bg: var(--wx-background-alt);
+		--wx-kanban-column-over-limit-bg: #5a2d2d;
+		--wx-kanban-card-bg: var(--wx-background);
+		--wx-kanban-tag-bg: #434863;
+		--wx-kanban-avatar-bg: #4a5070;
+
+		/* kanban progress bar */
+		--wx-kanban-progress-bg: #434863;
+		--wx-kanban-progress-fill: #60a5fa;
+
+		/* kanban borders and shadows */
+		--wx-kanban-border-color: #40455a;
+		--wx-kanban-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+		--wx-kanban-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4);
+		--wx-kanban-card-shadow-drag: 0 8px 20px rgba(0, 0, 0, 0.5);
+
+		/* drop-target placeholder */
+		--wx-kanban-drop-placeholder-bg: rgba(96, 165, 250, 0.16);
+
+		/* card priority badges */
+		--wx-kanban-priority-low-bg: #1f3a2a;
+		--wx-kanban-priority-low-color: #86efac;
+		--wx-kanban-priority-medium-bg: #3a2f1a;
+		--wx-kanban-priority-medium-color: #fcd34d;
+		--wx-kanban-priority-high-bg: #3a1f1f;
+		--wx-kanban-priority-high-color: #fca5a5;
+
+		/* secondary text shade tuned for kanban surfaces */
+		--wx-color-font: #e8e9ef;
+		--wx-color-font-alt: #a0a3b0;
+	}
+</style>

package/dist/themes/WillowDark.svelte.d.ts

@@ -0,0 +1,7 @@
+import { WillowDark } from "@svar-ui/svelte-core";
+declare const WillowDark: import("svelte").Component<{
+    fonts?: boolean;
+    children: any;
+}, {}, "">;
+type WillowDark = ReturnType<typeof WillowDark>;
+export default WillowDark;

package/dist/types.d.ts

@@ -0,0 +1,86 @@
+import type { EventBus } from "@svar-ui/lib-state";
+import type { Brandmark, KanbanStore, StoreActions, KanbanCard, CardID, ColumnID, ColumnView } from "@svar-ui/kanban-store";
+export type CardCssFn = (card: KanbanCard, column: ColumnView) => string;
+export type ColumnCssFn = (cards: KanbanCard[], column: ColumnView) => string;
+type ShapeConfig<T> = boolean | T;
+export type CardShapeItem = {
+    id: CardID;
+    label: string;
+    css?: string;
+};
+export type CardShapeUserItem = CardShapeItem & {
+    img?: string;
+};
+export type CardPriorityShape = {
+    data?: CardShapeItem[];
+};
+export type CardTagsShape = {
+    max?: number;
+    data?: CardShapeItem[];
+};
+export type CardUsersShape = {
+    max?: number;
+    size?: "sm" | "md";
+    data?: CardShapeUserItem[];
+};
+export type CardDeadlineShape = {
+    format?: string;
+};
+export type CardMenuShape = {
+    options?: any[];
+    filter?: (item: any, card: KanbanCard) => boolean;
+    onclick?: (e: any) => void;
+};
+export type CardShape = {
+    cover?: boolean;
+    priority?: ShapeConfig<CardPriorityShape>;
+    progress?: ShapeConfig<{
+        showLabel?: boolean;
+    }>;
+    deadline?: ShapeConfig<CardDeadlineShape>;
+    users?: ShapeConfig<CardUsersShape>;
+    tags?: ShapeConfig<CardTagsShape>;
+    attachments?: boolean;
+    comments?: boolean;
+    description?: boolean;
+    menu?: ShapeConfig<CardMenuShape>;
+};
+export type EditorShape = {
+    description?: boolean;
+    priority?: ShapeConfig<CardPriorityShape>;
+    progress?: ShapeConfig<{
+        showLabel?: boolean;
+    }>;
+    deadline?: ShapeConfig<CardDeadlineShape>;
+    tags?: ShapeConfig<CardTagsShape>;
+    users?: ShapeConfig<CardUsersShape>;
+};
+export type RenderConfig = {
+    columnScroll?: boolean;
+    fixedColumnWidth?: boolean;
+    virtualizeCards?: boolean;
+    virtualizeColumns?: boolean;
+    estimatedCardHeight?: number;
+    cardOverscan?: number;
+    columnOverscan?: number;
+};
+export type { KanbanCard, CardID, ColumnID };
+type KanbanEventBus = EventBus<StoreActions, keyof StoreActions>;
+type KanbanApi = {
+    getState: KanbanStore["getState"];
+    getReactiveState: KanbanStore["getReactive"];
+    exec: KanbanEventBus["exec"];
+};
+export type KanbanContextApi = KanbanApi & {
+    getBrandmark: () => Brandmark | null;
+};
+export type KanbanInstanceApi = KanbanApi & {
+    getStores: () => {
+        data: KanbanStore;
+    };
+    setNext: (handler: any) => any;
+    intercept: KanbanEventBus["intercept"];
+    on: KanbanEventBus["on"];
+    detach: KanbanEventBus["detach"];
+    getCards: KanbanStore["getCards"];
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XB Software Sp. z o.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@svar-ui/svelte-kanban",
+  "version": "2.6.0",
+  "description": "SVAR UI Kanban board widget",
+  "homepage": "https://svar.dev/svelte/kanban/",
+  "bugs": {
+    "url": "https://forum.svar.dev"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/svar-widgets/kanban.git"
+  },
+  "files": [
+    "dist",
+    "readme.md",
+    "license.txt"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@svar-ui/core-locales": "2.6.0",
+    "@svar-ui/lib-dom": "0.13.1",
+    "@svar-ui/lib-state": "1.9.7",
+    "@svar-ui/svelte-core": "2.6.0",
+    "@svar-ui/svelte-editor": "2.6.0",
+    "@svar-ui/svelte-menu": "2.6.0",
+    "@svar-ui/svelte-toolbar": "2.6.0",
+    "svelte-check": "^4.4.6",
+    "@svar-ui/kanban-store": "2.6.0",
+    "@svar-ui/kanban-locales": "2.6.0",
+    "@svar-ui/kanban-provider": "2.6.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "^5.54.0",
+    "svelte-check": "^4.4.6"
+  },
+  "peerDependencies": {
+    "svelte": "^5.54.0"
+  },
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "build": "svelte-package -i ./src",
+    "build:export": "vp build --mode export",
+    "lint": "vp lint ./demos ./src",
+    "start": "vp dev --open",
+    "dev": "svelte-package -i ./src --watch"
+  }
+}

package/readme.md

@@ -0,0 +1,100 @@
+<div align="center">
+	
+# SVAR Svelte Kanban
+
+</div>
+
+<div align="center">
+
+[Homepage](https://svar.dev/svelte/kanban/) • [Getting Started](https://docs.svar.dev/svelte/kanban/getting-started/quick-start/) • [Demos](https://docs.svar.dev/svelte/kanban/samples/)
+
+</div>
+
+<div align="center">
+
+[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-kanban.svg)](https://www.npmjs.com/package/@svar-ui/svelte-kanban)
+[![License](https://img.shields.io/github/license/svar-widgets/kanban)](https://github.com/svar-widgets/kanban/blob/main/license.txt)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-kanban.svg)](https://www.npmjs.com/package/@svar-ui/svelte-kanban)
+
+</div>
+
+[SVAR Svelte Kanban](https://svar.dev/svelte/kanban/) is a customizable, interactive Kanban board component for Svelte and SvelteKit apps. It supports drag-and-drop, card editing, filtering, sorting, flexible layouts, and rich customization options. Use it to add clear visualization of tasks and project workflows. 
+
+The kanban component comes with full TypeScript support, rich API, and easy CSS styling. The PRO Edition offers extra features for enterprise projects (see below).
+
+<div align="center">
+<img src="https://svar.dev/images/github/github_kanban.gif" alt="SVAR Svelte Kanban Preview">
+</div>
+
+### ✨ Key Features
+
+- Drag-and-drop cards between columns and rows
+- Built-in card editor
+- Context menu and toolbar
+- Card filtering, sorting, grouping
+- REST data provider for backend integration
+- Custom card templates
+- Localization
+- Light and dark themes
+- Full TypeScript support
+
+### 🚀 PRO Edition
+
+SVAR Svelte Kanban is available in open-source and [PRO Editions](https://svar.dev/svelte/kanban/#pro). The PRO Edition offers extra features for enterprise projects:
+
+- Export to PDF/PNG/Excel
+- Dynamic data loading
+- Undo/redo
+
+Visit the [pricing page](https://svar.dev/svelte/kanban/pricing/) for full feature comparison, licensing details, and **free trial**.
+
+Or [see the live demo](https://svar.dev/demos/kanban/).
+
+### 🛠️ How to Use
+
+To use SVAR Svelte Kanban, simply import the package and include the component in your Svelte file:
+
+```svelte
+<script>
+	import { Kanban } from "@svar-ui/svelte-kanban";
+
+	const cards = [
+		{ id: 1, label: "Design", column: "todo" },
+		{ id: 2, label: "Implement", column: "doing" },
+	];
+	const columns = [
+		{ id: "todo", label: "To Do" },
+		{ id: "doing", label: "Doing" },
+		{ id: "done", label: "Done" },
+	];
+</script>
+
+<Kanban {cards} {columns} />
+```
+
+For further instructions, follow the detailed [quick start guide](https://docs.svar.dev/svelte/kanban/getting-started/quick-start/).
+
+### How to Modify
+
+Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
+
+1. Install [vite-plus](https://vite.plus) (`curl -fsSL https://vite.plus | bash` on Mac/Linux, `irm https://vite.plus/ps1 | iex` on Windows). The project uses `pnpm` workspaces under the hood, so plain `npm` will not work.
+2. Run `vp i` from the project root to install dependencies.
+3. Run `vp run build` to build all packages.
+4. Start the demo app in development mode with `vp run start`.
+
+### Run Tests
+
+To run the tests:
+
+```sh
+vp test
+```
+
+### ⭐ Show Your Support
+
+If SVAR Svelte Kanban helps your project, [give us a star](https://github.com/svar-widgets/kanban/) to support us! 
+
+### :speech_balloon: Need Help?
+
+[Post an Issue](https://github.com/svar-widgets/kanban/issues/) or use our [community forum](https://forum.svar.dev).