@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ## Unreleased
 
+## 2.0.0 - 2026-07-19
+
+### Changed
+- Rebuilt `@verbb/plugin-kit-react` as thin React facades over `@verbb/plugin-kit-web` custom elements (Lit + shadow DOM). Look, behaviour, and accessibility live in the web package.
+- Canonical bootstrap is React `createRoot` + `PluginKitProvider`. Importing a facade registers its custom element — no `createReactApp` / `registerAll` step.
+- `mountShadowApp` and opt-in `createCraftHostBridge` live under `@verbb/plugin-kit-react/utils` (shadow helpers are implemented in `@verbb/plugin-kit-web`).
+- SchemaForm UI bindings stay on `@verbb/plugin-kit-react/forms`; shared store/validation lives in `@verbb/plugin-kit-forms`.
+- Package versions lockstep with `@verbb/plugin-kit-web`, `@verbb/plugin-kit-forms`, `@verbb/plugin-kit-vue`, and related `@verbb/plugin-kit-*` packages at `2.0.0`.
+
+### Removed
+- Removed the Base UI / full React component implementation. Use the facade exports over `<pk-*>` elements instead.
+- Removed React-only EditableTable compound APIs (`renderCell`, `modifyColumn`, dnd-kit row stack). Configure columns on `<EditableTable>` / `<pk-editable-table>`, or compose outside the table.
+
+## 1.0.10 - 2026-07-09
+
+### Added
+- Added `requiredRichText` validation rule for schema fields that store TipTap/ProseMirror JSON, so empty rich-text documents (including `[]` and bare paragraph nodes) are treated as blank.
+- Added `isRichTextEmpty` utility to detect when stored TipTap content has no user-visible text (exported from `@verbb/plugin-kit-react/utils`).
+
+### Changed
+- Changed validation engines to treat both `required` and `requiredRichText` as required-field rules for dependency and shortcut logic.
+
+### Fixed
+- Fixed `translate()` failing validation when Craft's translation helper throws (for example missing translation keys), falling back to the raw message instead.
+
 ## 1.0.9 - 2026-07-02
 
 ### Changed

package/README.md

@@ -1,31 +1,106 @@
-# @verbb/plugin-kit-react
+# `@verbb/plugin-kit-react`
 
-React UI and form primitives for Craft CMS plugin development.
+Thin React facades over `@verbb/plugin-kit-web` custom elements via `@lit/react`.
+
+React does **not** reimplement behavior or styles — it maps props and events to the web component. Importing a facade registers its element. Load tokens + FOUCE CSS as below.
 
 ## Install
 
 ```bash
-npm install @verbb/plugin-kit-react @verbb/plugin-kit react react-dom
+npm install react react-dom @verbb/plugin-kit-react @verbb/plugin-kit-web
 ```
 
