### Install Salesforce CLI

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Installs the Salesforce CLI globally using npm and verifies the installation by checking the version.

```bash
npm install --global @salesforce/cli
sf --version
```

--------------------------------

### Store Configuration Example

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Shows how to configure various stores including resource, event, dependency, assignment, and calendar stores with their respective data.

```javascript
{
    resourceStore: new ResourceStore({ data }),
    eventStore: new EventStore({ data }),
    dependencyStore: new DependencyStore({ data }),
    assignmentStore: new AssignmentStore({ data }),
    calendarStore: new CalendarStore({ data })
}
```

--------------------------------

### Grid Component Bundle Structure

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example file structure for a Bryntum Grid LWC component.

```text
lwc/grid_component/
├── grid_component.js
├── grid_component.html
├── grid_component.css
└── grid_component.js-meta.xml
```

--------------------------------

### Feature Configuration Example

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Demonstrates how to enable and configure specific features for a widget, such as cell editing, dependencies, event dragging, filtering, and grouping.

```javascript
features: {
    cellEdit: { /* config */ },
    dependencies: { /* config */ },
    eventDrag: { /* config */ },
    filter: true,
    group: { /* config */ },
    // ... more features
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Installs all necessary project dependencies, including linters, formatters, testing tools, and git hooks, using npm.

```bash
npm install
```

--------------------------------

### Responsive Configuration Pattern

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Provides an example of component configuration properties related to sizing and layout, such as dates, row height, and flex.

```javascript
{
    startDate: new Date(2025, 0, 1),
    endDate: new Date(2025, 0, 31),
    rowHeight: 50,
    barMargin: 2,
    flex: 1
}
```

--------------------------------

### Dependency Management: Import Dependencies

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Example of importing necessary modules and mixins for component development.

```javascript
import TaskModelMixin from './lib/Task.js';
import WidgetInitializer from './lib/WidgetInitializer.js';
```

--------------------------------

### Install Bryntum Packages via npm

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Install the necessary Bryntum product packages using npm. These are required for integrating Bryntum components into your Salesforce LWC.

```bash
npm install --save @bryntum/grid
npm install --save @bryntum/scheduler
npm install --save @bryntum/schedulerpro
npm install --save @bryntum/gantt
npm install --save @bryntum/taskboard
npm install --save @bryntum/calendar
```

--------------------------------

### Calendar Component Bundle Structure

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example file structure for a Bryntum Calendar LWC component, including a data subdirectory.

```text
lwc/calendar_component/
├── calendar_component.js
├── calendar_component.html
├── calendar_component.css
├── calendar_component.js-meta.xml
└── data/
    └── data.js                  # Component data
```

--------------------------------

### Create a Jest Test File

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Example of a Jest test file for a LWC component. It includes setup for cleaning the DOM after each test and a basic test case for rendering.

```javascript
import { createElement } from 'lwc';
import MyComponent from 'c/my_bryntum_component';

