### Project Setup and Installation

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Instructions for setting up the development environment for svelte-splitpanes using the pnpm package manager. This includes installing dependencies.

```bash
# Install PNPM (if not already installed)
npm install -g pnpm

# Install project dependencies
pnpm install
```

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

### Develop Svelte Project

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/example/README.md

Commands to start the development server for a Svelte project. Includes an option to open the app in a new browser tab.

```bash
npm run dev

npm run dev -- --open
```

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

### Build Svelte Project

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/example/README.md

Command to create a production-ready build of the Svelte application. Also mentions previewing the build.

```bash
npm run build

# Preview the production build
npm run preview
```

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

### Create Svelte Project

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/example/README.md

Commands to create a new Svelte project, either in the current directory or a specified directory.

```bash
npm create svelte@latest

npm create svelte@latest my-app
```

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

### Install Svelte-Splitpanes

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Installs the svelte-splitpanes package using npm. This is the first step to using the component in your Svelte project.

```shell
npm i svelte-splitpanes
```

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

### Developing the Project

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Command to run the svelte-splitpanes project in development mode using pnpm. This starts a Vite server with hot module replacement for rapid development.

```bash
# Run in development mode
pnpm dev
```

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

### Splitpanes Styling

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Provides CSS classes and examples for styling the svelte-splitpanes component, including the splitters and their hover states.

```css
.splitpanes {
  background-color: #f8f8f8;
}

.splitpanes__splitter {
  background-color: #ccc;
  position: relative;
}
.splitpanes__splitter:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.4s;
  background-color: rgba(255, 0, 0, 0.3);
  opacity: 0;
  z-index: 1;
}
.splitpanes__splitter:hover:before {
  opacity: 1;
}
.splitpanes--vertical > .splitpanes__splitter:before {
  left: -30px;
  right: -30px;
  height: 100%;
}
.splitpanes--horizontal > .splitpanes__splitter:before {
  top: -30px;
  bottom: -30px;
  width: 100%;
}
```

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

### Development Workflow

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Steps to follow for local development and committing changes. This includes installing dependencies, staging changes, running tests, and committing via the interactive terminal. Linting and Svelte checks are enforced during the commit process.

```shell
0. pnpm install
1. git add .
2. (Optional) pnpm build && pnpm test
3. pnpm commit
```

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

### Building the Project

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Commands to build the svelte-splitpanes library and its documentation. It covers building the exported library and preparing documentation for production.

```bash
# Build the exported library
pnpm package

# Build documentation for production
pnpm build

# Preview the documentation
pnpm preview
```

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

### Publishing a New Release to NPM

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Procedure for publishing a new version of the package to NPM. This involves merging release PRs, waiting for CI, and manually executing a fetch and publish command using pnpm. NPM_OTP is required for authentication.

```shell
pnpm login https://registry.npmjs.org/
git checkout master
git fetch
pnpm fetch-and-publish <NPM_OTP>
```

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

### Basic Svelte-Splitpanes Usage

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Demonstrates the basic usage of Svelte-Splitpanes in a Svelte component. It shows how to import `Pane` and `Splitpanes`, and how to define nested splitpanes with horizontal orientation and minimum size constraints.

```svelte
<script>
  import { Pane, Splitpanes } from 'svelte-splitpanes';
</script>

<Splitpanes style="height: 400px">
  <Pane minSize={20}>
    1
    <br />
    <em class="specs">I have a min width of 20%</em>
  </Pane>
  <Pane>
    <Splitpanes horizontal={true}>
      <Pane minSize={15}>
        2
        <br />
        <em class="specs">I have a min height of 15%</em>
      </Pane>
      <Pane>3</Pane>
      <Pane>4</Pane>
    </Splitpanes>
  </Pane>
  <Pane>5</Pane>
</Splitpanes>
```

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

### Commit Message Format

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Defines the structure for git commit messages, including type, scope, subject, body, and footer. Adherence to this format is crucial for readability and automated changelog generation. Lines should not exceed 100 characters.

