@featherk/composables 0.11.2 → 0.12.0

package/dist/id/index.d.ts

@@ -0,0 +1,2 @@
+export { useCompositeId } from "./useCompositeId";
+export type { CompositeIdPart, UseCompositeIdReturn } from "./useCompositeId";

package/dist/id/useCompositeId.d.ts

@@ -0,0 +1,17 @@
+/** A stable segment used to compose a component-scoped DOM identifier. */
+export type CompositeIdPart = string | number | null | undefined;
+/** Values returned by {@link useCompositeId}. */
+export type UseCompositeIdReturn = {
+    /** Unique Vue component-instance identifier, prefixed for FeatherK markup. */
+    instanceId: string;
+    /** Combines the component instance ID with stable logical identifier segments. */
+    compose: (...parts: CompositeIdPart[]) => string;
+};
+/**
+ * Creates component-scoped DOM identifiers from Vue's SSR-safe `useId()`.
+ *
+ * Use the resulting `instanceId` for a stable local base and `compose` for
+ * related trigger, menu, popup, and ARIA relationship IDs. This does not
+ * replace consumer-owned domain IDs used for shared state or registries.
+ */
+export declare const useCompositeId: (prefix?: string) => UseCompositeIdReturn;

package/dist/id/useCompositeId.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export * from "./grid";
 export * from "./address";
 export * from "./form";
+export * from "./id";
 export * from "./menu";
+export * from "./observer";
 export * from "./registry";
 export { useMaskedDateInput } from "./date";
 export type { ChangePayload as DateChangePayload } from "./date";

package/dist/menu/usePopupMenu.d.ts

@@ -1,9 +1,36 @@
-import { type ComponentPublicInstance, type Ref } from "vue";
+import { type ComponentPublicInstance, type ComputedRef, type MaybeRefOrGetter, type Ref } from "vue";
 /** A template ref that may point to an element or a Vue/Kendo component. */
 export type PopupMenuElementRef = Ref<HTMLElement | ComponentPublicInstance | null>;
 export type PopupMenuTriggerMode = "button" | "row";
+export type PopupMenuOffset = {
+    left: number;
+    top: number;
+};
+/** Offset-positioning options for a Popup with a dynamically changing trigger. */
+export type PopupMenuAnchorOptions = {
+    /** Scrollable/clipping container used for out-of-view dismissal. */
+    clipRoot?: MaybeRefOrGetter<Element | null>;
+    /** Closes the menu after its trigger leaves the clipping container. */
+    hideWhenAnchorClipped?: boolean;
+    /** Overrides the trigger rect for pointer-positioned menus. */
+    getRect?: () => DOMRect | null;
+};
 /** Why the popup was closed, including the focus policy for mouse paths. */
