@revvue/embed-react 0.0.0-beta.2 → 0.0.0-beta.4

package/dist/css/dialog.css

@@ -1 +1 @@
-@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:var(--rvv-z-index);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex;position:fixed}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s;bottom:24px}.rvv-button--trigger[data-position=right]{right:24px}.rvv-button--trigger[data-position=left]{left:24px}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button{bottom:16px}.rvv-button[data-position=right]{right:16px}.rvv-button[data-position=left]{left:16px}}dialog.rvv-dialog{border-radius:var(--radius-base);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);transition:opacity .2s ease,transform .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:0 0;border:none;margin:auto;padding:0;overflow:visible;transform:scale(.96)translateY(10px)}dialog.rvv-dialog[open]{opacity:1;transform:scale(1)translateY(0)}@starting-style{dialog.rvv-dialog[open]{opacity:0;transform:scale(.96)translateY(10px)}}dialog.rvv-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:#00000080}dialog.rvv-dialog[open]::backdrop{opacity:1}@starting-style{dialog.rvv-dialog[open]::backdrop{opacity:0}}.rvv-dialog-wrapper{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);overflow:hidden}.rvv-dialog-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){dialog.rvv-dialog{border-radius:0;max-width:100vw;max-height:100dvh;margin:0}.rvv-dialog-wrapper{border-radius:0;width:100vw;height:100dvh}}
+@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[data-position=left]{left:16px}}dialog.rvv-dialog{border-radius:var(--radius-base);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);transition:opacity .2s ease,transform .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:0 0;border:none;margin:auto;padding:0;overflow:visible;transform:scale(.96)translateY(10px)}dialog.rvv-dialog[open]{opacity:1;transform:scale(1)translateY(0)}@starting-style{dialog.rvv-dialog[open]{opacity:0;transform:scale(.96)translateY(10px)}}dialog.rvv-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:#00000080}dialog.rvv-dialog[open]::backdrop{opacity:1}@starting-style{dialog.rvv-dialog[open]::backdrop{opacity:0}}.rvv-dialog-wrapper{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);overflow:hidden}.rvv-dialog-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){dialog.rvv-dialog{border-radius:0;max-width:100vw;max-height:100dvh;margin:0}.rvv-dialog-wrapper{border-radius:0;width:100vw;height:100dvh}}

package/dist/css/drawer.css

@@ -1 +1 @@
-@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:var(--rvv-z-index);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex;position:fixed}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s;bottom:24px}.rvv-button--trigger[data-position=right]{right:24px}.rvv-button--trigger[data-position=left]{left:24px}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button{bottom:16px}.rvv-button[data-position=right]{right:16px}.rvv-button[data-position=left]{left:16px}}.rvv-drawer{pointer-events:none;z-index:var(--rvv-z-index);background-color:#0000;transition:background-color .35s;position:fixed;inset:0}.rvv-drawer.open{pointer-events:auto;background-color:#0006}.rvv-drawer.open .rvv-drawer-wrapper{transform:translate(0)}.rvv-drawer-wrapper{background-color:var(--rvv-color-background);transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%);box-shadow:-4px 0 24px #0000001f}.rvv-drawer-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){.rvv-drawer-wrapper{width:100vw}}
+@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[data-position=left]{left:16px}}.rvv-drawer{pointer-events:none;z-index:var(--rvv-z-index);background-color:#0000;transition:background-color .35s;position:fixed;inset:0}.rvv-drawer.open{pointer-events:auto;background-color:#0006}.rvv-drawer.open .rvv-drawer-wrapper{transform:translate(0)}.rvv-drawer-wrapper{background-color:var(--rvv-color-background);transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%);box-shadow:-4px 0 24px #0000001f}.rvv-drawer-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){.rvv-drawer-wrapper{width:100vw}}

package/dist/css/popover.css

@@ -1 +1 @@
-@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:var(--rvv-z-index);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex;position:fixed}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s;bottom:24px}.rvv-button--trigger[data-position=right]{right:24px}.rvv-button--trigger[data-position=left]{left:24px}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button{bottom:16px}.rvv-button[data-position=right]{right:16px}.rvv-button[data-position=left]{left:16px}}.rvv-popover{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);opacity:0;transform-origin:100% 100%;max-width:100%;transition:opacity .15s ease,transform .15s ease,display allow-discrete .15s,overlay allow-discrete .15s;z-index:var(--rvv-z-index);display:none;position:fixed;bottom:96px;right:16px;overflow:hidden;transform:translateY(6px)scale(.99)}.rvv-popover.open{opacity:1;display:flex;transform:translateY(0)scale(1)}@starting-style{.rvv-popover.open{opacity:0;transform:translateY(6px)scale(.99)}}.rvv-popover iframe{border:none;width:100%;min-height:100%}.rvv-popover-wrapper{width:100%;min-width:360px;min-height:400px}@media (width<=480px){.rvv-popover{border-radius:var(--radius-base) var(--radius-base) 0 0;transform-origin:bottom;min-width:0;bottom:0;left:0;right:0;width:100%!important}}
+@layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[data-position=left]{left:16px}}.rvv-popover{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);opacity:0;transform-origin:100% 100%;max-width:100%;transition:opacity .15s ease,transform .15s ease,display allow-discrete .15s,overlay allow-discrete .15s;z-index:var(--rvv-z-index);display:none;position:fixed;bottom:96px;right:16px;overflow:hidden;transform:translateY(6px)scale(.99)}.rvv-popover.open{opacity:1;display:flex;transform:translateY(0)scale(1)}@starting-style{.rvv-popover.open{opacity:0;transform:translateY(6px)scale(.99)}}.rvv-popover iframe{border:none;width:100%;min-height:100%}.rvv-popover-wrapper{width:100%;min-width:360px;min-height:400px}@media (width<=480px){.rvv-popover{border-radius:var(--radius-base) var(--radius-base) 0 0;transform-origin:bottom;min-width:0;bottom:0;left:0;right:0;width:100%!important}}