describe('my_bryntum_component', () => {
    afterEach(() => {
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('renders without error', () => {
        const element = createElement('c-my-bryntum-component', {
            is: MyComponent
        });
        document.body.appendChild(element);
        expect(element).toBeDefined();
    });
});
```

--------------------------------

### Gantt Toolbar: Accessing and Using Toolbar Instance

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/10-gantt-toolbar.md

Demonstrates how to access the Gantt toolbar instance and use its methods, such as `onFilterChange`. Also shows how to get the Gantt instance from the toolbar.

```javascript
const toolbar = gantt.tbar;
toolbar.onFilterChange({ value: 'search text' });
toolbar.gantt // Get gantt instance
```

--------------------------------

### Deploy Salesforce Project with SF CLI

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Commands to deploy components to a Salesforce org using the Salesforce CLI. Use 'sf project deploy start' for full deployments or specify source directories for targeted deployments.

```bash
sf project deploy start
```

```bash
sf project deploy start --source-dir force-app/main/default/lwc/grid_component
```

```bash
sf project deploy start --source-dir force-app/main/default/staticresources/bryntum_grid
```

```bash
sf project deploy start --dry-run
```

--------------------------------

### CSS Theme Variables

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Example CSS variables provided by Bryntum theme stylesheets. These can be used to customize the appearance of components.

```css
--b-font-family
--b-font-size
--b-border-color
--b-background-color
--b-highlight-color
```

--------------------------------

### Accessing Calendar Properties Globally

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/04-calendar-component.md

Shows examples of accessing various properties of the globally available calendar instance from the console.

```javascript
window.calendar.mode
window.calendar.date
window.calendar.crudManager.eventStore
window.calendar.crudManager.resourceStore
```

--------------------------------

### Data Structure for CRUD Manager

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Example structure for data compatible with Bryntum's CRUD Manager, including events, resources, and dependencies.

```json
{
    "events": [ { "id", "name", ... }, ... ],        // or tasks
    "resources": [ { "id", "name", ... }, ... ],
    "dependencies": [ { "fromId", "toId", ... }, ... ],
    "calendars": [ { "id", "name", ... }, ... ]
}
```

--------------------------------

### Set Bryntum Locale

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Examples of setting the locale for Bryntum components. This affects language and formatting for dates, numbers, etc.

```javascript
gantt.locale = 'es'; // Spanish
gantt.locale = 'de'; // German
gantt.locale = 'fr'; // French
```

--------------------------------

### LWC Theme Integration with CSS Variables

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example of integrating Bryntum component styles with Salesforce LWC theme variables for consistent branding.

```css
:host {
    --b-color-primary: var(--lwc-colorBrand);
    --b-font-family: var(--lwc-fontFamily);
}
```

--------------------------------

### GitHub Actions CI/CD Deployment Workflow

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

This YAML file defines a GitHub Actions workflow for deploying the Salesforce project. It checks out the code, sets up Node.js, installs dependencies, lints the code, runs unit tests, and deploys to a Salesforce organization using the Salesforce CLI.

```yaml
name: Deploy to Salesforce
on: [push]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
      - name: Install dependencies
        run: npm install
      - name: Lint code
        run: npm run lint
      - name: Run tests
        run: npm run test:unit
      - name: Deploy to org
        run: sf project deploy start --target-org $ORG_USERNAME
        env:
          SFDX_CLIENT_ID: ${{ secrets.SFDX_CLIENT_ID }}
          SFDX_CLIENT_SECRET: ${{ secrets.SFDX_CLIENT_SECRET }}
```

--------------------------------

### Task Data Structure Example

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/07-taskboard-component.md

Defines the expected structure for task data, including required fields like id and name, and optional fields for status, priority, and resources.

```javascript
{
    tasks: {
        rows: [
            {
                id: string,
                name: string,
                status: 'todo' | 'doing' | 'done',
                prio: 'high' | 'medium' | 'low',
                resources: string[], // resource IDs
                color: string, // optional card color
                percentage: number, // optional completion %
                // additional properties
            },
            // more tasks
        ]
    }
}
```

--------------------------------

### Create Salesforce Scratch Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Create a new scratch org with the specified configuration and assign it an alias. Replace 'bryntum-demo' with your desired alias.

```shell
sf org create scratch -d -f config/project-scratch-def.json -a bryntum-demo
```

--------------------------------

### Run Jest Unit Tests in Watch Mode

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Starts Jest in watch mode, which automatically re-runs tests when code changes are detected. Ideal for development to get rapid feedback.

```bash
npm run test:unit:watch
```

--------------------------------

### Project Structure Overview

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/01-project-overview.md

Illustrates the directory structure of the Bryntum Salesforce Showcase project, highlighting key configuration, LWC, static resource, and manifest files.

```tree
bryntum-salesforce-showcase/
├── config/
│   └── project-scratch-def.json       # Scratch org configuration
├── force-app/main/default/
│   ├── classes/                       # Apex backend classes
│   ├── lwc/                           # Lightning Web Components
│   │   ├── calendar_component/
│   │   ├── gantt_component/
│   │   ├── grid_component/
│   │   ├── grid_temp_demo/
│   │   ├── scheduler_component/
│   │   ├── scheduler_drag_from_grid/
│   │   ├── schedulerpro_component/
│   │   ├── schedulerpro_temp_demo/
│   │   └── taskboard_component/
│   ├── staticresources/               # Bryntum bundle resources
│   ├── digitalExperiences/            # DX site configuration
│   ├── pages/                         # Visualforce pages
│   ├── permissionsets/                # Permission sets
│   └── tabs/                          # Custom tabs
├── manifest/
│   └── package.xml                    # Salesforce deployment manifest
├── package.json                       # Node dependencies
└── README.md                          # Setup documentation
```

--------------------------------

### SchedulerPro Global References

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/08-schedulerpro-component.md

Illustrates how to instantiate and reference core Bryntum components like ProjectModel, Timeline, and SchedulerPro.

```javascript
// No explicit global assignment in createScheduler()
// But accessible within LWC scope
const project = new ProjectModel();
const timeline = new Timeline({ /* config */ });
const scheduler = new SchedulerPro({ /* config */ });
```

--------------------------------

### Prepare Bryntum Grid Bundle Files

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Copy the required Bryntum Grid files from the downloaded bundle to your Salesforce project. These files include the LWC module, CSS, and assets.

```bash
# Extract/copy from Bryntum source
# Needed files:
# - grid.lwc.module.js (or grid.bundle.js compiled for LWC)
# - grid.css
# - svalbard-light.css
# - fontawesome/ directory (or icons.ttf)
```

--------------------------------

### Store Configuration Pattern

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Demonstrates how to configure various data stores (Resource, Event, Dependency) with custom data and model classes.

```javascript
{
    resourceStore: new ResourceStore({
        data: resources,
        modelClass: CustomResourceModel
    }),
    eventStore: new EventStore({
        data: events,
        storeClass: CustomEventStore
    }),
    dependencyStore: new DependencyStore({
        data: dependencies
    })
}
```

--------------------------------

### SchedulerPro Error Handling

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/08-schedulerpro-component.md

Provides an example of catching errors during resource loading and displaying them using a toast notification.

```javascript
.catch(error => {
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Error loading Bryntum Scheduler Pro',
            message: error,
            variant: 'error'
        })
    );
});
```

--------------------------------

### Open Salesforce Scratch Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Opens the specified Salesforce scratch org in a web browser. Provides instructions on how to access the Bryntum Demo app.

```bash
sf org open --target-org bryntum-demo
```

--------------------------------

### Instantiate CommunitiesLandingController

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/02-apex-controller.md

Demonstrates how to create an instance of the CommunitiesLandingController.

```apex
CommunitiesLandingController controller = new CommunitiesLandingController();
```

--------------------------------

### Jest Unit Test for LWC

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example of a Jest unit test for an LWC component. It verifies that the component can be rendered and attached to the DOM.

```javascript
import { createElement } from 'lwc';
import GridComponent from 'c/grid_component';