```APIDOC
Commit Message Structure:
  header (mandatory): type(scope?)!?: subject
  body? (optional)
  footer? (optional)

Header Components:
  type: Must be one of: build, ci, docs, feat, fix, wip, perf, refactor, style, test, revert.
  scope?: Optional scope of the change (e.g., npm).
  !?: Optional '!' to indicate a BREAKING CHANGE.
  subject: Succinct description (imperative, present tense, no capitalization, no trailing dot).

Constraints:
  - Any line cannot be longer than 100 characters.
```

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

### Svelte Splitpanes Event Handling

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Demonstrates how to listen for and handle various events emitted by the svelte-splitpanes component in a Svelte application. It logs the event data to the console.

```svelte
<script>
  import { Splitpanes } from 'svelte-splitpanes';

  function handleMessage(event) {
    console.log(JSON.stringify(event));
  }
</script>

<Splitpanes
  on:ready={handleMessage}
  on:resize={handleMessage}
  on:resized={handleMessage}
  on:pane-click={handleMessage}
  on:pane-maximize={handleMessage}
  on:pane-add={handleMessage}
  on:pane-remove={handleMessage}
  on:splitter-click={handleMessage} />
```

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

### Force Release Version

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Allows forcing a specific version number for a release or triggering a release when Release Please might not automatically do so. This is achieved by committing an empty file with a specific commit message format.

```shell
git commit --allow-empty -m "chore: release VERSION (you may change the title)" -m "Release-As: VERSION"
```

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

### Splitpanes Component Properties

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Defines the configurable properties for the main `<Splitpanes>` component, controlling its orientation, behavior, and theming.

```APIDOC
Splitpanes Properties:

horizontal: boolean (default: false)
  The orientation of the split panes. Vertical by default.

pushOtherPanes: boolean (default: true)
  Whether a splitter should push the next splitter when dragging.

dblClickSplitter: boolean (default: true)
  Double click on splitter to maximize the next pane.

rtl: boolean | "auto" (default: "auto")
  Supports Right to left, by default will auto detect.

firstSplitter: boolean (default: false)
  Displays the first splitter when set to true. This allows maximizing the first pane on splitter double click.

id: string (default: undefined)
  Provide an optional id attribute to the component for styling/other reasons.

theme: string (default: 'default-theme')
  Used to styles the splitters using a different css class, if different then the default value 'default-theme'. see the styling examples in the demo site for more info.

class: string (default: undefined)
  Any additional css classes to be added to the component.
```

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

### Pane Component Properties

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Defines the configurable properties for individual `<Pane>` components within Splitpanes, controlling their size constraints and styling.

```APIDOC
Pane Properties:

minSize: number (default: 0)
  minimum pane size constraint in %

maxSize: number (default: 100)
  maximum pane size constraint in %

size: number | null (default: null)
  pane size in %, will autosize if not defined.

snapSize: number (default: 0 (disabled))
  edge snap size constraint in %

class: string (default: undefined)
  any additional css classes to be added to the component.
```

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

### Control Contribution PR Changelog Messages

Source: https://github.com/orefalo/svelte-splitpanes/blob/master/README.md

Specifies how to include additional messages in a pull request body that will be incorporated into the changelog by Release Please. This includes handling multiple fixes or features and overriding merged commit messages.

```shell
feat: adds v4 UUID to crypto

This adds support for v4 UUIDs to the library.

fix(utils): unicode no longer throws exception
  PiperOrigin-RevId: 345559154
  BREAKING-CHANGE: encode method no longer throws.
  Source-Link: googleapis/googleapis@5e0dcb2

feat(utils): update encode to support unicode
  PiperOrigin-RevId: 345559182
  Source-Link: googleapis/googleapis@e5eef86
```

```shell
BEGIN_COMMIT_OVERRIDE
feat: add ability to override merged commit message

fix: another message
chore: a third message
END_COMMIT_OVERRIDE
```

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