@jini-ai/ui-kit 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @jini-ai/ui-kit
 
+## 0.1.4 — 2026-10-13
+
+- Break facade/native import cycles: native dialogs pick the provider's Button through a context-only lookup (`NativeButton` fallback; `nativeActions` still forces native), and `ToastRegion` creates its Toast elements. No API change.
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/react/Kit.hooks.d.ts

@@ -25,6 +25,7 @@ export declare function useFacade<K extends Exclude<ImplementedComponentName, 'C
     };
 };
 export declare function useToast(_required?: Record<string, never>, _optional?: Record<string, never>): import("../toast.js").ToastService;
+/** Observe toast messages and disposal-owned service state; ToastRegion owns element creation. */
 export declare function useToastRegion(required: {
     service?: ReturnType<typeof createToastService>;
     attrs?: ToastProps['attrs'];
@@ -34,6 +35,7 @@ export declare function useToastRegion(required: {
         id?: string;
         'data-jini-part': string;
     };
-    children: import("react").FunctionComponentElement<ToastProps>[];
+    messages: readonly import("../toast.js").ToastMessage[];
+    service: import("../toast.js").ToastService;
 };
 //# sourceMappingURL=Kit.hooks.d.ts.map

package/dist/react/Kit.hooks.js

@@ -1,17 +1,16 @@
-import { useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, createElement } from 'react';
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
-import { KitContext } from './context.js';
+import { useKitContext } from './context.js';
 import { createKit } from './kit.js';
 import { assertKitContract, KitConfigError } from '../needs.js';
 import { kitSpec } from '../kit.spec.js';
 import { createToastService } from '../toast.js';
-import { Toast } from './facade.js';
 let defaultValue;
 function getDefault() {
     return defaultValue ??= { kit: createKit({}), agent: undefined, overlayContainer: null, toast: undefined, cancelLabel: 'Cancel', guard: 'fallback' };
 }
 export function useKit(_required = {}, _optional = {}) {
-    return useContext(KitContext) ?? getDefault();
+    return useKitContext({}) ?? getDefault();
 }
 export function useKitProvider(required, _optional = {}) {
     const fallback = useMemo(() => createKit({}), []);
@@ -74,14 +73,13 @@ export function useToast(_required = {}, _optional = {}) {
         throw new KitConfigError({ issues: ['useToast requires a KitProvider or an injected toast service'] });
     return service;
 }
+/** Observe toast messages and disposal-owned service state; ToastRegion owns element creation. */
 export function useToastRegion(required, _optional = {}) {
     const context = useKit({});
     const service = required.service ?? context.toast;
     if (!service)
         throw new KitConfigError({ issues: ['ToastRegion requires a KitProvider or a service'] });
     const messages = useSyncExternalStore(listener => service.subscribe({ listener }), () => service.snapshot({}), () => service.snapshot({}));
-    const children = messages.map(message => createElement(Toast, { key: message.id, message: message.message,
-        ...(message.tone ? { tone: message.tone } : {}), onDismiss: () => service.dismiss({ id: message.id }) }));
-    return { container: useOverlayContainer({}), attrs: { 'data-jini-part': 'kit.toast-region', ...required.attrs }, children };
+    return { container: useOverlayContainer({}), attrs: { 'data-jini-part': 'kit.toast-region', ...required.attrs }, messages, service };
 }
 //# sourceMappingURL=Kit.hooks.js.map

package/dist/react/KitProvider.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Toast } from './facade.js';
 import { KitContext } from './context.js';
 import { useKitProvider, useToastRegion, renderOverlay } from './Kit.hooks.js';
 export function KitProvider(props, _optional = {}) {
@@ -10,6 +11,6 @@ export function Overlay(props, _optional = {}) {
 }
 export function ToastRegion(props, _optional = {}) {
     const vm = useToastRegion(props);
-    return _jsx(Overlay, { container: vm.container, children: _jsx("div", { ...vm.attrs, "aria-live": "polite", "aria-relevant": "additions removals", children: vm.children }) });
+    return _jsx(Overlay, { container: vm.container, children: _jsx("div", { ...vm.attrs, "aria-live": "polite", "aria-relevant": "additions removals", children: vm.messages.map(message => _jsx(Toast, { message: message.message, ...(message.tone ? { tone: message.tone } : {}), onDismiss: () => vm.service.dismiss({ id: message.id }) }, message.id)) }) });
 }
 //# sourceMappingURL=KitProvider.js.map

package/dist/react/context.d.ts

@@ -6,4 +6,8 @@ export declare function getSharedKitContext(required: {
     version: string;
 }, _optional?: Record<string, never>): Context<KitContextValue | null>;
 export declare const KitContext: Context<KitContextValue | null>;
+/** Context-only lookup for native views: no default-kit assembly or facade dependency.
+ * @returns The nearest provider binding, or null so a native view can use its own defaults.
+ */
+export declare function useKitContext(_required?: Record<string, never>, _optional?: Record<string, never>): KitContextValue | null;
 //# sourceMappingURL=context.d.ts.map

package/dist/react/context.js

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 const CONTEXT_KEY = Symbol.for('@jini-ai/ui-kit/react/context@1');
 export function isDevelopment(_required, _optional = {}) {
     // Keep the standard expression intact for bundlers to replace. A typeof-process shortcut would
@@ -21,4 +21,10 @@ export function getSharedKitContext(required, _optional = {}) {
     return slot.context;
 }
 export const KitContext = getSharedKitContext({ version: '0.1.0' });
+/** Context-only lookup for native views: no default-kit assembly or facade dependency.
+ * @returns The nearest provider binding, or null so a native view can use its own defaults.
+ */
+export function useKitContext(_required = {}, _optional = {}) {
+    return useContext(KitContext);
+}
 //# sourceMappingURL=context.js.map

package/dist/react/native/Dialog.hooks.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEvent, SyntheticEvent } from 'react';
-import type { DialogProps, ConfirmViewProps } from '../types.js';
+import type { DialogProps, ConfirmViewProps, ReactKit } from '../types.js';
 /** Native modal lifecycle shared by kit views and compatibility adapters; DOM effects are O(1).
  * The document port preserves hosts' focus injection seam without introducing another lifecycle.
  * @example useNativeDialog({ open, title, onClose }, { initialFocus: () => cancelRef.current?.focus() })
@@ -33,9 +33,17 @@ export declare function useNativeDialog(required: DialogProps, optional?: {
         'aria-labelledby': string;
     };
 };
-export declare function useNativeConfirm(required: ConfirmViewProps, _optional?: Record<string, never>): {
+/** Native confirmation lifecycle with the view-selected Button. A failed conformance guard
+ * forces native actions even when a provider supplied a custom Button.
+ * @param required The shared confirmation controller.
+ * @param options Button selected by the native view's context-only lookup.
+ * @returns Dialog bindings and the action component that preserves the safety override.
+ */
+export declare function useNativeConfirm(required: ConfirmViewProps, { Button }?: {
+    Button?: ReactKit['Button'];
+}): {
     controller: import("../types.js").ConfirmController;
-    Button: import("react").ForwardRefExoticComponent<Omit<import("../types.js").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Button: import("react").ForwardRefExoticComponent<Omit<import("../types.js").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>> | import("react").ComponentType<import("../types.js").ButtonProps>;
     props: {
         className: string;
         role: string;

package/dist/react/native/Dialog.hooks.js

@@ -1,5 +1,4 @@
 import { useId, useImperativeHandle, useLayoutEffect, useRef } from 'react';
-import { Button } from '../facade.js';
 import { NativeButton } from './Controls.js';
 /** Native modal lifecycle shared by kit views and compatibility adapters; DOM effects are O(1).
  * The document port preserves hosts' focus injection seam without introducing another lifecycle.
@@ -48,10 +47,29 @@ export function useNativeDialog(required, optional = {}) {
             'aria-busy': required.pending,
             onCancel: (event) => { event.preventDefault(); if (!required.pending)
                 required.onClose({}); },
-            onClick: (event) => { if (event.target === event.currentTarget && !required.pending)
+            // A click whose target is the <dialog> itself is not always the backdrop: the dialog's own
+            // padding and gaps hit it too, and so does the click that dismisses a native date/select
+            // popup inside it (seen live: closing a datetime picker closed the whole modal). Only a point
+            // outside the dialog's box is a backdrop click.
+            onClick: (event) => { if (event.target === event.currentTarget && !required.pending && isOutsideBox(event))
                 required.onClose({}); } } };
 }
-export function useNativeConfirm(required, _optional = {}) {
+/** True when the pointer is outside the dialog's own rectangle, i.e. on the ::backdrop. A click with no
+ *  coordinates (keyboard activation, synthetic test clicks) keeps the old target-only behaviour. */
+function isOutsideBox(event) {
+    const { clientX: x, clientY: y } = event;
+    if (x === 0 && y === 0)
+        return true;
+    const r = event.currentTarget.getBoundingClientRect();
+    return x < r.left || x > r.right || y < r.top || y > r.bottom;
+}
+/** Native confirmation lifecycle with the view-selected Button. A failed conformance guard
+ * forces native actions even when a provider supplied a custom Button.
+ * @param required The shared confirmation controller.
+ * @param options Button selected by the native view's context-only lookup.
+ * @returns Dialog bindings and the action component that preserves the safety override.
+ */
+export function useNativeConfirm(required, { Button = NativeButton } = {}) {
     const c = required.controller;
     const vm = useNativeDialog({ open: c.open, title: c.title, pending: c.pending, onClose: () => c.requestDismiss({ reason: 'close' }) }, { initialFocus: () => c.focusInitial({}) });
     return { ...vm, controller: c, Button: c.nativeActions ? NativeButton : Button,

package/dist/react/native/Dialog.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useNativeDialog, useNativeConfirm } from './Dialog.hooks.js';
-import { Button } from '../facade.js';
+import { useKitContext } from '../context.js';
+import { NativeButton } from './Controls.js';
 export const NativeDialog = forwardRef(function NativeDialog(props, ref) {
+    const Button = useKitContext({})?.kit.components.Button ?? NativeButton;
     const vm = useNativeDialog({ ...props, ref });
     return _jsxs("dialog", { ...vm.props, children: [_jsx("h2", { className: "jini-dialog-title", id: vm.titleId, "data-jini-part": "kit.dialog-title", children: vm.title }), vm.children, _jsx(Button, { ...vm.closeProps, children: vm.closeLabel })] });
 });
 export function NativeConfirmDialog(props, _optional = {}) {
-    const vm = useNativeConfirm(props);
+    const Button = useKitContext({})?.kit.components.Button ?? NativeButton;
+    const vm = useNativeConfirm(props, { Button });
     return _jsxs("dialog", { ...vm.props, children: [_jsx("h2", { className: "jini-confirm-dialog-title", ...vm.controller.titleAttrs, children: vm.controller.title }), _jsxs("div", { className: "jini-confirm-dialog-body", "data-jini-part": "confirm.body", children: [vm.controller.body, _jsx("p", { className: "jini-confirm-dialog-consequence", ...vm.controller.consequenceAttrs, children: vm.controller.consequence }), vm.controller.error] }), _jsxs("div", { className: "jini-confirm-dialog-actions", "data-jini-part": "confirm.actions", children: [_jsx(vm.Button, { ...vm.controller.cancel }), _jsx(vm.Button, { ...vm.controller.confirm })] })] });
 }
 //# sourceMappingURL=Dialog.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui-kit",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Framework-free UI contract, injected React facades and native defaults.",
   "license": "Apache-2.0",
   "repository": {