describe('grid_component', () => {
    it('renders', () => {
        const element = createElement('c-grid-component', {
            is: GridComponent
        });
        document.body.appendChild(element);
        expect(element).toBeDefined();
    });
});
```

--------------------------------

### Create ProjectModel

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/14-data-models-and-stores.md

Initialize a ProjectModel to act as a container for multiple data stores like tasks, resources, and dependencies.

```javascript
const project = new bryntum.gantt.ProjectModel({
    taskModelClass: TaskModel,
    calendar: calendarDefinition,
    startDate: new Date(2025, 0, 1),
    tasks: tasksData,
    resources: resourcesData,
    assignments: assignmentsData,
    dependencies: dependenciesData,
    calendars: calendarsData
});
```

--------------------------------

### Instantiate TaskBoard Component

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/07-taskboard-component.md

Create a new TaskBoard instance and make it available globally for easy access.

```javascript
const taskboard = new bryntum.taskboard.TaskBoard({ /* config */ })
```

```javascript
window.taskboard
window.taskboard.project
window.taskboard.project.taskStore
```

--------------------------------

### CommunitiesLandingController

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/02-apex-controller.md

Manages landing page navigation for community users. It redirects users to the appropriate start page based on their authentication status.

```APIDOC
## CommunitiesLandingController

### Description
Manages landing page navigation for community users. It redirects users to the appropriate start page based on their authentication status. This controller serves as the entry point for the Bryntum Salesforce Community site.

### Constructor

#### `public CommunitiesLandingController()`

**Description:** Default constructor with no parameters.

**Access Level:** public

### Methods

#### `public PageReference forwardToStartPage()`

### Description
Invoked on page load. Returns a `PageReference` to the Salesforce community landing page using the `Network.communitiesLanding()` method. This automatically redirects authenticated users to the community home page and unauthenticated users to the login page.

### Method
public

### Returns
`PageReference` - Redirect reference to the community landing page.

### Usage Example
```apex
CommunitiesLandingController controller = new CommunitiesLandingController();
PageReference landingPage = controller.forwardToStartPage();

if (landingPage != null) {
    return landingPage;
}
```

### Implementation Details
- Uses Salesforce Network API for community-aware redirection.
- Handles both authenticated and unauthenticated states.
- Works with Digital Experience (DX) communities.

### Error Handling
The method does not throw exceptions. If the network context is invalid, Salesforce's platform will handle the redirection gracefully by returning to the default organization home page.
```

--------------------------------

### Bryntum Static Resource File Structure

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Illustrates the typical file structure within a Bryntum static resource bundle.

```text
bryntum_[product]/
├── [product].lwc.module.js      # Main module bundle
├── [product].css                # Component styles
├── svalbard-light.css           # Light theme
├── fontawesome/
│   └── css/
│       ├── fontawesome.css      # FontAwesome base
│       └── solid.css            # FontAwesome solid icons
└── [product]/                   # (sometimes present)
    └── [additional files]       # Locale, fonts, etc.
```

--------------------------------

### Enable Digital Experience

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Opens the scratch org and manually enables Digital Experience. Alternatively, creates a DigitalExperienceBundle record via the API after manual enablement.

```bash
sf org open --target-org bryntum-demo
# Manually enable in Setup > Digital Experience

# Or using API (after enabling manually once):
sf data create record --sobject DigitalExperienceBundle --values Name=Demo --target-org bryntum-demo
```

--------------------------------

### StatusColumn Usage in Grid Configuration

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/03-grid-component.md

Example of how to use the custom 'status' column type within the Bryntum Grid's column configuration.

```javascript
{
    type: 'status',
    text: 'Custom rendering',
    width: 160
}
```

--------------------------------

### Loading CRUD Manager Data

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/04-calendar-component.md

Loads event and resource data into the calendar's CRUD manager, typically after initial component setup.

```javascript
calendar.crudManager.loadCrudManagerData(data).then(() => {});
```

--------------------------------

### createTaskBoard() Method

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/07-taskboard-component.md

A private method responsible for creating and configuring the Bryntum TaskBoard instance. It sets up the project, columns, and swimlanes.

```javascript
createTaskBoard()
```

--------------------------------

### Deploy Application to Scratch Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Push the application code and configurations to your Salesforce scratch org.

```shell
sf project deploy start
```

--------------------------------

### Forward to Community Landing Page

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/02-apex-controller.md

Invokes the forwardToStartPage method to get a PageReference for community redirection. This method handles both authenticated and unauthenticated user states.

```apex
CommunitiesLandingController controller = new CommunitiesLandingController();
PageReference landingPage = controller.forwardToStartPage();

