@verbb/plugin-kit-vue 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+## Unreleased
+
+## 2.0.0 - 2026-07-19
+
+### Added
+- Initial public release of `@verbb/plugin-kit-vue` — Vue adapters over `@verbb/plugin-kit-web` custom elements.
+- Canonical bootstrap is Vue `createApp` + `PluginKitProvider`. Importing a facade registers its custom element family.
+- Public surfaces mirror React: `./components`, `./app`, `./forms`, `./fault`, `./hooks`, `./utils`, and `./style.css`.
+- SchemaForm UI bindings on `@verbb/plugin-kit-vue/forms`; shared store/validation in `@verbb/plugin-kit-forms`.
+
+### Changed
+- Package versions lockstep with `@verbb/plugin-kit-web`, `@verbb/plugin-kit-react`, `@verbb/plugin-kit-forms`, and related `@verbb/plugin-kit-*` packages at `2.0.0`.

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Verbb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# `@verbb/plugin-kit-vue`
+
+Thin Vue facades over `@verbb/plugin-kit-web` custom elements via `@lit-labs/vue-utils`.
+
+Vue does **not** reimplement behavior or styles — it maps props, events, and slots to the web component. Importing a facade registers its element. Load tokens + FOUCE CSS as below.
+
+## Install
+
+```bash
+npm install vue @verbb/plugin-kit-vue @verbb/plugin-kit-web
+```
+
+Craft Vite + asset-bundle wiring: [Vue quick start](https://docs.verbb.io/plugin-kit/vue/getting-started/quick-start).
+
+## Bootstrap
+
+Use Vue’s `createApp` plus `PluginKitProvider`. There is no `createVueApp` / `registerAll` step.
+
+```ts
+import '@verbb/plugin-kit-vue/style.css';
+
+import { createApp, h } from 'vue';
+import { PluginKitProvider } from '@verbb/plugin-kit-vue';
+import App from './App.vue';
+
+createApp({
+  setup() {
+    return () => h(PluginKitProvider, { translationCategory: 'my-plugin' }, {
+      default: () => h(App),
+    });
+  },
+}).mount('#my-plugin-root');
+```
+
+`PluginKitProvider` wires translations (defaults to `Craft.t` when present) and optional portal / host config. Pass `hostBridge: createCraftHostBridge()` only when you call Craft action / selector helpers.
+
+### Shadow DOM screens
+
+```ts
+import pluginKitStyles from '@verbb/plugin-kit-vue/style.css?inline';
+import screenStyles from './screen.css?inline';
+import { createApp, h } from 'vue';
+import { mountShadowApp, PluginKitProvider } from '@verbb/plugin-kit-vue/app';
+import App from './App.vue';
+
+const { mountNode, portalContainer } = mountShadowApp({
+  element: '#my-plugin-root',
+  styles: [pluginKitStyles, screenStyles],
+});
+
+createApp({
+  setup() {
+    return () => h(PluginKitProvider, {
+      translationCategory: 'my-plugin',
+      portalContainer,
+    }, {
+      default: () => h(App),
+    });
+  },
+}).mount(mountNode);
+```
+
+### Icons
+
+`<Icon icon="…">` uses an opt-in registry — register named glyphs, or import `@verbb/plugin-kit-icons/all.js`:
+
+```ts
+import { registerIcons, plus, gear } from '@verbb/plugin-kit-icons';
+
+registerIcons({ plus, gear });
+```
+
+## Components
+
+### Facades (1:1 with a web component)
+
+```vue
+<script setup>
+import { Select, Option } from '@verbb/plugin-kit-vue/components';
+</script>
+
+<template>
+  <Select :value="value" @pk-change="value = $event.detail.value">
+    <Option value="a">Option A</Option>
+  </Select>
+</template>
+```
+
+### `*Input` convenience wrappers
+
+```vue
+<script setup>
+import { CheckboxInput, Lightswitch, RadioGroupInput, SelectInput } from '@verbb/plugin-kit-vue/components';
+
+const agreed = ref(false);
+const enabled = ref(true);
+const channel = ref('email');
+</script>
+
+<template>
+  <CheckboxInput v-model:checked="agreed">I agree</CheckboxInput>
+  <Lightswitch v-model:checked="enabled" />
+  <RadioGroupInput
+    v-model="channel"
+    :options="[
+      { value: 'email', label: 'Email' },
+      { value: 'sms', label: 'SMS' },
+    ]"
+  />
+  <SelectInput v-model="channel" :options="[{ value: 'email', label: 'Email' }]" />
+</template>
+```
+
+Boolean controls use `v-model:checked`. Option-based wrappers use `v-model`.
+
+## Import paths
+
+| Subpath | Purpose |
+|---------|---------|
+| `@verbb/plugin-kit-vue` | Provider + common re-exports |
+| `@verbb/plugin-kit-vue/components` | UI facades (same catalog as React) |
+| `@verbb/plugin-kit-vue/forms` | SchemaForm UI + registry |
+| `@verbb/plugin-kit-vue/app` | Provider, `mountShadowApp`, configure |
+| `@verbb/plugin-kit-vue/utils` | Host bridge, `cn`, shared helpers |
+| `@verbb/plugin-kit-vue/hooks` | `useTranslation` |
+| `@verbb/plugin-kit-vue/fault` | Fault boundary / watchdog / support bundle |
+| `@verbb/plugin-kit-vue/style.css` | Tokens + FOUCE + overlay chrome |
+
+## Docs
+
+- [docs.verbb.io/plugin-kit/vue](https://docs.verbb.io/plugin-kit/vue/)
+- Workshop (monorepo): `npm run dev` → http://localhost:5175

package/dist/app/PluginKitProvider.d.ts

@@ -0,0 +1,92 @@
+import { PropType, VNodeChild } from 'vue';
+import { PluginKitHostBridge } from '@verbb/plugin-kit-core';
+import { PortalContainer } from '@verbb/plugin-kit-web/plugin-kit';
+import { PluginKitVueConfig, TranslateFunction } from './configure.js';
+export type PluginKitProviderProps = PluginKitVueConfig & {
+    /** Default slot — the app tree. */
+    default?: () => VNodeChild;
+};
+/**
+ * Applies Plugin Kit environment config for a Vue tree.
+ *
+ * Importing Vue components already registers their underlying custom elements —
+ * no `registerAll` / registration bootstrap. Pass `hostBridge` only when the tree
+ * calls Craft action/selector helpers.
+ *
+ * @example
+ * ```ts
+ * import { createApp, h } from 'vue';
+ * import { PluginKitProvider, Button } from '@verbb/plugin-kit-vue';
+ *
+ * createApp({
+ *   setup() {
+ *     return () => h(PluginKitProvider, { translationCategory: 'my-plugin' }, {
+ *       default: () => h(Button, null, () => 'Save'),
+ *     });
+ *   },
+ * }).mount(el);
+ * ```
+ */
+export declare const PluginKitProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    translationCategory: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    translate: {
+        type: PropType<TranslateFunction>;
+        default: undefined;
+    };
+    hostBridge: {
+        type: PropType<Partial<PluginKitHostBridge>>;
+        default: undefined;
+    };
+    portalClassName: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    portalContainer: {
+        type: PropType<PortalContainer>;
+        default: undefined;
+    };
+    shadowRootSelectors: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    translationCategory: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    translate: {
+        type: PropType<TranslateFunction>;
+        default: undefined;
+    };
+    hostBridge: {
+        type: PropType<Partial<PluginKitHostBridge>>;
+        default: undefined;
+    };
+    portalClassName: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    portalContainer: {
+        type: PropType<PortalContainer>;
+        default: undefined;
+    };
+    shadowRootSelectors: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    translationCategory: string;
+    translate: TranslateFunction;
+    hostBridge: Partial<PluginKitHostBridge>;
+    portalClassName: string;
+    portalContainer: PortalContainer;
+    shadowRootSelectors: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** Read the nearest {@link PluginKitProvider} config (empty object when absent). */
+export declare const usePluginKitConfig: () => PluginKitVueConfig;
+//# sourceMappingURL=PluginKitProvider.d.ts.map

package/dist/app/PluginKitProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginKitProvider.d.ts","sourceRoot":"","sources":["../../src/app/PluginKitProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAC1G,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExE,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAE5F,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACtD,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,UAAU,CAAC;CAC9B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iBAAiB;;;;;;cAIS,QAAQ,CAAC,iBAAiB,CAAC;;;;cAC5B,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;;;;;;;;cAGhD,QAAQ,CAAC,eAAe,CAAC;;;;cAGP,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;;;;;;;;cAPzB,QAAQ,CAAC,iBAAiB,CAAC;;;;cAC5B,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;;;;;;;;cAGhD,QAAQ,CAAC,eAAe,CAAC;;;;cAGP,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;;;;;;;4EAkB9D,CAAC;AAEH,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,QAAO,kBAErC,CAAC"}

package/dist/app/PluginKitProvider.js

@@ -0,0 +1,75 @@
+import { configure } from "./configure.js";
+import { defineComponent, inject, provide } from "vue";
+//#region src/app/PluginKitProvider.ts
+var PluginKitConfigKey = Symbol("pluginKitConfig");
+/**
+* Applies Plugin Kit environment config for a Vue tree.
+*
+* Importing Vue components already registers their underlying custom elements —
+* no `registerAll` / registration bootstrap. Pass `hostBridge` only when the tree
+* calls Craft action/selector helpers.
+*
+* @example
+* ```ts
+* import { createApp, h } from 'vue';
+* import { PluginKitProvider, Button } from '@verbb/plugin-kit-vue';
+*
+* createApp({
+*   setup() {
+*     return () => h(PluginKitProvider, { translationCategory: 'my-plugin' }, {
+*       default: () => h(Button, null, () => 'Save'),
+*     });
+*   },
+* }).mount(el);
+* ```
+*/
+var PluginKitProvider = defineComponent({
+	name: "PluginKitProvider",
+	props: {
+		translationCategory: {
+			type: String,
+			default: void 0
+		},
+		translate: {
+			type: Function,
+			default: void 0
+		},
+		hostBridge: {
+			type: Object,
+			default: void 0
+		},
+		portalClassName: {
+			type: String,
+			default: void 0
+		},
+		portalContainer: {
+			type: Object,
+			default: void 0
+		},
+		shadowRootSelectors: {
+			type: Array,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const config = {
+			...props.translationCategory ? { translationCategory: props.translationCategory } : {},
+			...props.translate ? { translate: props.translate } : {},
+			...props.hostBridge ? { hostBridge: props.hostBridge } : {},
+			...props.portalClassName ? { portalClassName: props.portalClassName } : {},
+			...props.portalContainer !== void 0 ? { portalContainer: props.portalContainer } : {},
+			...props.shadowRootSelectors ? { shadowRootSelectors: props.shadowRootSelectors } : {}
+		};
+		configure(config);
+		provide(PluginKitConfigKey, config);
+		return () => slots.default?.();
+	}
+});
+/** Read the nearest {@link PluginKitProvider} config (empty object when absent). */
+var usePluginKitConfig = () => {
+	return inject(PluginKitConfigKey, {});
+};
+//#endregion
+export { PluginKitProvider, usePluginKitConfig };
+
+//# sourceMappingURL=PluginKitProvider.js.map

package/dist/app/PluginKitProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginKitProvider.js","names":[],"sources":["../../src/app/PluginKitProvider.ts"],"sourcesContent":["import { defineComponent, inject, provide, type InjectionKey, type PropType, type VNodeChild } from 'vue';\nimport type { PluginKitHostBridge } from '@verbb/plugin-kit-core';\nimport type { PortalContainer } from '@verbb/plugin-kit-web/plugin-kit';\n\nimport { configure, type PluginKitVueConfig, type TranslateFunction } from './configure.js';\n\nexport type PluginKitProviderProps = PluginKitVueConfig & {\n    /** Default slot — the app tree. */\n    default?: () => VNodeChild;\n};\n\nconst PluginKitConfigKey: InjectionKey<PluginKitVueConfig> = Symbol('pluginKitConfig');\n\n/**\n * Applies Plugin Kit environment config for a Vue tree.\n *\n * Importing Vue components already registers their underlying custom elements —\n * no `registerAll` / registration bootstrap. Pass `hostBridge` only when the tree\n * calls Craft action/selector helpers.\n *\n * @example\n * ```ts\n * import { createApp, h } from 'vue';\n * import { PluginKitProvider, Button } from '@verbb/plugin-kit-vue';\n *\n * createApp({\n *   setup() {\n *     return () => h(PluginKitProvider, { translationCategory: 'my-plugin' }, {\n *       default: () => h(Button, null, () => 'Save'),\n *     });\n *   },\n * }).mount(el);\n * ```\n */\nexport const PluginKitProvider = defineComponent({\n    name: 'PluginKitProvider',\n    props: {\n        translationCategory: { type: String, default: undefined },\n        translate: { type: Function as PropType<TranslateFunction>, default: undefined },\n        hostBridge: { type: Object as PropType<Partial<PluginKitHostBridge>>, default: undefined },\n        portalClassName: { type: String, default: undefined },\n        portalContainer: {\n            type: Object as PropType<PortalContainer>,\n            default: undefined,\n        },\n        shadowRootSelectors: { type: Array as PropType<string[]>, default: undefined },\n    },\n    setup(props, { slots }) {\n        // Sync apply before children render overlays — same timing as the old createVueApp path.\n        const config: PluginKitVueConfig = {\n            ...(props.translationCategory ? { translationCategory: props.translationCategory } : {}),\n            ...(props.translate ? { translate: props.translate } : {}),\n            ...(props.hostBridge ? { hostBridge: props.hostBridge } : {}),\n            ...(props.portalClassName ? { portalClassName: props.portalClassName } : {}),\n            ...(props.portalContainer !== undefined ? { portalContainer: props.portalContainer } : {}),\n            ...(props.shadowRootSelectors ? { shadowRootSelectors: props.shadowRootSelectors } : {}),\n        };\n\n        configure(config);\n        provide(PluginKitConfigKey, config);\n\n        return () => slots.default?.();\n    },\n});\n\n/** Read the nearest {@link PluginKitProvider} config (empty object when absent). */\nexport const usePluginKitConfig = (): PluginKitVueConfig => {\n    return inject(PluginKitConfigKey, {});\n};\n"],"mappings":";;;AAWA,IAAM,qBAAuD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;AAuBtF,IAAa,oBAAoB,gBAAgB;CAC7C,MAAM;CACN,OAAO;EACH,qBAAqB;GAAE,MAAM;GAAQ,SAAS,KAAA;GAAW;EACzD,WAAW;GAAE,MAAM;GAAyC,SAAS,KAAA;GAAW;EAChF,YAAY;GAAE,MAAM;GAAkD,SAAS,KAAA;GAAW;EAC1F,iBAAiB;GAAE,MAAM;GAAQ,SAAS,KAAA;GAAW;EACrD,iBAAiB;GACb,MAAM;GACN,SAAS,KAAA;GACZ;EACD,qBAAqB;GAAE,MAAM;GAA6B,SAAS,KAAA;GAAW;EACjF;CACD,MAAM,OAAO,EAAE,SAAS;EAEpB,MAAM,SAA6B;GAC/B,GAAI,MAAM,sBAAsB,EAAE,qBAAqB,MAAM,qBAAqB,GAAG,EAAE;GACvF,GAAI,MAAM,YAAY,EAAE,WAAW,MAAM,WAAW,GAAG,EAAE;GACzD,GAAI,MAAM,aAAa,EAAE,YAAY,MAAM,YAAY,GAAG,EAAE;GAC5D,GAAI,MAAM,kBAAkB,EAAE,iBAAiB,MAAM,iBAAiB,GAAG,EAAE;GAC3E,GAAI,MAAM,oBAAoB,KAAA,IAAY,EAAE,iBAAiB,MAAM,iBAAiB,GAAG,EAAE;GACzF,GAAI,MAAM,sBAAsB,EAAE,qBAAqB,MAAM,qBAAqB,GAAG,EAAE;GAC1F;AAED,YAAU,OAAO;AACjB,UAAQ,oBAAoB,OAAO;AAEnC,eAAa,MAAM,WAAW;;CAErC,CAAC;;AAGF,IAAa,2BAA+C;AACxD,QAAO,OAAO,oBAAoB,EAAE,CAAC"}

package/dist/app/configure.d.ts

@@ -0,0 +1,29 @@
+import { PluginKitHostBridge } from '@verbb/plugin-kit-core';
+import { PluginKitWebConfig } from '@verbb/plugin-kit-web/plugin-kit';
+import { TranslateParams } from '@verbb/plugin-kit-forms';
+export type TranslateFunction = (category: string, message: string, params?: TranslateParams) => string;
+export type PluginKitVueConfig = PluginKitWebConfig & {
+    /** Category passed to the translate function for engine/validation messages. */
+    translationCategory?: string;
+    /**
+     * Custom translate implementation.
+     * When omitted and `window.Craft.t` exists, Craft’s translator is used automatically.
+     */
+    translate?: TranslateFunction;
+    /**
+     * Partial merge into the global host bridge used by `hostRequest()` and related helpers.
+     * Opt-in — only pass when the app calls Craft action/selector helpers.
+     */
+    hostBridge?: Partial<PluginKitHostBridge>;
+};
+/**
+ * Configure the Vue facade stack. Translation is forwarded to the form engine;
+ * portal/shadow settings are forwarded to the web-component layer.
+ *
+ * Prefer {@link PluginKitProvider} for app trees — call this directly only for
+ * secondary mounts that need a different portal target.
+ */
+export declare const configure: (config: PluginKitVueConfig) => void;
+/** Alias for `configure()`. */
+export declare const configurePluginKitVue: (config: PluginKitVueConfig) => void;
+//# sourceMappingURL=configure.d.ts.map

package/dist/app/configure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../../src/app/configure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAIH,KAAK,kBAAkB,EAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAgD,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE7G,MAAM,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC;AAExG,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG;IAClD,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CAC7C,CAAC;AAgBF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,GAAI,QAAQ,kBAAkB,KAAG,IAwCtD,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,qBAAqB,WA3CA,kBAAkB,KAAG,IA2CT,CAAC"}

package/dist/app/configure.js

@@ -0,0 +1,35 @@
+import { setHostBridge } from "@verbb/plugin-kit-core";
+import { configurePluginKitWeb, setPortalClassName, setPortalContainer } from "@verbb/plugin-kit-web/plugin-kit";
+import { setTranslateFunction, setTranslationCategory } from "@verbb/plugin-kit-forms";
+//#region src/app/configure.ts
+var resolveCraftTranslate = () => {
+	const craft = globalThis.Craft;
+	if (typeof craft?.t === "function") return (category, message, params) => craft.t(category, message, params);
+};
+/**
+* Configure the Vue facade stack. Translation is forwarded to the form engine;
+* portal/shadow settings are forwarded to the web-component layer.
+*
+* Prefer {@link PluginKitProvider} for app trees — call this directly only for
+* secondary mounts that need a different portal target.
+*/
+var configure = (config) => {
+	const { translationCategory, translate, hostBridge, portalClassName, portalContainer, shadowRootSelectors } = config;
+	if (translationCategory) setTranslationCategory(translationCategory);
+	const resolvedTranslate = translate ?? resolveCraftTranslate();
+	if (resolvedTranslate) setTranslateFunction(resolvedTranslate);
+	if (hostBridge) setHostBridge(hostBridge);
+	if (portalClassName) setPortalClassName(portalClassName);
+	if (portalContainer !== void 0) setPortalContainer(portalContainer);
+	const webConfig = {
+		...portalContainer !== void 0 ? { portalContainer } : {},
+		...shadowRootSelectors !== void 0 ? { shadowRootSelectors } : {}
+	};
+	if (webConfig.portalContainer !== void 0 || webConfig.shadowRootSelectors !== void 0) configurePluginKitWeb(webConfig);
+};
+/** Alias for `configure()`. */
+var configurePluginKitVue = configure;
+//#endregion
+export { configure, configurePluginKitVue };
+
+//# sourceMappingURL=configure.js.map

package/dist/app/configure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configure.js","names":[],"sources":["../../src/app/configure.ts"],"sourcesContent":["import { setHostBridge, type PluginKitHostBridge } from '@verbb/plugin-kit-core';\nimport {\n    configurePluginKitWeb,\n    setPortalClassName,\n    setPortalContainer,\n    type PluginKitWebConfig,\n} from '@verbb/plugin-kit-web/plugin-kit';\nimport { setTranslateFunction, setTranslationCategory, type TranslateParams } from '@verbb/plugin-kit-forms';\n\nexport type TranslateFunction = (category: string, message: string, params?: TranslateParams) => string;\n\nexport type PluginKitVueConfig = PluginKitWebConfig & {\n    /** Category passed to the translate function for engine/validation messages. */\n    translationCategory?: string;\n    /**\n     * Custom translate implementation.\n     * When omitted and `window.Craft.t` exists, Craft’s translator is used automatically.\n     */\n    translate?: TranslateFunction;\n    /**\n     * Partial merge into the global host bridge used by `hostRequest()` and related helpers.\n     * Opt-in — only pass when the app calls Craft action/selector helpers.\n     */\n    hostBridge?: Partial<PluginKitHostBridge>;\n};\n\ntype CraftTranslateHost = {\n    t?: TranslateFunction;\n};\n\nconst resolveCraftTranslate = (): TranslateFunction | undefined => {\n    const craft = (globalThis as typeof globalThis & { Craft?: CraftTranslateHost }).Craft;\n\n    if (typeof craft?.t === 'function') {\n        return (category, message, params) => craft.t!(category, message, params);\n    }\n\n    return undefined;\n};\n\n/**\n * Configure the Vue facade stack. Translation is forwarded to the form engine;\n * portal/shadow settings are forwarded to the web-component layer.\n *\n * Prefer {@link PluginKitProvider} for app trees — call this directly only for\n * secondary mounts that need a different portal target.\n */\nexport const configure = (config: PluginKitVueConfig): void => {\n    const {\n        translationCategory,\n        translate,\n        hostBridge,\n        portalClassName,\n        portalContainer,\n        shadowRootSelectors,\n    } = config;\n\n    if (translationCategory) {\n        setTranslationCategory(translationCategory);\n    }\n\n    const resolvedTranslate = translate ?? resolveCraftTranslate();\n\n    if (resolvedTranslate) {\n        setTranslateFunction(resolvedTranslate);\n    }\n\n    if (hostBridge) {\n        setHostBridge(hostBridge);\n    }\n\n    if (portalClassName) {\n        setPortalClassName(portalClassName);\n    }\n\n    if (portalContainer !== undefined) {\n        setPortalContainer(portalContainer);\n    }\n\n    const webConfig: PluginKitWebConfig = {\n        ...(portalContainer !== undefined ? { portalContainer } : {}),\n        ...(shadowRootSelectors !== undefined ? { shadowRootSelectors } : {}),\n    };\n\n    if (webConfig.portalContainer !== undefined || webConfig.shadowRootSelectors !== undefined) {\n        configurePluginKitWeb(webConfig);\n    }\n};\n\n/** Alias for `configure()`. */\nexport const configurePluginKitVue = configure;\n"],"mappings":";;;;AA8BA,IAAM,8BAA6D;CAC/D,MAAM,QAAS,WAAkE;AAEjF,KAAI,OAAO,OAAO,MAAM,WACpB,SAAQ,UAAU,SAAS,WAAW,MAAM,EAAG,UAAU,SAAS,OAAO;;;;;;;;;AAajF,IAAa,aAAa,WAAqC;CAC3D,MAAM,EACF,qBACA,WACA,YACA,iBACA,iBACA,wBACA;AAEJ,KAAI,oBACA,wBAAuB,oBAAoB;CAG/C,MAAM,oBAAoB,aAAa,uBAAuB;AAE9D,KAAI,kBACA,sBAAqB,kBAAkB;AAG3C,KAAI,WACA,eAAc,WAAW;AAG7B,KAAI,gBACA,oBAAmB,gBAAgB;AAGvC,KAAI,oBAAoB,KAAA,EACpB,oBAAmB,gBAAgB;CAGvC,MAAM,YAAgC;EAClC,GAAI,oBAAoB,KAAA,IAAY,EAAE,iBAAiB,GAAG,EAAE;EAC5D,GAAI,wBAAwB,KAAA,IAAY,EAAE,qBAAqB,GAAG,EAAE;EACvE;AAED,KAAI,UAAU,oBAAoB,KAAA,KAAa,UAAU,wBAAwB,KAAA,EAC7E,uBAAsB,UAAU;;;AAKxC,IAAa,wBAAwB"}

package/dist/app/index.d.ts

@@ -0,0 +1,5 @@
+export { configure, configurePluginKitVue, type PluginKitVueConfig, type TranslateFunction, } from './configure.js';
+export { PluginKitProvider, usePluginKitConfig, type PluginKitProviderProps, } from './PluginKitProvider.js';
+export { mountShadowApp, type MountShadowAppOptions, type ShadowAppMount, } from './mountShadowApp.js';
+export { createCraftHostBridge } from '../utils/craftHostBridge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACzB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACH,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,sBAAsB,GAC9B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACH,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/app/index.js

@@ -0,0 +1,5 @@
+import { configure, configurePluginKitVue } from "./configure.js";
+import { PluginKitProvider, usePluginKitConfig } from "./PluginKitProvider.js";
+import { mountShadowApp } from "./mountShadowApp.js";
+import { createCraftHostBridge } from "../utils/craftHostBridge.js";
+export { PluginKitProvider, configure, configurePluginKitVue, createCraftHostBridge, mountShadowApp, usePluginKitConfig };

package/dist/app/mountShadowApp.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export the framework-agnostic helper from `@verbb/plugin-kit-web`.
+ * Prefer importing from `@verbb/plugin-kit-vue` / `/app` in app code.
+ */
+export { mountShadowApp, type MountShadowAppOptions, type ShadowAppMount, } from '@verbb/plugin-kit-web/plugin-kit';
+//# sourceMappingURL=mountShadowApp.d.ts.map

package/dist/app/mountShadowApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountShadowApp.d.ts","sourceRoot":"","sources":["../../src/app/mountShadowApp.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EACH,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACtB,MAAM,kCAAkC,CAAC"}

package/dist/app/mountShadowApp.js

@@ -0,0 +1,2 @@
+import { mountShadowApp } from "@verbb/plugin-kit-web/plugin-kit";
+export { mountShadowApp };

package/dist/components/Button.d.ts

@@ -0,0 +1,208 @@
+import { PropType } from 'vue';
+import { PkButtonSize, PkButtonVariant, PkSpinnerTone, PkSpinnerVariant } from '@verbb/plugin-kit-web';
+export type ButtonProps = {
+    variant?: PkButtonVariant;
+    size?: PkButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    spinnerVariant?: PkSpinnerVariant;
+    spinnerTone?: PkSpinnerTone;
+    'data-state'?: 'hover' | 'focus-visible' | 'active';
+    withCaret?: boolean;
+    groupTrigger?: boolean;
+};
+/** Vue facade over `<pk-button>`. Behavior and styles live in the web component. */
+export declare const Button: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    variant: {
+        type: PropType<PkButtonVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<PkButtonSize>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    spinnerVariant: {
+        type: PropType<PkSpinnerVariant>;
+        default: undefined;
+    };
+    spinnerTone: {
+        type: PropType<PkSpinnerTone>;
+        default: undefined;
+    };
+    dataState: {
+        type: PropType<ButtonProps["data-state"]>;
+        default: undefined;
+    };
+    withCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    groupTrigger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    variant: {
+        type: PropType<PkButtonVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<PkButtonSize>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    spinnerVariant: {
+        type: PropType<PkSpinnerVariant>;
+        default: undefined;
+    };
+    spinnerTone: {
+        type: PropType<PkSpinnerTone>;
+        default: undefined;
+    };
+    dataState: {
+        type: PropType<ButtonProps["data-state"]>;
+        default: undefined;
+    };
+    withCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    groupTrigger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: PkButtonSize;
+    type: "reset" | "submit" | "button";
+    disabled: boolean;
+    dataState: "focus-visible" | "active" | "hover" | undefined;
+    variant: PkButtonVariant;
+    loading: boolean;
+    spinnerVariant: PkSpinnerVariant;
+    spinnerTone: PkSpinnerTone;
+    withCaret: boolean;
+    groupTrigger: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const PkButtonElement: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    variant: {
+        type: PropType<PkButtonVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<PkButtonSize>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    spinnerVariant: {
+        type: PropType<PkSpinnerVariant>;
+        default: undefined;
+    };
+    spinnerTone: {
+        type: PropType<PkSpinnerTone>;
+        default: undefined;
+    };
+    dataState: {
+        type: PropType<ButtonProps["data-state"]>;
+        default: undefined;
+    };
+    withCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    groupTrigger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    variant: {
+        type: PropType<PkButtonVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<PkButtonSize>;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    spinnerVariant: {
+        type: PropType<PkSpinnerVariant>;
+        default: undefined;
+    };
+    spinnerTone: {
+        type: PropType<PkSpinnerTone>;
+        default: undefined;
+    };
+    dataState: {
+        type: PropType<ButtonProps["data-state"]>;
+        default: undefined;
+    };
+    withCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    groupTrigger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: PkButtonSize;
+    type: "reset" | "submit" | "button";
+    disabled: boolean;
+    dataState: "focus-visible" | "active" | "hover" | undefined;
+    variant: PkButtonVariant;
+    loading: boolean;
+    spinnerVariant: PkSpinnerVariant;
+    spinnerTone: PkSpinnerTone;
+    withCaret: boolean;
+    groupTrigger: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Button.d.ts.map