### Installation

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/introduction/getting-started.md

Install the mobx-swiss-knife package using your preferred package manager. Supports npm, yarn, and pnpm.

```bash
npm install {packageJson.name}
```

```bash
yarn add {packageJson.name}
```

```bash
pnpm add {packageJson.name}
```

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

### Basic Usage

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/introduction/getting-started.md

Demonstrates importing and initializing TabManager and Time utilities from the mobx-swiss-knife library. Shows basic configuration for TabManager and accessing the value from Time.

```typescript
import {
  TabManager,
  Time,
} from "mobx-swiss-knife";

const tabs = new TabManager({
  tabs: [
    { id: 'foo', label: 'Foo' },
    { id: 'bar', label: 'Bar' },
  ],
  fallbackTab: 'foo',
});

const time = new Time({
  updatePer: 1 * 1000,
})

console.log('time', time.value);
```

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

### Ticker Usage Example

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/ticker.md

Demonstrates how to import and use the Ticker class from mobx-swiss-knife. It shows instantiation, starting, stopping, and accessing ticker properties.

```typescript
import { Ticker, createTicker } from "mobx-swiss-knife";

const ticker = new Ticker();
const ticker = createTicker();

ticker.start();
ticker.stop();
ticker.ticks;
```

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

### TwoColorThemeStore Usage Example

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/themes/two-color-theme-store.md

Demonstrates how to import and use the TwoColorThemeStore for managing application themes. Includes creating an instance, switching themes, setting themes, and reacting to theme changes using MobX reactions.

```typescript
import {
  TwoColorThemeStore,
  createTwoColorThemeStore,
} from "mobx-swiss-knife";
import { reaction } from "mobx"

const themeStore = new TwoColorThemeStore();
const themeStore = createTwoColorThemeStore()


reaction(
  () => themeStore.colorScheme === 'light',
  isLight => {
    console.log(isLight);
  }
);

themeStore.switchTheme();
themeStore.setTheme('auto');


reaction(
  () => themeStore.theme === 'auto',
  isAutoTheme => {
    console.log(
      isAutoTheme,
      themeStore.mediaColorScheme
    );
  }
);

```

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

### Use pnpm changeset for Describing Changes

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/CONTRIBUTING.md

Before committing, use the 'pnpm changeset' command to generate a changelog entry. This helps in describing the changes made for future releases and follows semantic versioning practices.

```shell
pnpm changeset
```

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

### Paginator Initialization and Navigation

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/paginator.md

Demonstrates how to initialize the Paginator using both the constructor and the createPaginator factory function. It also shows common navigation methods like moving to a specific page, next/previous pages, and resetting the paginator state. The example includes accessing paginator data.

```typescript
import { Paginator, createPaginator } from "mobx-swiss-knife";
import { reaction } from "mobx";

// Initialize Paginator using the constructor
const paginator = new Paginator({
  pageSizes: [10, 20, 30]
});

// Initialize Paginator using the createPaginator factory function
const paginator = createPaginator({
  pageSizes: [10, 20, 30]
})

// Navigate to a specific page
paginator.toPage(2);

// Navigate through pages
paginator.toNextPage();
paginator.toNextPage();
paginator.toPreviousPage();

// Reset the paginator
paginator.reset();

// Access paginator data
paginator.data;//
```

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

### DatesComparator Usage Example

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/dates-comparator.md

Demonstrates how to import and use the DatesComparator class and the createDatesComparator factory function. It shows how to set dates and access computed properties like totalHours and minutes, including setting up a reaction to observe changes.

```typescript
import { DatesComparator, createDatesComparator } from "mobx-swiss-knife";
import { reaction } from "mobx";

const dc = new DatesComparator();
const dc = createDatesComparator();

dc.setDates(['now', new Date('2025-07-28T07:53:30.285Z')]);
dc.totalHours; //
dc.minutes; //

reaction(() => dc.totalHours, (totalHours) => {
  console.log('total hours', totalHours);
})
```

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

### ModelLoader Usage Example

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/model-loader.md

Demonstrates how to use `ModelLoader` and `createModelLoader` for lazy loading models in a MobX ViewModel. Includes connecting properties, dynamic loading of modules, and checking the loading status of models.

```TypeScript
import { ModelLoader, createModelLoader } from "mobx-swiss-knife";
import { reaction } from "mobx";

class YourVM {
  private modelLoader = new ModelLoader({ context: this });
  private modelLoader = createModelLoader({ context: this });

  applesModel = this.modelLoader.connect({
    property: 'applesModel',
    fn: () =>
      import('@/entities/apples/model')
        .then(m => {
          const ApplesModel = m.ApplesModel
          return new ApplesModel();
        })
  });

  async getMeme() {
    const memesModel = this.modelLoader.load('memes', async () => {
      const { MemesModel } = await import('@/entities/memes/model');
      return new MemesModel();
    })

    const meme = await memesModel.loadSomeMeme();

    return meme;
  }

  @computed.struct
  get isLoading() {
    return this.modelLoader.hasLoadingModels();
  }
}
```

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

### Conventional Commits for Commit Messages

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/CONTRIBUTING.md

Commit your changes using messages that adhere to the Conventional Commits specification. This standard ensures commit history is readable and can be used for automated changelog generation.

```markdown
feat: add new feature

This commit introduces a new feature that does X and Y.

BREAKING CHANGE: The API for Z has been changed.
```

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

### TabManager with Query Parameter Synchronization (TypeScript)

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/tab-manager.md