// The page reference can be used in a Visualforce page controller
if (landingPage != null) {
    // Redirect happens automatically in page context
    return landingPage;
}
```

--------------------------------

### Import TaskBoard Classes

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Import the main TaskBoard class and ProjectModel for managing task data within the Bryntum TaskBoard component.

```javascript
const { TaskBoard, ProjectModel } = bryntum.taskboard;
```

--------------------------------

### Use Salesforce Localization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example of using the L() function within an LWC to access localized strings based on the Salesforce org's locale settings.

```javascript
this.L('string_key') // Uses Salesforce locale
```

--------------------------------

### createGrid Method

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/03-grid-component.md

Initializes and configures the Bryntum Grid instance. This private method sets up custom columns, data stores, and features for the grid.

```javascript
createGrid()
```

--------------------------------

### Type Checking and Validation: Field Definitions

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Provides examples of defining fields for a model, including simple string names and more complex objects with specified types.

```javascript
fields: [
    'name',
    'description',
    { name: 'status', type: 'string' },
    { name: 'duration', type: 'number' },
    { name: 'startDate', type: 'date' },
    { name: 'active', type: 'boolean' }
]
```

--------------------------------

### Deploy Component to Salesforce

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Deploys the newly created Bryntum LWC component to your Salesforce org using the Salesforce CLI.

```bash
sf project deploy start --source-dir force-app/main/default/lwc/my_bryntum_component
```

--------------------------------

### Access LWC Design Tokens

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example of accessing Salesforce Lightning Web Components (LWC) design tokens for theming. These tokens provide standardized styling variables.

```javascript
// Access Salesforce design tokens
var(--lwc-colorBrand)
var(--lwc-colorBackgroundPrimary)
var(--lwc-colorTextDefault)
var(--lwc-fontFamily)
```

--------------------------------

### Create DependencyStore

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/14-data-models-and-stores.md

Instantiate a DependencyStore to manage task dependency data. Requires a model class and initial data.

```javascript
const dependencyStore = new bryntum.scheduler.DependencyStore({
    modelClass: DependencyModel,
    data: [ /* dependencies */ ]
});
```

--------------------------------

### Custom Theming with CSS Variables

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example of overriding Bryntum CSS custom properties within a component's CSS. It shows how to use LWC design tokens as fallbacks.

```css
:host {
    --b-color-primary: var(--lwc-colorBrand, #0066cc);
    --b-color-secondary: #999999;
}
```

--------------------------------

### Clone Bryntum Salesforce Showcase Repository

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Clone the showcase repository to your local machine and navigate into the directory.

```shell
git clone https://github.com/bryntum/bryntum-salesforce-showcase
cd bryntum-salesforce-showcase
```

--------------------------------

### Salesforce Custom Tab Definition

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

XML metadata definition for a custom tab in Salesforce. This example shows a tab for the Bryntum Grid component, specifying its label, description, and associated object.

```xml
<CustomTab xmlns="http://soap.sforce.com/2006/04/metadata">
    <customObject>false</customObject>
    <description>Bryntum Grid Demo Tab</description>
    <label>Bryntum Grid</label>
    <mobileReady>false</mobileReady>
    <motif>Custom59: Bryntum Icon</motif>
    <sObjectName>grid_component</sObjectName>
</CustomTab>
```

--------------------------------

### Promise.all() for Resource Loading

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Loads multiple Bryntum resources in parallel using Promise.all for efficient initialization.

```javascript
Promise.all([
    loadScript(this, RESOURCE + '/[product].lwc.module.js'),
    loadStyle(this, RESOURCE + '/[product].css'),
    loadStyle(this, RESOURCE + '/svalbard-light.css'),
    loadStyle(this, RESOURCE + '/fontawesome/css/fontawesome.css'),
    loadStyle(this, RESOURCE + '/fontawesome/css/solid.css')
]).then(() => {
    // All resources loaded
    this.createWidget();
}).catch(error => {
    // Handle loading error
});
```

--------------------------------

### ResourceStore Initialization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/05-scheduler-component.md

Initializes the ResourceStore with data imported from './data.js'. The data should be an array of resource objects.

```javascript
resourceStore: new ResourceStore({
    data: resources
})
```

--------------------------------

### Apex Class with Sharing

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Example of an Apex class declaration using the 'with sharing' keyword in Salesforce. This ensures the class respects the running user's object and field-level security settings.

```apex
public with sharing class CommunitiesLandingController
```

--------------------------------

### ProjectModel Initialization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/07-taskboard-component.md

Initializes the Bryntum ProjectModel with task data. The 'tasks' property should be an array of task objects, each with an 'id', 'name', 'status', 'prio', and 'resources'.

```javascript
const project = new bryntum.taskboard.ProjectModel({
    tasks: data.tasks.rows
})
```

--------------------------------

### Create Salesforce Static Resource Directory for Bryntum Grid

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Create the directory structure for the Bryntum Grid static resource in your Salesforce project and copy the prepared bundle files into it.

```bash
mkdir -p force-app/main/default/staticresources/bryntum_grid
cp grid.lwc.module.js force-app/main/default/staticresources/bryntum_grid/
cp grid.css force-app/main/default/staticresources/bryntum_grid/
cp svalbard-light.css force-app/main/default/staticresources/bryntum_grid/
cp -r fontawesome force-app/main/default/staticresources/bryntum_grid/
```

--------------------------------

### Deploy to Production Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Command to deploy project components to a Salesforce production environment. Use the '--target-org production' flag to specify the destination.

```bash
sf project deploy start --target-org production
```

--------------------------------

### Create ResourceStore

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/14-data-models-and-stores.md

Instantiate a ResourceStore to manage resource data. Similar creation process to EventStore.

```javascript
const resourceStore = new bryntum.scheduler.ResourceStore({
    modelClass: ResourceModel,
    data: [ /* resources */ ]
});
```

--------------------------------

### LWC Component Initialization Structure

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Standard structure for Bryntum LWC components, including imports and lifecycle hooks.

```javascript
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import BRYNTUM_RESOURCE from '@salesforce/resourceUrl/bryntum_[product]';
import { data } from './data[.js]';

export default class [ProductName]_component extends LightningElement {
    bryntumInitialized = false;
    
    renderedCallback() {
        // Initialization logic
    }
    
    create[ProductName]() {
        // Configuration logic
    }
}
```

--------------------------------

### Create Salesforce Scratch Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Command to create a new Salesforce scratch org using a specified definition file and assigning an alias.

```bash
sf org create scratch -f config/project-scratch-def.json -a bryntum-demo
```

--------------------------------

### Salesforce Project File Structure

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Illustrates a typical file organization for a Salesforce project utilizing Bryntum components. This structure helps in managing LWC components, static resources, and configuration files.

```plaintext
bryntum-salesforce-showcase/
├── config/
│   └── project-scratch-def.json           # Org definition
├── force-app/main/default/
│   ├── classes/                           # Apex (1 controller)
│   ├── lwc/                               # LWC components (9 total)
│   ├── staticresources/                   # Bryntum bundles (6 resources)
│   ├── digitalExperiences/                # Community site
│   ├── pages/                             # Visualforce
│   ├── permissionsets/                    # Permission sets
│   └── tabs/                              # Custom tabs
├── manifest/
│   └── package.xml                        # Deployment manifest
├── package.json                           # Node dependencies
├── README.md                              # Setup documentation
└── jest.config.js                         # Jest configuration
```

--------------------------------

### Mixin Pattern: Base Class and Chained Initialization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Illustrates how to use mixins to extend base classes, either directly for a base class or chained for more complex store configurations.

```javascript
// Base class
const Task = TaskMixin(EventModel);

// Or chained
const TaskStore = TaskStoreMixin(EventStore, Task);
```

--------------------------------

### Generate Component Structure

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Creates the necessary directory and base files for a new LWC component.

```bash
# Create component directory
mkdir -p force-app/main/default/lwc/my_bryntum_component

# Create base files
touch force-app/main/default/lwc/my_bryntum_component/my_bryntum_component.js
touch force-app/main/default/lwc/my_bryntum_component/my_bryntum_component.html
touch force-app/main/default/lwc/my_bryntum_component/my_bryntum_component.css
touch force-app/main/default/lwc/my_bryntum_component/my_bryntum_component.js-meta.xml
```

--------------------------------

### Instantiate Calendar Widget

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Import the Calendar class and create a new Calendar instance. Configuration options should be passed to the constructor.

```javascript
const { Calendar } = bryntum.calendar;
const calendar = new Calendar({ /* config */ });
```

--------------------------------

### createCalendar() Method

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/04-calendar-component.md

Initializes and configures the Bryntum Calendar instance, setting up its core features and data management.

```javascript
createCalendar() {
    const calendar = window.calendar = new bryntum.calendar.Calendar({
        // Calendar config
        appendTo: this.template.querySelector('.bryntum-root-element'),
        flex: 1,
        date: new Date(2020, 9, 12),
        mode: 'week',
        crudManager: {
            autoLoad: true,
            transport: {
                load: {
                    url: './data/data.js'
                }
            }
        },
        // Sidebar config
        sidebar: {
            items: {
                datePicker: {
                    highlightSelectedWeek: true
                },
                compactHeader: {
                    weight: 100,
                    type: 'slidetoggle',
                    text: 'Show compact header',
                    onChange: 'up.onToggleCompactHeader'
                }
            }
        },
        // Features config
        features: {
            eventTooltip: {
                align: 'l-r'
            }
        },
        // Event handlers
        // ... other configs
    });

    // Load initial data
    calendar.crudManager.loadCrudManagerData(data);
}
```

--------------------------------

### Enable TaskBoard Features

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/07-taskboard-component.md

Configure core features like column and swimlane dragging by setting boolean values.

```javascript
features: {
    columnDrag: true,
    swimlaneDrag: true
}
```

--------------------------------

### TaskBoard Component Exports

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Provides methods for initializing and managing the TaskBoard component.

```APIDOC
## TaskBoard Component Exports

### Description
Provides methods for initializing and managing the TaskBoard component.

### Class
`Taskboard_component`

### Methods
- `renderedCallback()` - Initialize on render
- `createTaskBoard()` - Create TaskBoard instance
```

--------------------------------

### Resource Loading Implementation Pattern

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Loads Bryntum JavaScript and CSS resources using loadScript and loadStyle, then creates the widget.

```javascript
Promise.all([
    loadScript(this, RESOURCE + '/module.js'),
    loadStyle(this, RESOURCE + '/style.css'),
    loadStyle(this, RESOURCE + '/theme.css'),
    // Additional style loads
]).then(() => {
    this.createWidget();
}).catch(error => {
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Error loading [Widget]',
            message: error,
            variant: 'error'
        })
    );
});
```

--------------------------------

### Access Bryntum Global Namespace

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Accessing Bryntum core functionalities and product-specific namespaces via the window object.

```javascript
window.bryntum
```

--------------------------------

### Console Logging for Debugging

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Demonstrates how to use console.log to inspect Bryntum component versions and data within the Salesforce environment. Accessing global instances like 'window.grid' is key.

```javascript
console.log('Bryntum Version:', bryntum.getVersion('core'));
console.log('Store Data:', window.grid.store.data);
```

--------------------------------

### Open Scratch Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Opens the Salesforce scratch org in your default web browser.

```shell
sf org open
```

--------------------------------

### Global Instance Pattern: Making Instance Available

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Exposes a Bryntum component instance globally via the window object for easy access. Useful for debugging or direct manipulation.

```javascript
window.grid = new bryntum.grid.Grid({ /* config */ })
```

--------------------------------

### Dependency Management: Lazy Initialization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Demonstrates initializing custom widgets before creating the main component and then using registered types in the configuration.

```javascript
// Initialize custom widgets before creating main widget
initWidgets();