-export type PopupMenuCloseReason = "keyboard" | "mouse-selection" | "outside-click" | "trigger-click" | null;
+export type PopupMenuCloseReason = 
+/** Keyboard-driven menu selection (Enter/Space on a menu item); restores the configured focus target. */
+"keyboard"
+/** Escape key; restores the configured focus target, then `escapeFocusTarget`, then the trigger. */
+ | "escape"
+/** Pointer menu selection; restores focus to the trigger. */
+ | "mouse-selection"
+/** Pointer interaction outside the menu; leaves browser focus unchanged. */
+ | "outside-click"
+/** Interaction with the open trigger; leaves browser focus unchanged. */
+ | "trigger-click"
+/** Trigger left its clipping area; closes without scrolling it back into view. */
+ | "anchor-hidden"
+/** No close has been requested yet. */
+ | null;
 export type PopupMenuCloseTrigger = Exclude<PopupMenuCloseReason, null>;
 /** Minimal event shape emitted by Kendo Menu `@select`. */
 export type KendoMenuSelectEvent = {
@@ -22,10 +49,10 @@ export type UsePopupMenuOptions = {
     menuRef: PopupMenuElementRef;
     /** Ref to the trigger button element or component. Ignored by outside-click detection. */
     triggerRef: PopupMenuElementRef;
-    /** Called to open the popup menu. */
-    requestShow: () => void;
-    /** Called to close the popup menu. */
-    requestHide: () => void;
+    /** Called to open the popup menu. Kendo passes its event args as a rest tuple. */
+    requestShow: (...args: unknown[]) => void;
+    /** Called to close the popup menu. Kendo passes its event args as a rest tuple. */
+    requestHide: (...args: unknown[]) => void;
     /**
      * Optional target to focus after a keyboard-driven close.
      * Supports ordinary elements and Vue/Kendo components exposing `$el`.
@@ -36,6 +63,24 @@ export type UsePopupMenuOptions = {
      * Takes precedence over `focusTargetRef`.
      */
     resolveFocusTarget?: () => HTMLElement | null;
+    /**
+     * Resolves a fallback focus target for Escape closes when no `focusTargetRef`/
+     * `resolveFocusTarget` is configured, e.g. the trigger's containing grid row so
+     * keyboard users land back in row navigation instead of on the trigger button.
+     * Only consulted for `triggerMode: "button"`; row triggers already restore to
+     * themselves. Takes effect only for Escape, not keyboard menu selection.
+     * Takes precedence over `escapeFocusContainerSelector`.
+     */
+    escapeFocusTarget?: () => HTMLElement | null;
+    /**
+     * CSS selector for the closest ancestor of the trigger (or, if the menu was
+     * never opened, of `document.activeElement`) to focus on Escape. Sugar over
+     * `escapeFocusTarget` for the common "collapse back into the row" case.
+     * Defaults to `".k-table-row"` for `triggerMode: "button"`; harmless to leave
+     * at its default for non-grid button triggers since a missing ancestor simply
+     * falls through to focusing the trigger. Ignored when `escapeFocusTarget` is set.
+     */
+    escapeFocusContainerSelector?: string;
     /**
      * CSS selector used to find the first focusable menu item after open.
      * Defaults to `".k-menu-item:not(.k-disabled)"` for Kendo Menu.
@@ -53,16 +98,18 @@ export type UsePopupMenuOptions = {
      * silently managed.
      */
     triggerMode: PopupMenuTriggerMode;
+    /** Enables offset positioning and lifecycle tracking for a dynamic trigger. */
+    anchor?: PopupMenuAnchorOptions | true;
 };
 /** Functions returned by {@link usePopupMenu} for the action menu. */
 export type UsePopupMenuReturn = {
     /** Opens the menu, or closes it when it is already open. */
-    handleActionButtonClick: () => void;
+    handleActionButtonClick: (...args: unknown[]) => void;
     /**
      * Handles keyboard input on the action button. Enter and Space open or close
      * the menu. Escape closes an open menu or moves focus to the configured target.
      */
-    handleActionButtonKeydown: (event: KeyboardEvent) => void;
+    handleActionButtonKeydown: (...args: unknown[]) => void;
     /** Closes the menu when Escape is pressed while using the menu. */
     handleActionMenuEscape: (event: KeyboardEvent) => void;
     /**
@@ -75,6 +122,8 @@ export type UsePopupMenuReturn = {
      * configured focus target; mouse menu selections return focus to the trigger.
      */
     handlePopupClose: () => void;
+    /** Bind to Kendo Popup's `offset` prop when `anchor` is enabled. */
+    offset: ComputedRef<PopupMenuOffset>;
 };
 /**
  * Composable for accessible Kendo Popup + Menu action-menu interactions.

package/dist/observer/index.d.ts

@@ -0,0 +1 @@
+export * from "./useIntersectionObserver";

package/dist/observer/useIntersectionObserver.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from "vue";
+export type UseIntersectionObserverOptions = {
+    /** Element to observe; the observer reinitializes whenever this ref changes. */
+    target: Readonly<Ref<Element | null>>;
+    /**
+     * Resolves the scroll container that clips the target. Grid consumers must
+     * provide the actual scrolling container, such as `.k-grid-content`. The
+     * observer reinitializes whenever the resolved root element changes.
+     */
+    root: () => Element | null;
+    /**
+     * One or more intersection ratios from `0` through `1`. `0` observes entry
+     * and complete departure; `1` observes full visibility. Defaults to `1`.
+     */
+    threshold?: number | number[];
+    /** Called whenever the target's intersection state changes. */
+    onChange: (entry: IntersectionObserverEntry) => void;
+};
+export type UseIntersectionObserverReturn = {
+    /** Stops observing the current target. Observation resumes if the target ref changes. */
+    disconnect: () => void;
+};
+/**
+ * Observes a reactive element against a lazily resolved clipping root.
+ *
+ * By default, the observer uses a threshold of `1`, so consumers are notified
+ * when the target is no longer fully visible within its root. The observer
+ * reinitializes whenever the target or resolved root changes. If
+ * `IntersectionObserver` is unavailable (e.g. SSR), this is a no-op.
+ */
+export declare const useIntersectionObserver: (options: UseIntersectionObserverOptions) => UseIntersectionObserverReturn;

