feat: support tweakpane 4

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/selfish-fishes-dance.md

@@ -0,0 +1,5 @@
+---
+"@pierogis/svelte-tweakpane": minor
+---
+
+feat: support tweakpane 4

.github/workflows/version.yml

@@ -0,0 +1,35 @@
+name: version
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  version:
+    name: create changeset version pr
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout repo
+        uses: actions/checkout@v3
+
+      - name: setup node 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: install dependencies
+        run: pnpm i
+
+      - name: create release pull request
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,7 +2,7 @@
 node_modules
 /build
 /.svelte-kit
-/package
+/dist
 .env
 .env.*
 !.env.example

README.md

@@ -6,6 +6,8 @@ svelte components wrapping [tweakpane](https://github.com/cocopon/tweakpane)
 
 ```bash
 npm i --save-dev @pierogis/svelte-tweakpane
+# or
+pnpm add -D @pierogis/svelte-tweakpane
 ```
 
 ## usage
@@ -14,7 +16,7 @@ npm i --save-dev @pierogis/svelte-tweakpane
 <script lang="ts">
 	import { writable } from 'svelte/store';
 
-	import { Button, Folder, Input, Monitor, Pane, Tab } from '@pierogis/svelte-tweakpane';
+	import { Binding, Blade, Button, Folder, Pane, Tab } from '@pierogis/svelte-tweakpane';
 
 	const title = 'pane';
 
@@ -26,30 +28,42 @@ npm i --save-dev @pierogis/svelte-tweakpane
 
 	const key = 'key';
 	const paramsStore = writable({ [key]: 50 });
-	const optParams = {};
+	const monitorParams = {
+		readonly: true,
+		interval: 32
+	};
+	const inputParams = {};
 </script>
-```
 
-```svelte
 <div bind:this={container}>
 	{#if container}
 		<Pane {title} {container} let:pane on:fold={handleFold}>
 			<Tab parent={pane} pages={[{ title: 'input/monitor' }, { title: 'folder' }]} let:tab>
-				<Monitor
+				<Binding
 					parent={tab.pages[0]}
 					{paramsStore}
-					monitorParams={optParams}
+					bindingParams={monitorParams}
 					{key}
-					interval={32}
-					let:monitorElement
+					let:bindingApi
 				/>
-				<Input
+				<Binding
 					parent={tab.pages[0]}
 					{paramsStore}
-					inputParams={optParams}
+					bindingParams={inputParams}
 					onChange={(ev) => console.log(ev.value)}
 					{key}
-					let:inputElement
+					let:bindingApi
+				/>
+				<Blade
+					parent={tab.pages[0]}
+					bladeParams={{
+						view: 'slider',
+						label: 'brightness',
+						min: 0,
+						max: 1,
+						value: 0.5
+					}}
+					let:bladeApi
 				/>
 
 				<Folder tab={{ api: tab, pageIndex: 1 }} title={'folder'} let:folder>
@@ -61,21 +75,18 @@ npm i --save-dev @pierogis/svelte-tweakpane
 </div>
 ```
 
-```svelte
-<style>
-	div {
-		display: flex;
-	}
-</style>
-```
+the container (from `bind:this`) defines the size of the pane
 
-the container defines the size of the inner pane
+### exports
 
 ```ts
-import { Button, Folder, Input, Monitor, Pane, Tab } from "@pierogis/svelte-tweakpane"
+import { Blade, Binding, Button, Folder, Pane, Tab } from "@pierogis/svelte-tweakpane"
 ```
 
-style in +layout.svelte like so (see [theming](https://cocopon.github.io/tweakpane/theming/) for full list of observed css variables)
+### theming
+
+style in a `+layout.svelte` like so (see [theming](https://cocopon.github.io/tweakpane/theming/) for full list of observed css variables)
+
 ```svelte
 <style>
 	:global(:root) {
@@ -111,17 +122,29 @@ style in +layout.svelte like so (see [theming](https://cocopon.github.io/tweakpa
 
 ## development
 
-install dependencies with `npm install`
+clone the repo
+install dependencies with `pnpm i`
 start a development server with:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
-## building
+## release
 
-to create a production package with:
+- push with necessary changesets
+- gh action will make a version PR
+- create prerelease (if needed)
 
-```bash
-npm run build
+```
+pnpm changeset pre enter next
+pnpm changeset version
+pnpm changeset publish
+```
+
+- merge changeset version pr and pull
+- publish release
+
+```
+pnpm changeset publish
 ```