// Then create widget using registered types
const gantt = new bryntum.gantt.Gantt({
    tbar: { type: 'gantttoolbar' }
});
```

--------------------------------

### ProjectModel Creation with Custom Task Model

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/06-gantt-component.md

Initializes the Bryntum ProjectModel, specifying a custom task model class that includes mixins for enhanced functionality. It configures the project with tasks, resources, assignments, dependencies, and calendars from provided data.

```javascript
const project = new bryntum.gantt.ProjectModel({
    taskModelClass: TaskModelMixin(bryntum.gantt.TaskModel),
    calendar: data.project.calendar,
    startDate: data.project.startDate,
    tasks: data.tasks.rows,
    resources: data.resources.rows,
    assignments: data.assignments.rows,
    dependencies: data.dependencies.rows,
    calendars: data.calendars.rows
})
```

--------------------------------

### Class Extraction and Mixin Application

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/09-scheduler-drag-from-grid.md

Demonstrates how Bryntum classes are extracted and enhanced with custom mixins to create specialized components like Task, TaskStore, IconCombo, Schedule, UnplannedGrid, and Drag.

```javascript
const {
    Grid, Scheduler, EventModel, EventStore,
    ResourceModel, Splitter, Combo, DragHelper
} = bryntum.scheduler;

const Task = TaskMixin(EventModel);
const TaskStore = TaskStoreMixin(EventStore, Task);
const IconCombo = IconComboMixin(Combo);
const Schedule = ScheduleMixin(Scheduler);
const UnplannedGrid = UnplannedGridMixin(Grid);
const Drag = DragMixin(DragHelper);
```

--------------------------------

### Access Product-Specific Bryntum Namespaces

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Accessing specific Bryntum product classes like Grid, Scheduler, etc., through their respective namespaces.

```javascript
bryntum.grid              // Grid classes
bryntum.scheduler         // Scheduler classes
bryntum.schedulerpro      // SchedulerPro classes
bryntum.gantt             // Gantt classes
bryntum.calendar          // Calendar classes
bryntum.taskboard         // TaskBoard classes
```

--------------------------------

### Loading Resources in Salesforce

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Demonstrates how to import and load static resources like JavaScript and CSS files within a Salesforce component.

```javascript
import RESOURCE from '@salesforce/resourceUrl/[resource-name]';
loadScript(this, RESOURCE + '/path/to/file.js')
loadStyle(this, RESOURCE + '/path/to/file.css')
```

--------------------------------

### Use Bryntum Theme Variables

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Demonstrates the use of Bryntum's CSS custom properties for theming. These variables allow for consistent styling across Bryntum components.

```css
--b-color-primary
--b-color-secondary
--b-font-family
--b-font-size
```

--------------------------------

### Import Gantt Classes

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Import essential classes for the Bryntum Gantt component, including the Gantt chart itself, ProjectModel, and ResourceGrid.

```javascript
const { Gantt, ProjectModel, ResourceGrid } = bryntum.gantt;
```

--------------------------------

### Access Scheduler Stores and Features

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/05-scheduler-component.md

Demonstrates how to access the event store, resource store, and dependency features of the globally available Scheduler instance.

```javascript
window.scheduler.eventStore
window.scheduler.resourceStore
window.scheduler.features.dependencies
window.scheduler.eventStore.getAt(0)
```

--------------------------------

### Create AssignmentStore

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/14-data-models-and-stores.md

Instantiate an AssignmentStore for managing resource assignments to tasks, typically used in Gantt or SchedulerPro.

```javascript
const assignmentStore = new bryntum.gantt.AssignmentStore({
    modelClass: AssignmentModel,
    data: [ /* assignments */ ]
});
```

--------------------------------

### Create EventStore

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/14-data-models-and-stores.md

Instantiate an EventStore to manage event or task data. Requires a model class and initial data.

```javascript
const eventStore = new bryntum.scheduler.EventStore({
    modelClass: EventModel,
    data: [ /* events */ ]
});
```

--------------------------------

### Deploy Bryntum Grid Static Resource

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Uploads the configured static resource for the Bryntum Grid LWC to your Salesforce org. Ensure you are in the correct directory.

```shell
sf project deploy start --source-dir force-app/main/default/staticresources/bryntum_grid
```

--------------------------------

### Initialize ResourceGrid Component

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/06-gantt-component.md

Sets up the ResourceGrid view, including its columns, features, and toolbar. This is a secondary view, often lazy-loaded.

```javascript
new bryntum.gantt.ResourceGrid({
    appendTo: appendTo,
    project: project,
    flex: 1,
    hidden: true,
    columns: {
        data: {
            cost: { sum: 'sum' },
            name: {
                type: 'resourceInfo',
                showEventCount: false,
                width: 200
            },
            city: {
                text: 'City',
                field: 'city'
            }
        }
    },
    features: {
        group: { field: 'type' },
        groupSummary: { target: 'header' },
        resourceEdit: true
    },
    tbar: {
        type: 'resourcegridtoolbar',
        gantt: gantt
    }
})
```

--------------------------------

### EventStore Initialization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/05-scheduler-component.md

Initializes the EventStore with data imported from './data.js'. The data should be an array of event objects.

```javascript
eventStore: new EventStore({
    data: events
})
```

--------------------------------

### Import SchedulerPro Classes

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Import key classes for the Bryntum SchedulerPro component, such as the main SchedulerPro class, ProjectModel, and Timeline widget.

```javascript
const { SchedulerPro, ProjectModel, Timeline } = bryntum.schedulerpro;
```

--------------------------------

### Common Widget Configuration

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Illustrates a common pattern for configuring widgets with various properties like append target, flex, features, columns, store, toolbar, and listeners.

```javascript
new Widget({
    appendTo: Element,           // DOM element
    flex: number,                // Flex growth
    features: { /* ... */ },     // Enabled features
    columns: [],                 // Column definitions
    store: {},                   // Store config
    tbar: [],                    // Toolbar items
    listeners: {}                // Event listeners
})
```

--------------------------------

### Import Grid Classes

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Import necessary classes from the Bryntum Grid module for use in your LWC. Assumes the `bryntum.grid` global namespace is available.

```javascript
const { Grid, Column, DataGenerator } = bryntum.grid;
```

--------------------------------

### Calendar Initial State Configuration

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/04-calendar-component.md

Sets the initial properties for the Bryntum Calendar, including its container, size, date, and view mode.

```javascript
{
    appendTo: this.template.querySelector('.bryntum-root-element'),
    flex: 1,
    date: new Date(2020, 9, 12),
    mode: 'week',
    crudManager: {} 
}
```

--------------------------------

### DependencyStore Initialization

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/05-scheduler-component.md

Initializes the DependencyStore with data imported from './data.js'. This store defines relationships between events.

```javascript
dependencyStore: new DependencyStore({
    data: dependencies
})
```

--------------------------------

### Login to Salesforce Org

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Authorize your hub org and assign it an alias. Replace 'myorg' with your desired alias.

```shell
sf org login web -d -a myorg
```

--------------------------------

### Import Bryntum Static Resources in LWC

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Imports Bryntum static resources using the '@salesforce/resourceUrl' module for use in LWC.

```javascript
import GRID from '@salesforce/resourceUrl/bryntum_grid';
import CALENDAR from '@salesforce/resourceUrl/bryntum_calendar';
import SCHEDULER from '@salesforce/resourceUrl/bryntum_scheduler';
import SCHEDULERPRO from '@salesforce/resourceUrl/bryntum_schedulerpro';
import GANTT from '@salesforce/resourceUrl/bryntum_gantt';
import TASKBOARD from '@salesforce/resourceUrl/bryntum_taskboard';
```

--------------------------------

### Salesforce Project Structure for Deployment

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Defines the standard directory structure for a Salesforce project, highlighting locations for Apex classes, LWC, static resources, and other metadata types.

```bash
force-app/
└── main/
    └── default/
        ├── classes/                 # Apex
        ├── lwc/                     # Lightning Web Components
        ├── staticresources/         # Bryntum bundles
        ├── pages/                   # Visualforce (if needed)
        ├── permissionsets/          # Permission sets
        └── tabs/                    # Custom tabs