-## Usage
+Craft Vite + asset-bundle wiring: [React quick start](https://docs.verbb.io/plugin-kit/react/getting-started/quick-start).
 
-Import only from the published package entrypoints:
+## Bootstrap
 
 ```tsx
-import { useTranslation } from '@verbb/plugin-kit-react/hooks';
-import { Button } from '@verbb/plugin-kit-react/components';
-import { cn } from '@verbb/plugin-kit-react/utils';
 import '@verbb/plugin-kit-react/style.css';
+
+import { createRoot } from 'react-dom/client';
+import { PluginKitProvider } from '@verbb/plugin-kit-react';
+import { Button } from '@verbb/plugin-kit-react/components';
+
+import { App } from './App';
+
+createRoot(document.querySelector('#my-plugin-root')!).render(
+  <PluginKitProvider translationCategory="my-plugin">
+    <App />
+  </PluginKitProvider>,
+);
+```
+
+`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. There is no `createReactApp` / `registerAll` step.
+
+### Shadow DOM screens
+
+```tsx
+import pluginKitStyles from '@verbb/plugin-kit-react/style.css?inline';
+import screenStyles from './screen.css?inline';
+import { createRoot } from 'react-dom/client';
+import { mountShadowApp, PluginKitProvider } from '@verbb/plugin-kit-react/utils';
+
+const { mountNode, portalContainer } = mountShadowApp({
+  element: '#my-plugin-root',
+  styles: [pluginKitStyles, screenStyles],
+});
+
+createRoot(mountNode).render(
+  <PluginKitProvider
+    translationCategory="my-plugin"
+    portalContainer={portalContainer}
+  >
+    <App />
+  </PluginKitProvider>,
+);
 ```
 
-## Public Surface
+Keep a document-level `style.css` (or `plugin-kit.css`) import for FOUCE before first paint; inject tokens into the shadow root as above.
+
+### Icons
+
+`<Icon icon="…">` uses an opt-in registry — register named glyphs, or import `@verbb/plugin-kit-icons/all.js` for the full set:
+
+```ts
+import { registerIcons, plus, gear } from '@verbb/plugin-kit-icons';
+
+registerIcons({ plus, gear });
+```
+
+## Components
+
+### Facades (1:1 with a web component)
+
+```tsx
+import { Select, Option } from '@verbb/plugin-kit-react/components';
+
+<Select value={value} onPkChange={(e) => setValue(e.detail.value)}>
+  <Option value="a">Option A</Option>
+</Select>
+```
+
+### `*Input` convenience wrappers
+
+```tsx
+import { CheckboxInput, RadioGroupInput, SelectInput } from '@verbb/plugin-kit-react/components';
+
+<CheckboxInput checked={agreed} onCheckedChange={setAgreed}>I agree</CheckboxInput>
+```
+
+## Import paths
+
+| Subpath | Purpose |
+|---------|---------|
+| `@verbb/plugin-kit-react` | Provider + common re-exports |
+| `@verbb/plugin-kit-react/components` | UI facades (`Button`, TipTap, EditableTable, …) |
+| `@verbb/plugin-kit-react/forms` | SchemaForm UI + registry (engine in `@verbb/plugin-kit-forms`) |
+| `@verbb/plugin-kit-react/utils` | `mountShadowApp`, `createCraftHostBridge`, `configure`, `cn` |
+| `@verbb/plugin-kit-react/hooks` | `useTranslation` |
+| `@verbb/plugin-kit-react/fault` | Fault boundary / watchdog / support bundle |
+| `@verbb/plugin-kit-react/app` | Provider / configure (parity with Vue `/app`) |
+| `@verbb/plugin-kit-react/style.css` | Tokens + FOUCE + overlay chrome |
 
-- `@verbb/plugin-kit-react` (`useTranslation`)
-- `@verbb/plugin-kit-react/components`
-- `@verbb/plugin-kit-react/forms`
-- `@verbb/plugin-kit-react/hooks`
-- `@verbb/plugin-kit-react/utils`
-- `@verbb/plugin-kit-react/style.css`
+## Docs
 
-Avoid importing from internal source paths. Anything outside the exported subpaths is private and may change without notice.
+- [docs.verbb.io/plugin-kit/react](https://docs.verbb.io/plugin-kit/react/)
+- Workshop (monorepo): `npm run dev` → http://localhost:5175

package/dist/app/PluginKitProvider.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { PluginKitReactConfig } from './configure.js';
+export type PluginKitProviderProps = PluginKitReactConfig & {
+    children: ReactNode;
+};
+/**
+ * Applies Plugin Kit environment config for a React tree.
+ *
+ * Importing React components already registers their underlying custom elements —
+ * no `registerAll` / registration bootstrap. Pass `hostBridge` only when the tree
+ * calls Craft action/selector helpers.
+ *
+ * @example
+ * ```tsx
+ * import { createRoot } from 'react-dom/client';
+ * import { PluginKitProvider, Button } from '@verbb/plugin-kit-react';
+ *
+ * createRoot(el).render(
+ *   <PluginKitProvider translationCategory="my-plugin">
+ *     <Button>Save</Button>
+ *   </PluginKitProvider>,
+ * );
+ * ```
+ */
+export declare function PluginKitProvider({ children, ...config }: PluginKitProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Read the nearest {@link PluginKitProvider} config (empty object when absent). */
+export declare const usePluginKitConfig: () => PluginKitReactConfig;
+//# 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.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IACxD,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAIF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,sBAAsB,2CAShF;AAED,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,QAAO,oBAErC,CAAC"}

package/dist/app/PluginKitProvider.js

@@ -0,0 +1,39 @@
+import { configure } from "./configure.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/PluginKitProvider.tsx
+var PluginKitConfigContext = createContext({});
+/**
+* Applies Plugin Kit environment config for a React tree.
+*
+* Importing React components already registers their underlying custom elements —
+* no `registerAll` / registration bootstrap. Pass `hostBridge` only when the tree
+* calls Craft action/selector helpers.
+*
+* @example
+* ```tsx
+* import { createRoot } from 'react-dom/client';
+* import { PluginKitProvider, Button } from '@verbb/plugin-kit-react';
+*
+* createRoot(el).render(
+*   <PluginKitProvider translationCategory="my-plugin">
+*     <Button>Save</Button>
+*   </PluginKitProvider>,
+* );
+* ```
+*/
+function PluginKitProvider({ children, ...config }) {
+	configure(config);
+	return /* @__PURE__ */ jsx(PluginKitConfigContext.Provider, {
+		value: config,
+		children
+	});
+}
+/** Read the nearest {@link PluginKitProvider} config (empty object when absent). */
+var usePluginKitConfig = () => {
+	return useContext(PluginKitConfigContext);
+};
+//#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.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    type ReactNode,\n} from 'react';\n\nimport { configure, type PluginKitReactConfig } from './configure.js';\n\nexport type PluginKitProviderProps = PluginKitReactConfig & {\n    children: ReactNode;\n};\n\nconst PluginKitConfigContext = createContext<PluginKitReactConfig>({});\n\n/**\n * Applies Plugin Kit environment config for a React tree.\n *\n * Importing React 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 * ```tsx\n * import { createRoot } from 'react-dom/client';\n * import { PluginKitProvider, Button } from '@verbb/plugin-kit-react';\n *\n * createRoot(el).render(\n *   <PluginKitProvider translationCategory=\"my-plugin\">\n *     <Button>Save</Button>\n *   </PluginKitProvider>,\n * );\n * ```\n */\nexport function PluginKitProvider({ children, ...config }: PluginKitProviderProps) {\n    // Sync apply before children render overlays — same timing as the old createReactApp path.\n    configure(config);\n\n    return (\n        <PluginKitConfigContext.Provider value={config}>\n            {children}\n        </PluginKitConfigContext.Provider>\n    );\n}\n\n/** Read the nearest {@link PluginKitProvider} config (empty object when absent). */\nexport const usePluginKitConfig = (): PluginKitReactConfig => {\n    return useContext(PluginKitConfigContext);\n};\n"],"mappings":";;;;AAYA,IAAM,yBAAyB,cAAoC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;AAqBtE,SAAgB,kBAAkB,EAAE,UAAU,GAAG,UAAkC;AAE/E,WAAU,OAAO;AAEjB,QACI,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACnC;EAC6B,CAAA;;;AAK1C,IAAa,2BAAiD;AAC1D,QAAO,WAAW,uBAAuB"}

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 PluginKitReactConfig = 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 React 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 (e.g. Craft chrome slots) that need a different portal target.
+ */
+export declare const configure: (config: PluginKitReactConfig) => void;
+/** Alias for `configure()`. */
+export declare const configurePluginKitReact: (config: PluginKitReactConfig) => 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,oBAAoB,GAAG,kBAAkB,GAAG;IACpD,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,oBAAoB,KAAG,IAwCxD,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,uBAAuB,WA3CF,oBAAoB,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 React 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 (e.g. Craft chrome slots) 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 configurePluginKitReact = configure;
+//#endregion
+export { configure, configurePluginKitReact };
+
+//# 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 PluginKitReactConfig = 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 React 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 (e.g. Craft chrome slots) that need a different portal target.\n */\nexport const configure = (config: PluginKitReactConfig): 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 configurePluginKitReact = 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,WAAuC;CAC7D,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,0BAA0B"}