package/dist/observer/useIntersectionObserver.test.d.ts

@@ -0,0 +1 @@
+export {};

package/docs/date/useMaskedDateInput.md

@@ -22,9 +22,10 @@ import { ref } from "vue";
 import { DatePicker } from "@progress/kendo-vue-dateinputs";
 import { MaskedTextBox } from "@progress/kendo-vue-inputs";
 import { Error } from "@progress/kendo-vue-labels";
-import { useMaskedDateInput, usePopupTrap } from "@featherk/composables";
+import { useMaskedDateInput } from "@featherk/composables/date";
+import { usePopupTrap } from "@featherk/composables/trap";
 
-const selectedDate = ref<Date | null | undefined>();
+const selectedDate = ref<Date | undefined>();
 const showPicker = ref(false);
 const pickerRoot = ref<HTMLElement | null>(null);
 
@@ -35,7 +36,7 @@ const masked = useMaskedDateInput({
   id: "startDate",
   onChange: ({ value }) => { selectedDate.value = value ?? undefined; },
   onShowCalendar: () => (showPicker.value = true),
-  externalValue: selectedDate as any,
+  externalValue: selectedDate,
   min: MIN_DATE,
   max: MAX_DATE,
   required: true,
@@ -105,6 +106,11 @@ Note: Destructure only the values used as component props that would otherwise r
 
 `useMaskedDateInput` can also power a custom masked input inside Kendo `DatePicker` via the `dateInput="masked"` slot. See the full reference in [src/components/custom-date-picker/CustomDatePicker.vue](../src/components/custom-date-picker/CustomDatePicker.vue).
 
+When binding to Kendo `DatePicker`, use `Ref<Date | undefined>` for the calendar
+`v-model`. The composable's `ChangePayload` uses `Date | null` to represent an
+incomplete or invalid mask, so normalize that payload at the callback boundary with
+`value ?? undefined` before assigning it to the DatePicker model.
+
 ## API
 
 ### `useMaskedDateInput(options)`

package/docs/id/useCompositeId.md

@@ -0,0 +1,29 @@
+# useCompositeId
+
+[Back to Composables README](https://github.com/NantHealth/featherk/blob/integration/packages/composables/README.md)
+
+Creates SSR-safe, component-scoped DOM IDs using Vue's `useId()`. Use it for related trigger, popup, menu, and ARIA relationship IDs within one rendered component instance.
+
+## Quick Start
+
+1. Call `useCompositeId()` from component setup.
+2. Use `instanceId` when one component-level DOM ID is needed.
+3. Use `compose(...)` for related IDs with stable logical segments.
+
+```ts
+import { useCompositeId } from "@featherk/composables";
+
+// Step 1: Vue creates a unique ID for this rendered component instance.
+const ids = useCompositeId("action-cell");
+
+// Step 2: use the component-level ID where a single DOM ID is needed.
+const cellId = ids.instanceId;
+
+// Step 3: compose related DOM and ARIA relationship IDs.
+const triggerId = ids.compose("patient", "trigger");
+const menuId = ids.compose("patient", "menu");
+```
+
+The default prefix is `fkid`, producing IDs like `fkid-v-0-patient-menu`. Pass a custom prefix when a component-specific DOM prefix improves inspection or debugging.
+
+`useCompositeId` is for component-scoped DOM identifiers. Keep deterministic row/trigger IDs used with `useActiveIdRegistry` consumer-owned, for example `patient:42`.

package/docs/menu/usePopupMenu.md

@@ -9,7 +9,7 @@ Composable for accessible Kendo UI for Vue `Popup` + `Menu` action menus. It man
 1. Add static `aria-haspopup="menu"` and baseline `aria-expanded="false"` to the trigger element in your template. The composable never sets `aria-haspopup` and never removes `aria-expanded`; the consumer owns both as the closed-state baseline.
 2. Create parent-owned refs for `isOpen`, `triggerRef`, `menuRef`, and an optional keyboard focus target.
 3. Call `usePopupMenu(...)` with `requestShow`, `requestHide`, and an explicit `triggerMode: "button"` (or `"row"`).
-4. Route Kendo Menu `@select` through `handleMenuSelect(event, onAction)` so the composable closes first and your business action runs second.
+4. Route Kendo Menu `@select` through `handleMenuSelect(event, onAction)` so your business action runs while the active menu context is still available, before the composable closes the popup.
 5. Bind trigger button `@click` and `@keydown` to the composable handlers.
 6. Bind Popup `@close` and Menu `@keydown.escape` so keyboard and mouse close paths restore focus correctly.
 
@@ -63,7 +63,7 @@ const menu = usePopupMenu({
   requestHide: () => (isOpen.value = false),
 });
 
-// Step 4: run close+modality handling first, then app-specific action logic
+// Step 4: act while the active context is available; usePopupMenu closes afterward
 const onSelect = (event: KendoMenuSelectEvent) => {
   menu.handleMenuSelect(event, (selected) => {
     // Keep application-specific actions in the consuming component.
@@ -82,7 +82,7 @@ For a virtualized Kendo Grid, use `resolveFocusTarget` to locate the current row
 3. Create trigger and menu refs as component refs (`ComponentPublicInstance`) for Kendo wrappers.
 4. Call `usePopupMenu(...)` with an explicit `triggerMode: "button"` and map `requestShow`/`requestHide` to row-specific emits.
 5. Provide `resolveFocusTarget` so keyboard close restores focus to the current virtualized row.
-6. Route menu selection through `handleMenuSelect(event, onAction)` so close/focus behavior runs before row action logic.
+6. Route menu selection through `handleMenuSelect(event, onAction)` so row action logic can use its active state before the popup closes.
 
 ```ts
 <script setup lang="ts">
@@ -122,7 +122,7 @@ const menu = usePopupMenu({
   },
 });
 
-// Step 6: let usePopupMenu close first, then run row-specific business action
+// Step 6: run row-specific business action before usePopupMenu closes
 const onSelect = (event: KendoMenuSelectEvent) => {
   menu.handleMenuSelect(event, (selected) => {
     // Row-specific action logic remains here.
@@ -174,7 +174,7 @@ A single `usePopupMenu` instance can manage an entire list of same-mode triggers
 1. Track exactly one "active id" for the whole list, instead of a boolean per row item, via `useActiveIdRegistry<Id>()`. Only one trigger in the list can be open at a time. It exposes a read-only `activeId`, a reactive `isActive`/`activeElement` pair, and `register`/`resolve`/`activate`/`deactivate`/`isIdActive` helpers.
 2. Register each row/button element into the registry as it mounts (e.g. a `row-render` ref callback, or a component `:ref` callback) via `registry.register(id, el)`. The registry's internal element map is reactive, so `activeElement` stays correct even if a keyed/virtualized re-render swaps out the active id's underlying DOM node.
 3. Feed `isOpen: registry.isActive` and `triggerRef: registry.activeElement` straight into `usePopupMenu`, rather than deriving them from a per-row prop.
-4. Position the shared `Popup` using `:offset` computed from the clicked element's `getBoundingClientRect()` (or click coordinates), not `:anchor`. Kendo's `Popup.anchor` only resolves a static template-ref name once at mount; it cannot dynamically retarget a different element after the popup is already mounted.
+4. Enable `anchor: true` and bind the shared `Popup` to `:offset="menu.offset"`, not `:anchor`. Kendo's `Popup.anchor` only resolves a static template-ref name once at mount; it cannot dynamically retarget a different element after the popup is already mounted. Use Kendo's `anchorAlign` and `popupAlign` props when the popup should align to a specific edge of its button. Use `anchor: { getRect: () => ... }` for cursor-positioned menus.
 5. Drive show/hide through `registry.activate(id)` / `registry.deactivate()` rather than binding `handleActionButtonClick` directly to every trigger's `@click`. A single instance's `isOpen` is one shared boolean, so `handleActionButtonClick()` cannot tell "close this trigger" apart from "open a different trigger" — calling it while another id is active will close the wrong thing.
 
 ```ts
@@ -187,6 +187,7 @@ const rowMenu = usePopupMenu({
   triggerRef: rowRegistry.activeElement,
   menuRef: rowMenuRef,
   triggerMode: "row",
+  anchor: true,
   requestShow: () => {}, // state is set directly by the row click handler, not by the composable
   requestHide: () => rowRegistry.deactivate(),
 });
@@ -222,7 +223,7 @@ const toggleButtonMenu = (id: number) => {
 };
 ```
 
-See [UsePopupMenu.vue](https://github.com/NantHealth/featherk/blob/integration/demos/src/views/composables/UsePopupMenu.vue) for the complete working version of both patterns, including the registry-building `row-render` function and the offset-computation logic. `useActiveIdRegistry` is now part of `@featherk/composables`, so shared-instance consumers can import it directly instead of keeping a demo-local copy.
+See [UsePopupMenu.vue](https://github.com/NantHealth/featherk/blob/integration/demos/src/views/composables/UsePopupMenu.vue) for the complete working version of both patterns, including the registry-building `row-render` function and composable-owned offset tracking. `useActiveIdRegistry` is now part of `@featherk/composables`, so shared-instance consumers can import it directly instead of keeping a demo-local copy.
 
 ## API
 
@@ -240,6 +241,7 @@ See [UsePopupMenu.vue](https://github.com/NantHealth/featherk/blob/integration/d
 - `menuItemSelector?: string`: Selector for the first enabled item. Defaults to `.k-menu-item:not(.k-disabled)`.
 - `manageMenuTriggerAria?: boolean`: Keeps `aria-expanded` in sync with `isOpen` on the resolved `triggerRef` element. Defaults to `true`. The consumer always owns the static `aria-haspopup="menu"` attribute and the baseline `aria-expanded="false"`; the composable only ever writes `aria-expanded` and never removes it. Set to `false` to own `aria-expanded` yourself too.
 - `triggerMode: "button" | "row"`: Required. Declares the trigger semantics so a misrouted `triggerRef` (e.g. one that unexpectedly resolves to a `tr.k-table-row` while `triggerMode: "button"` is set) is never silently managed; a mismatch logs a `console.warn` and skips ARIA management for that resolution. Use `"row"` only when a `tr.k-table-row` owns the menu trigger. Neither mode adds `role`, `tabindex`, or keyboard behavior.
+- `anchor?: true | PopupMenuAnchorOptions`: Enables document-relative `offset` tracking for dynamically retargeted Popups. `true` uses the resolved trigger's rectangle and nearest scrollable ancestor. `PopupMenuAnchorOptions` accepts `clipRoot`, `hideWhenAnchorClipped`, and `getRect` for pointer-positioned menus. Internally, the anchor-hidden policy uses `useIntersectionObserver` with `threshold: 1`; a clipped trigger closes with `"anchor-hidden"` without restoring focus.
 
 `PopupMenuElementRef` accepts a normal `HTMLElement` ref or a Vue/Kendo component ref that exposes `$el`.
 
@@ -250,6 +252,7 @@ See [UsePopupMenu.vue](https://github.com/NantHealth/featherk/blob/integration/d
 - `handleActionMenuEscape(event)`: Closes an open menu with keyboard modality.
 - `handleMenuSelect(event, onAction?)`: Records the selection modality, requests close, then invokes optional business logic.
 - `handlePopupClose()`: Restores focus after Kendo Popup has closed.
+- `offset`: A computed `{ left, top }` value for Kendo Popup's `:offset`; it is `{ left: 0, top: 0 }` while closed.
 
 #### Types
 
@@ -259,6 +262,7 @@ export type PopupMenuCloseReason =
   | "mouse-selection"
   | "outside-click"
   | "trigger-click"
+  | "anchor-hidden"
   | null;
 export type PopupMenuCloseTrigger = Exclude<PopupMenuCloseReason, null>;
 export type KendoMenuSelectEvent = {
@@ -276,9 +280,10 @@ export type KendoMenuSelectEvent = {
 - Trigger replacement and virtualization are handled by re-resolving the ref. The previous trigger is demoted to `aria-expanded="false"`, not stripped of attributes, so a shared instance can move between many rows (e.g. a grid) without losing each row's `aria-haspopup` baseline. Set `manageMenuTriggerAria` to `false` when the consumer owns `aria-expanded` too.
 - Opening focuses the first enabled Kendo Menu item after Vue renders it.
 - Outside clicks close the menu, while the trigger is ignored to prevent a close/reopen race.
-- Menu selection records keyboard or mouse modality from the selection event type.
+- Menu selection runs the optional business callback while the active state is still available, then records modality and closes the popup.
 - `Escape` on the trigger or inside the menu uses the keyboard close path.
 - Keyboard-driven closes focus `resolveFocusTarget()` or `focusTargetRef`, then fall back to the trigger.
 - Mouse selection closes restore focus to the trigger.
 - Outside-click and trigger-click closes do not force focus restoration.
+- An anchor-hidden close does not restore focus, preventing an off-screen grid row from being scrolled back into view.
 - Business-specific actions are never implemented by the composable.

package/docs/observer/useIntersectionObserver.md

@@ -0,0 +1,95 @@
+# useIntersectionObserver
+
+[Back to Composables README](https://github.com/NantHealth/featherk/blob/integration/packages/composables/README.md)
+
+Observes a reactive DOM target against a lazily resolved scroll container. It is useful for grid cells, virtualized rows, and other elements that must react after they leave their visible viewport.
+
+## Grid Containers
+
+When observing an element rendered in a Kendo Grid, explicitly provide the grid's scrolling content element through `root`. The composable cannot infer the correct viewport from the Grid wrapper because a grid may be nested in additional scrolling layouts.
+
+```ts
+root: () => cellRef.value?.closest(".k-grid-content") ?? null,
+```
+
+Do not use the outer Grid component element unless it is the element that actually scrolls. For standard Kendo Grid layouts, use `.k-grid-content`.
+
+## Native Tables
+
+The composable works the same way with a regular HTML table. Place the table in a scrolling wrapper and use that wrapper as `root`; the `<tr>` is the observed target.
+
+```vue
+<template>
+  <div ref="tableViewportRef" class="table-viewport">
+    <table>
+      <tbody>
+        <tr ref="rowRef">
+          <td>Product row</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useIntersectionObserver } from "@featherk/composables";
+
+// Step 1: bind refs to the native scroll wrapper and target table row.
+const tableViewportRef = ref<HTMLElement | null>(null);
+const rowRef = ref<HTMLTableRowElement | null>(null);
+
+// Step 2: use the scrolling wrapper as root and react in consumer state.
+useIntersectionObserver({
+  target: rowRef,
+  root: () => tableViewportRef.value,
+  threshold: 0,
+  onChange: (entry) => {
+    if (!entry.isIntersecting) closeMenu();
+  },
+});
+</script>
+
+<style>
+.table-viewport {
+  height: 400px;
+  overflow: auto;
+}
+</style>
+```
+
+## Quick Start
+
+1. Create a ref for the element to observe.
+2. Pass a lazy `root` resolver for its clipping container.
+3. Handle intersection changes in the consuming component; the composable does not own menu or application state.
+
+```ts
+import { ref } from "vue";
+import { useIntersectionObserver } from "@featherk/composables";
+
+// Step 1: bind this ref to the target element.
+const cellRef = ref<Element | null>(null);
+
+// Step 2: resolve the scroll root only after the target is mounted.
+// Step 3: keep application-specific visibility behavior in the consumer.
+useIntersectionObserver({
+  target: cellRef,
+  root: () => cellRef.value?.closest(".k-grid-content") ?? null,
+  threshold: 0,
+  onChange: (entry) => {
+    if (!entry.isIntersecting) closeMenu();
+  },
+});
+```
+
+## Threshold
+
+`threshold` accepts one number or an array of numbers in the inclusive interval $[0, 1]$. Values outside that range are invalid according to the browser `IntersectionObserver` API. It defaults to `1`.
+
+- `0`: callback runs when the target enters the root and again when it fully leaves. Use this to dismiss a popup only after its trigger has fully scrolled out of view.
+- `0.5`: callback runs as the visible portion crosses $50\%$.
+- `1`: callback runs when the target becomes fully visible or stops being fully visible. This is the default.
+- `[0, 0.5, 1]`: callback runs when the target crosses any listed visibility boundary.
+
+`entry.isIntersecting` becomes `false` only after the target leaves the root entirely, regardless of the configured threshold. The composable disconnects automatically on component unmount and re-observes when `target` changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/composables",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "main": "dist/featherk-composables.umd.js",
   "module": "dist/featherk-composables.es.js",
   "types": "dist/index.d.ts",
@@ -40,6 +40,11 @@
       "import": "./dist/featherk-composables.es.js",
       "require": "./dist/featherk-composables.umd.js"
     },
+    "./observer": {
+      "types": "./dist/observer/index.d.ts",
+      "import": "./dist/featherk-composables.es.js",
+      "require": "./dist/featherk-composables.umd.js"
+    },
     "./registry": {
       "types": "./dist/registry/index.d.ts",
       "import": "./dist/featherk-composables.es.js",
@@ -54,6 +59,11 @@
       "types": "./dist/address/index.d.ts",
       "import": "./dist/featherk-composables.es.js",
       "require": "./dist/featherk-composables.umd.js"
+    },
+    "./id": {
+      "types": "./dist/id/index.d.ts",
+      "import": "./dist/featherk-composables.es.js",
+      "require": "./dist/featherk-composables.umd.js"
     }
   },
   "files": [