```

--------------------------------

### Component Composition Pattern: Parent Component

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Shows how to create and access child components (like Grid, Toolbar, Store) from a parent component's configuration or instance.

```javascript
// In createWidget()
const grid = new Grid({ config });
const toolbar = grid.tbar;
const store = grid.store;
```

--------------------------------

### Toolbar Configuration Pattern

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Shows how to define toolbar items, including buttons, text fields, and spacers, for component interfaces.

```javascript
tbar: [
    { type: 'button', text: 'Action', onAction: handler },
    { type: 'textfield', placeholder: 'Search' },
    '->',  // Spacer to push following items right
    { type: 'buttongroup', items: { /* buttons */ } }
]
```

--------------------------------

### Salesforce CLI Commands for Org Management

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Provides essential Salesforce CLI commands for logging into an org, creating scratch orgs, deploying code, and assigning permission sets.

```bash
sf org login web -d -a myorg
sf org create scratch -f config/project-scratch-def.json -a bryntum-demo
sf project deploy start
sf project deploy start --source-dir path/to/component
sf org permset assign -n bryntumdemo
sf org open
```

--------------------------------

### Schedule (Scheduler) Configuration

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/09-scheduler-drag-from-grid.md

Initializes the Bryntum Schedule component with specific configurations for date range, flex, and CRUD manager settings, including custom event and resource stores.

```javascript
let schedule = window.schedule = new Schedule({
    ref: 'schedule',
    appendTo: appendTo,
    startDate: new Date(2025, 11, 1, 8),
    endDate: new Date(2025, 11, 1, 18),
    flex: 4,
    crudManager: {
        autoLoad: true,
        validateResponse: true,
        eventStore: {
            storeClass: TaskStore
        },
        resourceStore: {
            modelClass: CustomResourceModel
        }
    },
    // ... toolbar and other config
})
```

--------------------------------

### Global Instance Pattern: Console Access

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Demonstrates how to access component properties and methods from the browser console when the instance is globally available.

```javascript
// In browser console
window.grid.store.data
window.grid.columns
window.grid.getSelectedRecords()
```

--------------------------------

### Assign Permission Set

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/README.md

Assign the 'bryntumdemo' permission set to the default user in the scratch org.

```shell
sf org permset assign -n bryntumdemo
```

--------------------------------

### Enable Digital Experience in Salesforce

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/13-salesforce-integration.md

Commands to enable Digital Experience (Community) features. This can be done by manually opening the org or using the Salesforce CLI to create a DigitalExperienceBundle record.

```bash
# Open org and enable manually
sf org open