package/dist/app/index.d.ts

@@ -0,0 +1,5 @@
+export { configure, configurePluginKitReact, type PluginKitReactConfig, 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,uBAAuB,EACvB,KAAK,oBAAoB,EACzB,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, configurePluginKitReact } from "./configure.js";
+import { PluginKitProvider, usePluginKitConfig } from "./PluginKitProvider.js";
+import { mountShadowApp } from "./mountShadowApp.js";
+import { createCraftHostBridge } from "../utils/craftHostBridge.js";
+export { PluginKitProvider, configure, configurePluginKitReact, 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-react` / `/utils` 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

@@ -1,26 +1,27 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "none" | "primary" | "secondary" | "dashed" | "outline" | "transparent" | "ghost" | null | undefined;
-    size?: "default" | "none" | "xxs" | "xs" | "sm" | "icon" | "lg" | "xl" | null | undefined;
-    loading?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type SpinnerVariant = 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent';
-type SpinnerSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null;
-declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & VariantProps<(props?: ({
-    variant?: "link" | "default" | "none" | "primary" | "secondary" | "dashed" | "outline" | "transparent" | "ghost" | null | undefined;
-    size?: "default" | "none" | "xxs" | "xs" | "sm" | "icon" | "lg" | "xl" | null | undefined;
-    loading?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
-    asChild?: boolean;
-    render?: ReactElement;
-    href?: string;
-    target?: string;
-    rel?: string;
-    download?: string | boolean;
-    spinnerSize?: SpinnerSize;
-    spinnerVariant?: SpinnerVariant;
-    spinnerClassName?: string;
-} & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { Button, buttonVariants };
+import { default as React } from 'react';
+import { PkButton, PkButtonSize, PkButtonVariant } from '@verbb/plugin-kit-web/components/button/pk-button.js';
+import { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '@verbb/plugin-kit-web/components/spinner/pk-spinner.js';
+declare const PkButtonElement: import('@lit/react').ReactWebComponent<PkButton, {
+    onPkClick: string;
+}>;
+export type ButtonProps = React.ComponentProps<typeof PkButtonElement> & {
+    variant?: PkButtonVariant;
+    size?: PkButtonSize;
+    /** Compact hug-the-glyph density — omit for default square icon-only hit box. */
+    icon?: boolean;
+    /** Craft `.menubtn` disclosure end-cap in a button group. */
+    groupTrigger?: boolean;
+    withCaret?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    /** Override spinner size — v1 Button `spinnerSize` (e.g. `xs` on `size="lg"`). */
+    spinnerSize?: PkSpinnerSize;
+    spinnerVariant?: PkSpinnerVariant;
+    spinnerTone?: PkSpinnerTone;
+    'data-state'?: 'hover' | 'focus-visible' | 'active';
+};
+/** React facade over `<pk-button>`. Behavior and styles live in the web component. */
+export declare function Button({ children, variant, size, icon, groupTrigger, withCaret, loading, disabled, type, spinnerSize, spinnerVariant, spinnerTone, 'data-state': dataState, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { PkButtonElement };
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,KAAK,oBAAoB,EAMzB,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,QAAA,MAAM,cAAc;;;;8EA6ElB,CAAC;AAEH,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,CAAC;AACjG,KAAK,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAenE,QAAA,MAAM,MAAM;;;;;cAXM,OAAO;aACR,YAAY;WACd,MAAM;aACJ,MAAM;UACT,MAAM;eACD,MAAM,GAAG,OAAO;kBACb,WAAW;qBACR,cAAc;uBACZ,MAAM;yEAyH/B,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,sDAAsD,CAAC;AACzH,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAI7H,QAAA,MAAM,eAAe;;EAOnB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACrE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC;CACvD,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAe,EACf,QAAgB,EAChB,IAAe,EACf,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACX,EAAE,WAAW,2CAkBb;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/Button.js

@@ -1,148 +1,41 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Spinner } from "./Spinner.js";
-import "./index.js";
-import { Slot } from "./Slot.js";
-import { forwardRef } from "react";
-import { cva } from "class-variance-authority";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkButton } from "@verbb/plugin-kit-web/components/button/pk-button.js";
 //#region src/components/Button.tsx
-var buttonVariants = cva("", {
-	variants: {
-		variant: {
-			default: [
-				"bg-slate-250 text-gray-700",
-				"hover:not-disabled:bg-slate-300",
-				"active:not-disabled:bg-slate-400",
-				"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
-				"data-[popup-open]:bg-slate-300"
-			],
-			primary: [
-				"antialiased",
-				"bg-red-600 text-white border-primary-500",
-				"hover:not-disabled:bg-red-700",
-				"active:not-disabled:bg-red-800",
-				"focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
-				"data-[popup-open]:bg-red-700"
-			],
-			secondary: [
-				"antialiased",
-				"bg-gray-500 text-white",
-				"hover:not-disabled:bg-gray-550",
-				"active:not-disabled:bg-gray-600",
-				"focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
-				"data-[popup-open]:bg-gray-550"
-			],
-			dashed: [
-				"bg-transparent border-dashed border border-slate-500",
-				"hover:not-disabled:bg-slate-150",
-				"active:not-disabled:bg-slate-250",
-				"focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
-				"data-[popup-open]:bg-slate-250"
-			],
-			outline: [
-				"bg-transparent border border-slate-400",
-				"hover:not-disabled:bg-slate-150",
-				"active:not-disabled:bg-slate-250",
-				"focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
-				"data-[popup-open]:bg-slate-250"
-			],
-			transparent: [
-				"hover:not-disabled:bg-slate-150",
-				"active:not-disabled:bg-slate-250",
-				"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
-				"data-[popup-open]:bg-slate-250"
-			],
-			ghost: [
-				"hover:not-disabled:bg-slate-150",
-				"active:not-disabled:bg-slate-250",
-				"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]"
-			],
-			link: [
-				"rounded-none px-0 py-0 text-sky-700 underline-offset-2",
-				"hover:not-disabled:underline",
-				"focus-visible:shadow-none focus-visible:underline"
-			],
-			none: []
-		},
-		size: {
-			default: "px-[10px] py-[7px]",
-			none: "p-0",
-			xxs: "px-[5px] py-[1px] text-[11px] rounded-sm",
-			xs: "px-[8px] py-[3px] text-[12px] rounded-sm",
-			sm: "px-[9px] py-[5px] text-[13px] rounded-md",
-			icon: "size-8 p-0 justify-center",
-			lg: "px-[12px] py-[9px]",
-			xl: "px-[16px] py-[10px] text-base"
-		},
-		loading: { true: "cursor-default" }
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-		loading: false
-	}
+var PkButtonElement = createPluginKitComponent({
+	tagName: "pk-button",
+	elementClass: PkButton,
+	react: React,
+	events: { onPkClick: "click" }
 });
-var Button = forwardRef(({ className, variant, size, spinnerSize = null, spinnerVariant, spinnerClassName = "", loading = false, children, asChild = false, render, href, type, ...props }, ref) => {
-	if (spinnerSize === null) if (size === "xxs" || size === "xs") spinnerSize = "xxs";
-	else if (size === "lg" || size === "xl") spinnerSize = "sm";
-	else spinnerSize = "xs";
-	const resolvedVariant = variant === "ghost" ? "transparent" : variant;
-	const resolvedSpinnerVariant = spinnerVariant || (resolvedVariant === "primary" || resolvedVariant === "secondary" || resolvedVariant === "dashed" || resolvedVariant === "outline" || resolvedVariant === "transparent" ? resolvedVariant : "default");
-	const sharedProps = {
-		"data-slot": "button",
-		"data-size": size || "default",
-		className: cn("no-underline hover:no-underline", "inline-flex cursor-pointer outline-none gap-1 items-center justify-center whitespace-nowrap transition-colors", "rounded-lg", "disabled:opacity-50 disabled:cursor-[not-allowed]! disabled:select-none", loading && ["relative pointer-events-none text-transparent!", "select-none!"], "[&[data-size='xxs']_svg:not([class*='size-'])]:size-3", "[&[data-size='xs']_svg:not([class*='size-'])]:size-3.5", "[&[data-size='sm']_svg:not([class*='size-'])]:size-3.5", "[&:not([data-size='xxs']):not([data-size='xs']):not([data-size='sm'])_svg:not([class*='size-'])]:size-4", "[&_svg]:pointer-events-none [&_svg]:shrink-0", buttonVariants({
-			variant: resolvedVariant,
-			size,
-			loading,
-			className
-		}))
-	};
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [loading && /* @__PURE__ */ jsx(Spinner, {
-		variant: resolvedSpinnerVariant,
-		size: spinnerSize,
-		className: cn("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", spinnerClassName)
-	}), children] });
-	if (render) return /* @__PURE__ */ jsx(Slot, {
-		...sharedProps,
-		children: render
-	});
-	if (asChild) return /* @__PURE__ */ jsx(Slot, {
-		...sharedProps,
-		children
-	});
-	if (href) {
-		const anchorProps = {
-			target: props.target,
-			rel: props.rel,
-			download: props.download,
-			onClick: props.onClick,
-			onFocus: props.onFocus,
-			onBlur: props.onBlur,
-			onMouseEnter: props.onMouseEnter,
-			onMouseLeave: props.onMouseLeave,
-			onKeyDown: props.onKeyDown,
-			onKeyUp: props.onKeyUp,
-			onCopy: props.onCopy
-		};
-		return /* @__PURE__ */ jsx("a", {
-			ref,
-			href,
-			...sharedProps,
-			...anchorProps,
-			children: content
-		});
-	}
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: type || "button",
-		...sharedProps,
+/** React facade over `<pk-button>`. Behavior and styles live in the web component. */
+function Button({ children, variant = "default", size = "default", icon, groupTrigger, withCaret, loading = false, disabled = false, type = "button", spinnerSize, spinnerVariant, spinnerTone, "data-state": dataState, ...props }) {
+	return /* @__PURE__ */ jsx(PkButtonElement, {
+		variant,
+		size,
+		loading,
+		disabled,
+		type,
+		...trueBooleanProps([
+			"icon",
+			"groupTrigger",
+			"withCaret"
+		], {
+			icon,
+			groupTrigger,
+			withCaret
+		}),
+		...spinnerSize ? { "spinner-size": spinnerSize } : {},
+		...spinnerVariant ? { "spinner-variant": spinnerVariant } : {},
+		...spinnerTone ? { "spinner-tone": spinnerTone } : {},
+		...dataState ? { "data-state": dataState } : {},
 		...props,
-		children: content
+		children
 	});
-});
+}
 //#endregion
-export { Button, buttonVariants };
+export { Button, PkButtonElement };
 
 //# sourceMappingURL=Button.js.map