Illustrates configuring the TabManager to synchronize its active tab state with URL query parameters. This involves providing functions to get the current tab from parameters and update parameters when the tab changes.

```TypeScript
const tabManager = new TabManager({
  tabs: [
    { id: 'home', key: 1 },
    { id: 'bar', key: 2 },
    { id: 'memes', key: 3 },
  ],
  getActiveTab: () => queryParams.data.tab,
  onChangeActiveTab: (tab) => queryParams.update({ tab }),
});
```

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

### Socket Usage with WebSocket

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/socket.md

Demonstrates how to import and use the `Socket` class and `createSocket` function from `mobx-swiss-knife` for establishing WebSocket connections. It shows initialization with a URL, opening the connection, resending unsent messages, and accessing socket status properties.

```typescript
import { Socket, createSocket } from "mobx-swiss-knife";
import { reaction } from "mobx";

const socket = new Socket({
  url: 'wss:/api.com/api/v1/ws',
});
const socket = createSocket({
  url: 'wss:/api.com/api/v1/ws',
});

socket.open();

socket.resendNotSentMessages();
socket.message; //
socket.isOpen; //
socket.isReconnectEnabled; //
```

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

### FakerLoader: Lazy Loading Faker

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/faker-loader.md

Demonstrates the usage of `FakerLoader` for lazy loading the `faker` library. It covers importing, instantiation, asynchronous loading, and observing loading states and errors using `mobx` reactions. The `faker.instance` property provides access to the loaded faker object.

```typescript
import { FakerLoader, createFakerLoader } from "mobx-swiss-knife";
import { reaction } from "mobx";

const faker = new FakerLoader();
const faker = createFakerLoader();

await faker.load();

reaction(() => faker.isLoading, noop);
reaction(() => faker.error, noop);

faker.instance; // Faker otherwise throw exception
```

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

### Basic Time Initialization and Access

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/time.md

Demonstrates how to initialize the Time utility with default or custom update intervals and access its reactive properties like `date`, `ms`, and `value`.

```typescript
import { Time, createTime } from "mobx-swiss-knife";

const time = new Time({
  updatePer: 1000, // default 1000
});
const time = createTime();

time.date;
time.ms;
time.value;
```

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

### TabManager Initialization and Basic Usage (TypeScript)

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/tab-manager.md

Demonstrates how to initialize the TabManager with a list of tabs and access its properties like active tab data. It also shows how to change the active tab programmatically.

```TypeScript
import { TabManager, createTabManager } from "mobx-swiss-knife";

const tabManager = new TabManager({
  tabs: [
    { id: 'home', key: 1 },
    { id: 'bar', key: 2 },
    { id: 'memes', key: 3 },
  ],
});
const tabManager = createTabManager()

tabManager.activeTabData.key;
tabManager.setActiveTab('bar')
```

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

### Stepper Usage with mobx-swiss-knife

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/stepper.md

Demonstrates how to instantiate and use the Stepper class or the createStepper function from the mobx-swiss-knife library. It covers methods for advancing (`nextStep`), going back (`prevStep`), and checking the current step's position (`isNextStepLast`, `isLastStep`, `hasPrevStep`).

```typescript
import { Stepper, createStepper } from "mobx-swiss-knife";

const stepper = new Stepper();
const stepper = createStepper()

stepper.nextStep();
stepper.prevStep();
stepper.isNextStepLast;
stepper.isLastStep;
stepper.hasPrevStep;

```

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

### Storage Usage and Property Synchronization

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/storage.md

Demonstrates how to use the `Storage` class and `createStorage` function for interacting with browser LocalStorage and SessionStorage. It covers basic set/get operations and advanced property synchronization with class members, including fallback values and storage type specification.

```typescript
import { Storage, createStorage } from "mobx-swiss-knife";
import { reaction } from "mobx";

// Instantiating Storage
const s = new Storage();
const s_created = createStorage();

// Basic set and get operations
s.set({
  key: 'foo',
  value: 1,
});

const value = s.get<number>({
  key: 'foo',
});

// Example of synchronizing a class property with storage
class MyVM {
  private s: Storage;
  
  foo: number = 1;
  
  constructor() {
    this.s = new Storage();

    // Synchronize 'foo' property with local storage
    this.s.syncProperty(this, 'foo', {
      key: 'local-storage-key',
      fallback: 1,
      type: 'local', // Can be 'local' or 'session'
    });
  }
}

// Note: 'reaction' from mobx is imported but not used in this snippet.
// The 's' variable is reused in the example, which is common in JS/TS but might be confusing.
// Using 's_created' for the second instantiation example.

```

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

### Using Timers for Debounced Operations in TypeScript

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/timers.md

Demonstrates how to use the `Timers` class from `mobx-swiss-knife` to manage debounced asynchronous operations within a TypeScript class. It shows initialization with an abort signal and using the `debounced` method to delay function execution, useful for UI interactions like search input.

```typescript
import { Timers, createTimers } from "mobx-swiss-knife";

class MyVM {
  private timers = new Timers({
    abortSignal: this.abortController.signal,
  });


  @observable
  search = queryParams.data.search || ''

  @action
  setSearch = (search: string) => {
    this.search = search;

    this.timers.debounced(() => {
      queryParams.update({ search })
    }, 400);
  }
}
```

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

### Time with Mapped Value

Source: https://github.com/js2me/mobx-swiss-knife/blob/master/docs/tools/time.md

Shows how to configure the Time utility with a custom mapping function to transform the reactive Date value into a desired format, such as seconds.

```typescript
const time = new Time({
  map: date => date.getSeconds(),
});

time.value; // seconds
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.