# Or use API:
sf data create record -s DigitalExperienceBundle -v "Name=Demo" --org bryntum-demo
```

--------------------------------

### Global References for Bryntum Components

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/09-scheduler-drag-from-grid.md

Defines global references to the Scheduler instance (`window.schedule`), the UnplannedGrid instance (`window.unplanned`), and the container element (`window.appendTo`). These are useful for accessing components from the browser console or other scripts.

```javascript
window.schedule          // Scheduler instance
window.unplanned         // Grid instance
window.appendTo          // Container element
```

--------------------------------

### Timeline Widget Configuration

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/08-schedulerpro-component.md

Configures and instantiates the Bryntum Timeline widget. It requires a target DOM element for appending and a ProjectModel instance for data.

```javascript
const timeline = new Timeline({
    appendTo: appendTo,
    project: project,
    minHeight: '11em'
})
```

--------------------------------

### Component Composition Pattern: Access Patterns

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Illustrates navigating the widget tree to access nested components and their properties, such as accessing a toolbar's widget map.

```javascript
// Navigate widget tree
const toolbar = gantt.tbar;
const resources = gantt.resourceStore;
const menu = toolbar.widgetMap.settingsButton.menu;
```

--------------------------------

### Checking Bryntum Component Versions

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/12-static-resources.md

Logs the versions of different Bryntum components (core, grid, scheduler) to the console. Useful for debugging and ensuring compatibility.

```javascript
console.log(bryntum.getVersion('core'));     // Core version
console.log(bryntum.getVersion('grid'));     // Grid version
console.log(bryntum.getVersion('scheduler')); // Scheduler version
```

--------------------------------

### Task Model Mixin Usage

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/06-gantt-component.md

Demonstrates how to extend the default TaskModel with custom properties and methods using a provided mixin.

```javascript
const TaskModelClass = TaskModelMixin(bryntum.gantt.TaskModel)
```

--------------------------------

### Run Lighthouse Audits

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Initiates Lighthouse audits directly from the browser's developer tools. This is used to assess performance, accessibility, and other quality metrics.

```bash
# In browser:
# DevTools → Lighthouse
# Run audit for Performance, Accessibility, etc.
```

--------------------------------

### Create Derived Store with Chaining

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/14-data-models-and-stores.md

Create a derived store (e.g., todoStore) that filters data from a master store. Changes in the master propagate to the derived store.

```javascript
// Master store
const masterStore = new Store({ data: allTasks });