package/dist/package.cjs

@@ -1,8 +1,179 @@
+"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _revvue_embed = require("@revvue/embed");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/dialog/build-stable-deps.ts
+//#region src/internal/slot.tsx
+/**
+* Radix-style `asChild` slot. Clones the single React element child and merges
+* trigger-related props onto it. The child's own props win for non-handler
+* fields (so a consumer's `className` is preserved alongside ours), and event
+* handlers are composed (the child handler runs first, then the slot handler —
+* so consumers can call `event.preventDefault()` to skip our `toggle` call).
+*
+* Throws synchronously if `children` is not a single React element so the
+* misuse is obvious in development.
+*/
+function Slot({ children, ...slotProps }) {
+	if (!(0, react.isValidElement)(children)) throw new Error("`asChild` requires exactly one React element as a child.");
+	const child = children;
+	const childProps = child.props;
+	const merged = {
+		...slotProps,
+		...childProps
+	};
+	if (slotProps.onClick || childProps.onClick) merged.onClick = (event) => {
+		childProps.onClick?.(event);
+		if (!event.defaultPrevented) slotProps.onClick?.(event);
+	};
+	if (slotProps.className || childProps.className) merged.className = [childProps.className, slotProps.className].filter(Boolean).join(" ");
+	if (slotProps.style || childProps.style) merged.style = {
+		...slotProps.style,
+		...childProps.style
+	};
+	return (0, react.cloneElement)(child, merged);
+}
+//#endregion
+//#region src/internal/create-floating-bindings.tsx
+/**
+* Builds a `{ useEmbed, Embed }` pair for a floating embed (drawer, dialog,
+* popover). The hook owns mount/unmount + open-state subscription; the
+* component is a thin wrapper that renders a default `<button>` trigger and
+* spreads `getTriggerProps()` onto it.
+*/
+function createFloatingBindings({ factory, buildStableDeps }) {
+	function useEmbed(props) {
+		const instanceRef = (0, react.useRef)(null);
+		const [isOpen, setIsOpen] = (0, react.useState)(false);
+		(0, react.useEffect)(() => {
+			const instance = factory(props);
+			instanceRef.current = instance;
+			setIsOpen(instance.isOpen());
+			const unsubscribe = instance.subscribe(() => {
+				setIsOpen(instance.isOpen());
+			});
+			return () => {
+				unsubscribe();
+				instance.unmount();
+				instanceRef.current = null;
+			};
+		}, [...buildStableDeps(props)]);
+		const handlers = (0, react.useMemo)(() => ({
+			open: () => void instanceRef.current?.open(),
+			close: () => void instanceRef.current?.close(),
+			toggle: () => void instanceRef.current?.toggle(),
+			refresh: () => void instanceRef.current?.refresh(),
+			focus: () => void instanceRef.current?.focus()
+		}), []);
+		const getTriggerProps = (0, react.useCallback)(() => ({
+			type: "button",
+			onClick: () => handlers.toggle(),
+			"aria-expanded": isOpen,
+			"aria-haspopup": "dialog"
+		}), [handlers, isOpen]);
+		return (0, react.useMemo)(() => ({
+			...handlers,
+			isOpen,
+			getTriggerProps
+		}), [
+			handlers,
+			isOpen,
+			getTriggerProps
+		]);
+	}
+	return {
+		useEmbed,
+		Embed: (0, react.memo)(function FloatingEmbed(props) {
+			const { asChild, children, className, style, onClick, ref, ...embedProps } = props;
+			const { getTriggerProps, focus, close, open, toggle, refresh } = useEmbed(embedProps);
+			const trigger = getTriggerProps();
+			const composedOnClick = (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) trigger.onClick?.(event);
+			};
+			(0, react.useImperativeHandle)(ref, () => ({
+				close,
+				focus,
+				open,
+				refresh,
+				toggle
+			}), [
+				focus,
+				close,
+				open,
+				toggle,
+				refresh
+			]);
+			if (asChild) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+				type: trigger.type,
+				onClick: composedOnClick,
+				className,
+				style,
+				"aria-expanded": trigger["aria-expanded"],
+				"aria-haspopup": trigger["aria-haspopup"],
+				children
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: trigger.type,
+				onClick: composedOnClick,
+				className,
+				style,
+				"aria-expanded": trigger["aria-expanded"],
+				"aria-haspopup": trigger["aria-haspopup"],
+				children
+			});
+		})
+	};
+}
+//#endregion
+//#region src/internal/create-widget-bindings.tsx
+/**
+* Builds a `{ useEmbed, Embed }` pair for an inline widget. Unlike floating
+* embeds, widgets need a host element — the hook returns a `containerRef` the
+* consumer must attach to a DOM node, and the component does that for you by
+* rendering a `<div>`.
+*/
+function createWidgetBindings({ factory, buildStableDeps }) {
+	function useEmbed(props) {
+		const containerRef = (0, react.useRef)(null);
+		const instanceRef = (0, react.useRef)(null);
+		(0, react.useEffect)(() => {
+			if (!containerRef.current) return;
+			const instance = factory(props, containerRef.current);
+			instanceRef.current = instance;
+			return () => {
+				instance.unmount();
+				instanceRef.current = null;
+			};
+		}, [...buildStableDeps(props)]);
+		const handlers = (0, react.useMemo)(() => ({
+			refresh: () => void instanceRef.current?.refresh(),
+			focus: () => void instanceRef.current?.focus()
+		}), []);
+		return (0, react.useMemo)(() => ({
+			...handlers,
+			containerRef
+		}), [handlers]);
+	}
+	return {
+		useEmbed,
+		Embed: (0, react.memo)(function WidgetEmbed(props) {
+			const { className, style, ref, ...embedProps } = props;
+			const { containerRef, focus, refresh } = useEmbed(embedProps);
+			(0, react.useImperativeHandle)(ref, () => ({
+				focus,
+				refresh
+			}), [focus, refresh]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: containerRef,
+				className,
+				style
+			});
+		})
+	};
+}
+//#endregion
+//#region src/bindings/dialog/build-stable-deps.ts
 function buildStableDeps$3(props) {
 	return [
 		props.tenant,
@@ -14,28 +185,21 @@ function buildStableDeps$3(props) {
 	];
 }
 //#endregion
-//#region src/components/dialog/dialog.tsx
-var Dialog = (0, react.forwardRef)(function Dialog(props, ref) {
-	const instanceRef = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(ref, () => ({
-		open: () => void instanceRef.current?.open(),
-		close: () => void instanceRef.current?.close(),
-		toggle: () => void instanceRef.current?.toggle(),
-		refresh: () => void instanceRef.current?.refresh(),
-		focus: () => void instanceRef.current?.focus()
-	}), []);
-	(0, react.useEffect)(() => {
-		const instance = (0, _revvue_embed.createDialog)(props);
-		instanceRef.current = instance;
-		return () => {
-			instance.unmount();
-			instanceRef.current = null;
-		};
-	}, [...buildStableDeps$3(props)]);
-	return null;
+//#region src/bindings/dialog/dialog.ts
+var bindings$3 = createFloatingBindings({
+	factory: (props) => (0, _revvue_embed.createDialog)(props),
+	buildStableDeps: buildStableDeps$3
 });
+var useDialog = bindings$3.useEmbed;
+var Dialog = bindings$3.Embed;
 //#endregion
-//#region src/components/drawer/build-stable-deps.ts
+//#region src/bindings/drawer/build-stable-deps.ts
+/**
+* Identity props — when any of these change between renders the embed instance
+* is torn down and re-created. Keep this in lockstep with the props the
+* underlying `createDrawer` actually consumes; cosmetic React-only props
+* (className/style) must not appear here.
+*/
 function buildStableDeps$2(props) {
 	return [
 		props.tenant,
@@ -43,39 +207,44 @@ function buildStableDeps$2(props) {
 		props.app,
 		props.formId,
 		props.width,
-		props.height,
-		props.label,
-		props.icon,
-		props.position,
-		props.color,
-		props.textColor,
-		props.autoOpen,
-		props.autoOpenDelay
+		props.height
 	];
 }
 //#endregion
-//#region src/components/drawer/drawer.tsx
-var Drawer = (0, react.forwardRef)(function Drawer(props, ref) {
-	const instanceRef = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(ref, () => ({
-		open: () => void instanceRef.current?.open(),
-		close: () => void instanceRef.current?.close(),
-		toggle: () => void instanceRef.current?.toggle(),
-		refresh: () => void instanceRef.current?.refresh(),
-		focus: () => void instanceRef.current?.focus()
-	}), []);
-	(0, react.useEffect)(() => {
-		const instance = (0, _revvue_embed.createDrawer)(props);
-		instanceRef.current = instance;
-		return () => {
-			instance.unmount();
-			instanceRef.current = null;
-		};
-	}, [...buildStableDeps$2(props)]);
-	return null;
+//#region src/bindings/drawer/drawer.ts
+var bindings$2 = createFloatingBindings({
+	factory: (props) => (0, _revvue_embed.createDrawer)(props),
+	buildStableDeps: buildStableDeps$2
 });
+/**
+* Hook form. Use when you want full control over the trigger element.
+*
+* @example
+* ```tsx
+* const drawer = useDrawer({ tenant, app: "chat", type: "drawer" });
+* return <button {...drawer.getTriggerProps()}>Chat</button>;
+* ```
+*/
+var useDrawer = bindings$2.useEmbed;
+/**
+* Component form. Renders a `<button>` trigger that opens the drawer.
+* Use `asChild` to delegate to your own button component (Radix-style).
+*
+* @example
+* ```tsx
+* <Drawer tenant={tenant} app="chat" type="drawer">Chat</Drawer>
+* ```
+*/
+var Drawer = bindings$2.Embed;
 //#endregion
-//#region src/components/popover/build-stable-deps.ts
+//#region src/bindings/popover/build-stable-deps.ts
+/**
+* Popover stable deps intentionally exclude button-styling props
+* (label/icon/color/textColor/position) — those are not consumed by the
+* embed factory in headless mode (`trigger: 'none'`); the React component
+* renders its own trigger element. autoOpen/autoOpenDelay still affect the
+* panel and are tracked.
+*/
 function buildStableDeps$1(props) {
 	return [
 		props.tenant,
@@ -84,54 +253,41 @@ function buildStableDeps$1(props) {
 		props.formId,
 		props.width,
 		props.height,
-		props.label,
-		props.icon,
-		props.position,
-		props.color,
-		props.textColor,
 		props.autoOpen,
 		props.autoOpenDelay
 	];
 }
 //#endregion
-//#region src/components/popover/popover.tsx
+//#region src/bindings/popover/popover.ts
+var bindings$1 = createFloatingBindings({
+	factory: (props) => (0, _revvue_embed.createPopover)({
+		...props,
+		trigger: "none"
+	}),
+	buildStableDeps: buildStableDeps$1
+});
 /**
-* Renders an embedded Revvue form/chat as a floating popover button.
-*
-* The component manages no DOM of its own — it delegates entirely to the
-* `createPopover` factory, which appends the button and panel to `document.body`.
-* Use the forwarded ref to imperatively open, close, or toggle the popover.
+* Hook form. Use when you want to render your own trigger element.
 *
 * @example
 * ```tsx
-* const ref = useRef<PopoverRef>(null)
-*
-* <Popover ref={ref} tenant="acme" app="chat" type="popover" label="Chat with us" />
+* const popover = usePopover({ tenant, app: "chat", type: "popover" });
+* return <button {...popover.getTriggerProps()}>Chat</button>;
+* ```
+*/
+var usePopover = bindings$1.useEmbed;
+/**
+* Component form. Renders a `<button>` trigger that toggles the popover.
+* Use `asChild` to delegate to your own button (Radix-style).
 *
-* <button onClick={() => ref.current?.open()}>Open popover</button>
+* @example
+* ```tsx
+* <Popover tenant={tenant} app="chat" type="popover">Chat</Popover>
 * ```
 */
-var Popover = (0, react.forwardRef)(function Popover(props, ref) {
-	const instanceRef = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(ref, () => ({
-		open: () => void instanceRef.current?.open(),
-		close: () => void instanceRef.current?.close(),
-		toggle: () => void instanceRef.current?.toggle(),
-		refresh: () => void instanceRef.current?.refresh(),
-		focus: () => void instanceRef.current?.focus()
-	}), []);
-	(0, react.useEffect)(() => {
-		const instance = (0, _revvue_embed.createPopover)(props);
-		instanceRef.current = instance;
-		return () => {
-			instance.unmount();
-			instanceRef.current = null;
-		};
-	}, [...buildStableDeps$1(props)]);
-	return null;
-});
+var Popover = bindings$1.Embed;
 //#endregion
-//#region src/components/widget/build-stable-deps.ts
+//#region src/bindings/widget/build-stable-deps.ts
 function buildStableDeps(props) {
 	return [
 		props.tenant,
@@ -143,31 +299,38 @@ function buildStableDeps(props) {
 	];
 }
 //#endregion
-//#region src/components/widget/widget.tsx
-var Widget = (0, react.forwardRef)(function Widget({ className, style, ...props }, ref) {
-	const containerRef = (0, react.useRef)(null);
-	const instanceRef = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(ref, () => ({
-		refresh: () => void instanceRef.current?.refresh(),
-		focus: () => void instanceRef.current?.focus()
-	}), []);
-	(0, react.useEffect)(() => {
-		if (!containerRef.current) return;
-		const instance = (0, _revvue_embed.createWidget)(props, containerRef.current);
-		instanceRef.current = instance;
-		return () => {
-			instance.unmount();
-			instanceRef.current = null;
-		};
-	}, [...buildStableDeps(props)]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: containerRef,
-		className,
-		style
-	});
+//#region src/bindings/widget/widget.ts
+var bindings = createWidgetBindings({
+	factory: (props, element) => (0, _revvue_embed.createWidget)(props, element),
+	buildStableDeps
 });
+/**
+* Hook form. Returns a `containerRef` you must attach to a host element
+* (typically a `<div>`) plus the imperative API.
+*
+* @example
+* ```tsx
+* const widget = useWidget({ tenant, app: "chat", type: "widget" });
+* return <div ref={widget.containerRef} className="my-host" />;
+* ```
+*/
+var useWidget = bindings.useEmbed;
+/**
+* Component form. Renders the host `<div>` for you and accepts `className`
+* and `style` for layout.
+*
+* @example
+* ```tsx
+* <Widget tenant={tenant} app="chat" type="widget" className="h-full w-full" />
+* ```
+*/
+var Widget = bindings.Embed;
 //#endregion
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.Popover = Popover;
 exports.Widget = Widget;
+exports.useDialog = useDialog;
+exports.useDrawer = useDrawer;
+exports.usePopover = usePopover;
+exports.useWidget = useWidget;