Rewrite guides using skills (final)

docs/api/methods/js_kanban_parse_method.md

@@ -46,4 +46,4 @@ board.parse({
 
 **Change log:** Starting from v1.1 you don't need to reset initial data in constructor before parsing new data
 
-**Related articles:** [Working with Data](guides/working_with_data.md#loading-data-from-local-source)
+**Related articles:** [Working with Data](guides/working_with_data.md#load-data-from-a-local-source)

docs/guides/customization.md

@@ -6,37 +6,138 @@ description: You can learn about the customization in the documentation of the D
 
 # Customization
 
-Besides configuring Kanban, you can customize its appearance and behaviour. The widget allows you to specify a custom template for cards, modify a context menu for cards, columns and rows, change the Toolbar structure and functionality, and apply custom css styles to Kanban.
+You can customize the Kanban appearance and behavior with the following properties:
+
+- [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — render cards with a custom HTML template
+- [`cardShape.menu`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu`](api/config/js_kanban_columnshape_config.md), [`rowShape.menu`](api/config/js_kanban_rowshape_config.md) — modify the context menu for cards, columns, and rows
+- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md), [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — replace column header templates
+- [`cardShape.css`](api/config/js_kanban_cardshape_config.md), [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md) — apply CSS classes conditionally
+- [`items`](api/config/toolbar_items_config.md) — rearrange Toolbar structure and add custom controls
+- CSS variables — adjust visual styles (see the [Stylization](guides/stylization.md) section)
 
 ## Custom cards
 
-To display cards by a custom template, you can use the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property. It is a callback function that allows you to define the desired styles and logic and apply it to Kanban. See the snippet below:
+Use the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property to render cards with a custom HTML template. The callback returns the markup for each card.
+
+The callback receives an object with the following parameters:
+
+- `cardFields` — card data
+- `selected` — whether the card is selected
+- `dragging` — whether the card is being dragged
+- `cardShape` — card configuration
+
+To embed a context menu trigger in a custom card template, render an icon element with the `data-menu-id=${cardFields.id}` attribute. The widget binds the menu to the trigger through this attribute.
+
+The following demo applies a custom card template:
 
 <iframe src="https://snippet.dhtmlx.com/8rhdq81d?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 ## Custom context menu
 
-To customize a context menu for cards, columns and rows, you can use the corresponding [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md) and [`rowShape`](api/config/js_kanban_rowshape_config.md) properties. See the snippet below:
+Configure the context menu for cards, columns, and rows through the [`cardShape.menu`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu`](api/config/js_kanban_columnshape_config.md), and [`rowShape.menu`](api/config/js_kanban_rowshape_config.md) properties. Each `menu.items` entry can use a built-in action ID to invoke a default operation, or define a custom `onClick` handler for any other behavior.
 
-<iframe src="https://snippet.dhtmlx.com/8eo65gr5?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+### `cardShape.menu`
 
-## Custom toolbar
+- `"set-edit"` — open the card editor
+- `"delete-card"` — delete the card
 
-To customize the Toolbar structure and its functionality, you can use the [`items`](api/config/toolbar_items_config.md) property. In the array of this config you can define controls you need, arrange them in the desired order as well as modify their behaviour.
+### `columnShape.menu`
 
-In the snippet below you can see how to customize the following:
+- `"add-card"` — add a new card to the column
+- `"set-edit"` — rename the column
+- `"move-column:left"`, `"move-column:right"` — move the column left or right
+- `"delete-column"` — delete the column
+
+### `rowShape.menu`
+
+- `"set-edit"` — rename the row
+- `"move-row:up"`, `"move-row:down"` — move the row up or down
+- `"delete-row"` — delete the row
+
+Set `menu.items` to a function to render a different menu per card, column, or row. Return `null` or `false` from the function to hide the menu for a specific item.
+
+The following demo applies a custom context menu:
+
+<iframe src="https://snippet.dhtmlx.com/8eo65gr5?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
-- an order of controls arrangement
-- a searchbar and its behaviour
-- a sort control and its behaviour
-- a custom control and its behaviour  
+## Custom column headers
+
+The [`columnShape`](api/config/js_kanban_columnshape_config.md) property provides templates and behavior for column headers:
+
+- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md) — HTML template of the column header in the expanded state
+- [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — HTML template of the column header in the collapsed state
+- [`columnShape.fixedHeaders`](api/config/js_kanban_columnshape_config.md) — freeze column headers during vertical scroll (default: `true`)
+
+The following code snippet sets a custom header template with a collapse icon, label with card count, and menu trigger:
+
+~~~jsx {5-21}
+new kanban.Kanban("#root", {
+    columns,
+    cards,
+    columnShape: {
+        headerTemplate: kanban.template(column => `
+            <div class="wx-collapse-icon" data-action="collapse">
+                <i class="${column.column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}"></i>
+            </div>
+            ${!column.column.collapsed
+                ? `<div class="wx-label" data-action="rename">
+                       ${column.column.label} (${column.columnState.cardsCount})
+                   </div>
+                   <div class="wx-menu" data-menu-id="${column.id}">
+                       <i class="wxi-dots-h"></i>
+                   </div>`
+                : ""}
+        `),
+        collapsedTemplate: kanban.template(column => `
+            <div class="wx-collapsed-label">${column.column.label}</div>
+        `)
+    }
+});
+~~~
+
+:::tip
+For `fixedHeaders` to take effect, set a fixed height on the Kanban container so the board scrolls vertically.
+:::
+
+## Conditional CSS classes
+
+To apply a CSS class conditionally, pass a function to the `css` parameter of [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md), or [`rowShape`](api/config/js_kanban_rowshape_config.md). The function returns a class name based on the current data:
+
+- [`cardShape.css: (card) => string`](api/config/js_kanban_cardshape_config.md) — class applied to a card
+- [`columnShape.css: (column, cards) => string`](api/config/js_kanban_columnshape_config.md) — class applied to a column
+- [`rowShape.css: (row, cards) => string`](api/config/js_kanban_rowshape_config.md) — class applied to a row
+
+The following code snippet highlights overdue cards and underloaded columns:
+
+~~~jsx {5,8}
+new kanban.Kanban("#root", {
+    columns,
+    cards,
+    cardShape: {
+        css: (card) => card.end_date < new Date() ? "overdue" : ""
+    },
+    columnShape: {
+        css: (column, cards) => cards.length < 5 ? "low-load" : ""
+    }
+});
+~~~
+
+## Custom Toolbar
+
+Use the [`items`](api/config/toolbar_items_config.md) property to customize the Toolbar structure. The array defines which controls appear, their order, and their behavior. An entry can be:
+
+- a built-in control: `"search"`, `"sort"`, `"undo"`, `"redo"`, `"addColumn"`, `"addRow"`, `"spacer"`
+- an object that overrides the searchbar or sort control with custom options
+- a custom control passed as a string identifier or a function
+
+The following demo customizes the order of controls, the searchbar, the sort control, and a custom control:
 
 <iframe src="https://snippet.dhtmlx.com/s5r5h4ju?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 ## Custom styles
 
-You can customize the appearance of Kanban by changing values of the corresponding *CSS variables*. Refer to the [**Stylization**](guides/stylization.md) section for details.
+Change the values of CSS variables to customize the Kanban appearance. See the [Stylization](guides/stylization.md) section for the full list.
 
-In this snippet you can see how to apply custom styles to Kanban:
+The following snippet applies custom styles to Kanban:
 
 <iframe src="https://snippet.dhtmlx.com/oj18xwb5?mode=html&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/guides/initialization.md

@@ -6,49 +6,51 @@ description: You can learn about the initialization in the documentation of the
 
 # Initialization
 
-This guide will give you detailed instructions on how to create Kanban on a page to enrich your application with features of the Kanban board. Take the following steps to get a ready-to-use component:
+Create a Kanban widget on a page in three steps:
 
-1. [Include the Kanban source files on a page](#including-source-files).
-2. [Create a container for Kanban](#creating-container).
-3. [Initialize Kanban with a constructor](#initializing-kanban).
+1. [Include source files](#include-source-files).
+2. [Create a container](#create-a-container).
+3. [Initialize Kanban](#initialize-kanban).
 
-## Including source files
+## Include source files
 
-[Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack it into a folder of your project.
+[Download the package](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and unpack the contents into a folder of your project.
 
-To create Kanban, you need to include 2 source files on your page:
+Include the following source files on your page:
 
 - *kanban.js*
 - *kanban.css*
 
-Make sure that you set correct relative paths to the source files:
+Set correct relative paths to both files:
 
 ~~~html title="index.html"
 <script type="text/javascript" src="./dist/kanban.js"></script>  
 <link rel="stylesheet" href="./dist/kanban.css">
 ~~~
 
-## Creating container
+## Create a container
 
-Add a container for Kanban and give it an ID, for example *"root"*:
+Add a container for Kanban and assign an ID, for example `root`:
 
 ~~~jsx title="index.html"
 <div id="root"></div>
 ~~~
 
-If you want to create the widget along with its *Toolbar*, you need to add a separate container for it:
+To create the widget with a Toolbar, add a separate container for the Toolbar:
 
 ~~~jsx {1} title="index.html"
 <div id="toolbar"></div> // container for Toolbar
 <div id="root"></div> // container for Kanban
 ~~~
 
-## Initializing Kanban
+## Initialize Kanban
 
-Initialize Kanban with the **kanban.Kanban** constructor. It takes two parameters:
+Initialize Kanban with the `kanban.Kanban` constructor. The constructor takes two parameters:
 
-- an HTML container (the ID of the HTML container)
-- an object with configuration properties. [See the full list here](#configuration-properties)
+- a CSS selector for the HTML container (or the container element itself)
+- a configuration object (see the [full list of properties](#configuration-properties))
+
+The following code snippet creates a Kanban instance:
 
 ~~~jsx title="index.html"
 // create Kanban
@@ -57,35 +59,33 @@ new kanban.Kanban("#root", {
 });
 ~~~
 
-If you want to create the widget along with its *Toolbar*, you need to initialize it separately using the **kanban.Toolbar** constructor. It also takes two parameters:
-
-- an HTML container (the ID of the HTML container)
-- an object with configuration properties
+To create the widget with a Toolbar, initialize the Toolbar separately with the `kanban.Toolbar` constructor. The Toolbar controls operate on the Kanban instance through the [`api`](api/config/toolbar_api_config.md) parameter. Pass `board.api` to bind the Toolbar to the board:
 
-~~~jsx {6-8} title="index.html"
+~~~jsx {7} title="index.html"
 // create Kanban
 const board = new kanban.Kanban("#root", {
     // configuration properties
 });
 
 new kanban.Toolbar("#toolbar", {
-    // configuration properties
+    api: board.api, // required: links Toolbar controls to the Kanban instance
+    // other configuration properties
 });
 ~~~
 
 :::info
-To learn more about configuring the Toolbar of Kanban, read the [**Configuration**](guides/configuration.md/#toolbar) section
+For details on configuring the Toolbar, read the [Configuration](guides/configuration.md#toolbar) section.
 :::
 
 ### Configuration properties
 
-:::note
-The full list of properties to configure **Kanban** can be found [**here**](api/overview/properties_overview.md). <br/> 
-The full list of properties to configure **Toolbar of Kanban** can be found [**here**](api/overview/toolbar_properties_overview.md).
-:::
+For the full configuration reference:
+
+- [Kanban properties overview](api/overview/properties_overview.md) — all Kanban configuration properties
+- [Toolbar properties overview](api/overview/toolbar_properties_overview.md) — all Toolbar configuration properties
 
 ## Example
 
-In this snippet you can see how to initialize **Kanban** with the initial data:
+The following snippet initializes Kanban with sample data:
 
 <iframe src="https://snippet.dhtmlx.com/gb50vyip?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>

docs/guides/integration.md

@@ -6,12 +6,20 @@ description: You can learn about the integration in the documentation of the DHT
 
 # Integration with DHTMLX widgets
 
-You can integrate DHTMLX Kanban with other DHTMLX widgets (for instance, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Check the examples below.
+You can integrate DHTMLX Kanban with other DHTMLX widgets, including:
 
-## Integration with DHTMLX Gantt and Scheduler
+- [Gantt](https://docs.dhtmlx.com/gantt/)
+- [Scheduler](https://docs.dhtmlx.com/scheduler/)
+- [To Do List](https://docs.dhtmlx.com/todolist/)
+
+## Gantt and Scheduler
+
+The following demo embeds a Kanban board alongside Gantt and Scheduler views:
 
 <iframe src="https://snippet.dhtmlx.com/i7j5668s?mode=result&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="700"></iframe>
 
-## Integration with DHTMLX To Do List
+## To Do List
+
+The following demo embeds a Kanban board alongside a To Do List:
 
 <iframe src="https://snippet.dhtmlx.com/id05kedo?mode=result&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="750"></iframe>