@autono/pinbox-toolbar 0.1.0

package/dist/vue.d.ts

@@ -0,0 +1,39 @@
+import { d as PinboxToolbarElement, n as PinboxConfig } from "./index-ZR3JBQu-.js";
+import { VNode } from "vue";
+//#region src/vue.d.ts
+/** The slice of the Vue component instance this wrapper touches. */
+interface WrapperInstance {
+  $el: Element;
+  config: PinboxConfig;
+  _pbEl?: PinboxToolbarElement;
+}
+/**
+ * `<PinboxToolbar :config="{ endpoint }" />` — forwards the config ONCE on mount (the
+ * element does not support live reconfiguration; re-key to change endpoints), removes the
+ * element on unmount. Created + configured BEFORE insertion because the element starts
+ * its transport in connectedCallback.
+ */
+declare const PinboxToolbar: {
+  name: string;
+  props: {
+    config: {
+      type: ObjectConstructor;
+      required: boolean;
+    };
+  };
+  mounted(this: WrapperInstance): void;
+  unmounted(this: WrapperInstance): void;
+  render(): VNode;
+};
+/** The slice of a Vue `App` the install helper touches. */
+interface AppLike {
+  unmount: () => void;
+}
+/**
+ * Plain functional install helper: `installPinbox(app, { endpoint })` mounts one toolbar
+ * for the whole app (appended to document.body, outside Vue's tree) and tears it down
+ * when the app unmounts. For per-view control use the `PinboxToolbar` component instead.
+ */
+declare function installPinbox(app: AppLike, config: PinboxConfig): void;
+//#endregion
+export { PinboxToolbar, installPinbox };

package/dist/vue.js

@@ -0,0 +1,48 @@
+import { n as defineToolbarElement, r as PinboxToolbarElement } from "./src-BoLg81_j.js";
+import { h } from "vue";
+//#region src/vue.ts
+/**
+* `<PinboxToolbar :config="{ endpoint }" />` — forwards the config ONCE on mount (the
+* element does not support live reconfiguration; re-key to change endpoints), removes the
+* element on unmount. Created + configured BEFORE insertion because the element starts
+* its transport in connectedCallback.
+*/
+const PinboxToolbar = {
+	name: "PinboxToolbar",
+	props: { config: {
+		type: Object,
+		required: true
+	} },
+	mounted() {
+		defineToolbarElement();
+		const el = document.createElement(PinboxToolbarElement.tagName);
+		el.configure(this.config);
+		this._pbEl = el;
+		this.$el.appendChild(el);
+	},
+	unmounted() {
+		this._pbEl?.remove();
+		delete this._pbEl;
+	},
+	render() {
+		return h("div", { style: { display: "contents" } });
+	}
+};
+/**
+* Plain functional install helper: `installPinbox(app, { endpoint })` mounts one toolbar
+* for the whole app (appended to document.body, outside Vue's tree) and tears it down
+* when the app unmounts. For per-view control use the `PinboxToolbar` component instead.
+*/
+function installPinbox(app, config) {
+	defineToolbarElement();
+	const el = document.createElement(PinboxToolbarElement.tagName);
+	el.configure(config);
+	document.body.appendChild(el);
+	const unmount = app.unmount;
+	app.unmount = () => {
+		el.remove();
+		unmount.call(app);
+	};
+}
+//#endregion
+export { PinboxToolbar, installPinbox };

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@autono/pinbox-toolbar",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autonoco/pinbox.git",
+    "directory": "packages/toolbar"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./dist/*.js"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "default": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "default": "./dist/svelte.js"
+    },
+    "./vite": {
+      "types": "./dist/plugins/vite.d.ts",
+      "default": "./dist/plugins/vite.js"
+    },
+    "./next": {
+      "types": "./dist/plugins/next.d.ts",
+      "default": "./dist/plugins/next.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsdown",
+    "demo": "bun demo/serve.ts",
+    "test": "bun test"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "svelte": "^4.0.0 || ^5.0.0",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@autono/pinbox-core": "0.0.0",
+    "@types/react": "^19.2.0",
+    "typescript": "^7.0.0",
+    "tsdown": "^0.22.0",
+    "svelte": "^5.45.0",
+    "vite": "^8.2.0",
+    "vue": "^3.5.0",
+    "@types/bun": "^1.3.0",
+    "happy-dom": "^20.0.11"
+  }
+}