// Chained store (filtered by status)
const todoStore = new Store({
    source: masterStore,
    filters: [{ property: 'status', value: 'todo' }]
});
```

--------------------------------

### Bryntum Grid Static Resource Metadata File

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/15-development-guide.md

Define the metadata for the Bryntum Grid static resource. This XML file specifies caching, content type, and a description for the resource.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>public</cacheControl>
    <contentType>application/zip</contentType>
    <description>Bryntum Grid LWC module and styling</description>
</StaticResource>
```

--------------------------------

### Grid Component Exports

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/00-index.md

Provides methods for initializing and managing the Grid component.

```APIDOC
## Grid Component Exports

### Description
Provides methods for initializing and managing the Grid component.

### Class
`Grid_component`

### Methods
- `renderedCallback()` - Initialize on render
- `createGrid()` - Create Grid instance

### Custom Classes
- `StatusColumn extends Column` - Custom column with color coding
```

--------------------------------

### Feature Configuration Pattern

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Shows how to enable and configure features within a component's configuration object. Features can be enabled with defaults or customized.

```javascript
features: {
    featureName: {
        config1: value1,
        config2: value2,
        disabled: false
    },
    anotherFeature: true  // Enable with defaults
}
```

--------------------------------

### Column Configuration Pattern

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/11-lwc-lifecycle-and-patterns.md

Illustrates the structure for defining columns in a grid, including type, header text, field mapping, and width.

```javascript
columns: [
    {
        type: 'columnType',
        text: 'Column Header',
        field: 'fieldName',
        width: 100,
        // Additional config
    },
    // More columns
]
```

--------------------------------

### TaskBoard Core Configuration

Source: https://github.com/bryntum/bryntum-salesforce-showcase/blob/main/_autodocs/07-taskboard-component.md

Configures the core properties of the TaskBoard widget, including the project instance, append target element, styling, and animation settings.

```javascript
{
    project: project,
    appendTo: this.template.querySelector('.bryntum-root-element'),
    flex: 1,
    cls: 'demo-app',
    useDomTransition: true,
    chainFilters: true
}
```