From e83f10fe321e1026b7d46f859712da4cd88aec05 Mon Sep 17 00:00:00 2001
From: robonen <robonenandrew@gmail.com>
Date: Mon, 8 Jun 2026 15:51:16 +0700
Subject: [PATCH] docs(vue): add interactive demo for every composable

A beautiful, SSR-safe demo.vue next to each composable, auto-discovered by the docs extractor and rendered client-only on each composable's page.
---
 .../composables/animation/useAnimate/demo.vue | 140 ++++++++++++++++
 .../animation/useCountdown/demo.vue           | 105 ++++++++++++
 .../animation/useDateFormat/demo.vue          |  96 +++++++++++
 .../animation/useInterval/demo.vue            |  92 +++++++++++
 .../animation/useIntervalFn/demo.vue          | 124 ++++++++++++++
 .../src/composables/animation/useNow/demo.vue |  83 ++++++++++
 .../composables/animation/useRafFn/demo.vue   |  99 +++++++++++
 .../composables/animation/useTimeAgo/demo.vue |  86 ++++++++++
 .../composables/animation/useTimeout/demo.vue |  81 +++++++++
 .../animation/useTimeoutFn/demo.vue           |  95 +++++++++++
 .../animation/useTimestamp/demo.vue           | 110 +++++++++++++
 .../animation/useTransition/demo.vue          | 133 +++++++++++++++
 .../array/useArrayDifference/demo.vue         |  97 +++++++++++
 .../composables/array/useArrayEvery/demo.vue  |  90 ++++++++++
 .../composables/array/useArrayFilter/demo.vue | 101 ++++++++++++
 .../composables/array/useArrayFind/demo.vue   | 101 ++++++++++++
 .../array/useArrayFindIndex/demo.vue          |  63 +++++++
 .../array/useArrayFindLast/demo.vue           | 100 ++++++++++++
 .../array/useArrayIncludes/demo.vue           |  97 +++++++++++
 .../composables/array/useArrayJoin/demo.vue   |  99 +++++++++++
 .../composables/array/useArrayMap/demo.vue    |  95 +++++++++++
 .../composables/array/useArrayReduce/demo.vue |  90 ++++++++++
 .../composables/array/useArraySome/demo.vue   |  95 +++++++++++
 .../composables/array/useArrayUnique/demo.vue |  94 +++++++++++
 .../src/composables/array/useSorted/demo.vue  |  87 ++++++++++
 .../browser/broadcastedRef/demo.vue           |  98 +++++++++++
 .../browser/useBreakpoints/demo.vue           |  63 +++++++
 .../composables/browser/useClipboard/demo.vue |  73 +++++++++
 .../browser/useClipboardItems/demo.vue        | 104 ++++++++++++
 .../browser/useCloseWatcher/demo.vue          |  86 ++++++++++
 .../composables/browser/useColorMode/demo.vue |  81 +++++++++
 .../composables/browser/useCssVar/demo.vue    |  96 +++++++++++
 .../src/composables/browser/useDark/demo.vue  |  74 +++++++++
 .../browser/useDocumentPiP/demo.vue           | 127 +++++++++++++++
 .../browser/useEventListener/demo.vue         | 111 +++++++++++++
 .../browser/useEyeDropper/demo.vue            |  80 +++++++++
 .../composables/browser/useFavicon/demo.vue   |  74 +++++++++
 .../browser/useFileDialog/demo.vue            |  90 ++++++++++
 .../browser/useFileSystemAccess/demo.vue      | 108 ++++++++++++
 .../src/composables/browser/useFps/demo.vue   |  46 ------
 .../browser/useFullscreen/demo.vue            |  73 +++++++++
 .../src/composables/browser/useImage/demo.vue | 102 ++++++++++++
 .../browser/useLocalFonts/demo.vue            | 115 +++++++++++++
 .../browser/useMediaQuery/demo.vue            |  60 +++++++
 .../composables/browser/useObjectUrl/demo.vue | 111 +++++++++++++
 .../browser/usePermission/demo.vue            | 101 ++++++++++++
 .../browser/usePreferredColorScheme/demo.vue  |  80 +++++++++
 .../browser/usePreferredContrast/demo.vue     |  73 +++++++++
 .../browser/usePreferredDark/demo.vue         |  72 ++++++++
 .../browser/usePreferredLanguages/demo.vue    |  83 ++++++++++
 .../usePreferredReducedMotion/demo.vue        |  81 +++++++++
 .../usePreferredReducedTransparency/demo.vue  |  60 +++++++
 .../composables/browser/useScriptTag/demo.vue | 117 +++++++++++++
 .../src/composables/browser/useShare/demo.vue | 105 ++++++++++++
 .../composables/browser/useStyleTag/demo.vue  |  75 +++++++++
 .../composables/browser/useTabLeader/demo.vue |  82 +++++++---
 .../browser/useTextareaAutosize/demo.vue      |  93 +++++++++++
 .../src/composables/browser/useTitle/demo.vue |  78 +++++++++
 .../browser/useUrlSearchParams/demo.vue       | 110 +++++++++++++
 .../composables/browser/useVibrate/demo.vue   | 108 ++++++++++++
 .../composables/browser/useWakeLock/demo.vue  |  78 +++++++++
 .../browser/useWebNotification/demo.vue       | 119 ++++++++++++++
 .../component/createReusableTemplate/demo.vue |  88 ++++++++++
 .../component/unrefElement/demo.vue           |  70 ++++++++
 .../component/useCurrentElement/demo.vue      | 101 ++++++++++++
 .../component/useForwardExpose/demo.vue       |  96 +++++++++++
 .../component/useTemplateRefsList/demo.vue    | 116 +++++++++++++
 .../component/useVirtualList/demo.vue         |  93 +++++++++++
 .../composables/debug/useRenderCount/demo.vue |  50 ++++++
 .../composables/debug/useRenderInfo/demo.vue  |  66 ++++++++
 .../elements/onElementRemoval/demo.vue        |  82 ++++++++++
 .../elements/useActiveElement/demo.vue        |  67 ++++++++
 .../elements/useDocumentReadyState/demo.vue   |  58 +++++++
 .../elements/useDocumentVisibility/demo.vue   |  64 ++++++++
 .../elements/useDraggable/demo.vue            |  66 ++++++++
 .../composables/elements/useDropZone/demo.vue |  86 ++++++++++
 .../elements/useElementBounding/demo.vue      | 111 +++++++++++++
 .../elements/useElementSize/demo.vue          |  87 ++++++++++
 .../elements/useElementVisibility/demo.vue    |  79 +++++++++
 .../elements/useFocusGuard/demo.vue           |  85 ++++++++++
 .../elements/useIntersectionObserver/demo.vue | 114 +++++++++++++
 .../elements/useMutationObserver/demo.vue     | 144 ++++++++++++++++
 .../elements/useParentElement/demo.vue        |  98 +++++++++++
 .../elements/useResizeObserver/demo.vue       |  80 +++++++++
 .../elements/useWindowFocus/demo.vue          |  53 ++++++
 .../elements/useWindowScroll/demo.vue         | 112 +++++++++++++
 .../elements/useWindowSize/demo.vue           |  70 ++++++++
 .../src/composables/forms/useField/demo.vue   | 102 ++++++++++++
 .../composables/forms/useFieldArray/demo.vue  | 122 ++++++++++++++
 .../src/composables/forms/useForm/demo.vue    | 153 +++++++++++++++++
 .../composables/forms/useFormContext/demo.vue |  91 +++++++++++
 .../lifecycle/tryOnBeforeMount/demo.vue       |  76 +++++++++
 .../lifecycle/tryOnMounted/demo.vue           |  76 +++++++++
 .../lifecycle/tryOnScopeDispose/demo.vue      | 137 ++++++++++++++++
 .../composables/lifecycle/useMounted/demo.vue |  50 ++++++
 .../src/composables/math/logicAnd/demo.vue    | 105 ++++++++++++
 .../src/composables/math/logicNot/demo.vue    |  53 ++++++
 .../src/composables/math/logicOr/demo.vue     |  55 +++++++
 .../src/composables/math/useAbs/demo.vue      |  52 ++++++
 .../src/composables/math/useAverage/demo.vue  |  71 ++++++++
 .../src/composables/math/useCeil/demo.vue     |  66 ++++++++
 .../src/composables/math/useClamp/demo.vue    |  91 +++++++++++
 .../src/composables/math/useFloor/demo.vue    |  67 ++++++++
 .../src/composables/math/useMath/demo.vue     |  76 +++++++++
 .../src/composables/math/useMax/demo.vue      |  89 ++++++++++
 .../src/composables/math/useMin/demo.vue      |  89 ++++++++++
 .../composables/math/usePrecision/demo.vue    | 101 ++++++++++++
 .../composables/math/useProjection/demo.vue   |  76 +++++++++
 .../src/composables/math/useRound/demo.vue    |  66 ++++++++
 .../src/composables/math/useSum/demo.vue      |  83 ++++++++++
 .../src/composables/math/useTrunc/demo.vue    |  57 +++++++
 .../composables/media/useBluetooth/demo.vue   |  92 +++++++++++
 .../media/useDisplayMedia/demo.vue            |  86 ++++++++++
 .../media/useMediaControls/demo.vue           | 146 +++++++++++++++++
 .../src/composables/media/useMemory/demo.vue  | 105 ++++++++++++
 .../media/usePerformanceObserver/demo.vue     | 134 +++++++++++++++
 .../media/useSpeechRecognition/demo.vue       | 106 ++++++++++++
 .../media/useSpeechSynthesis/demo.vue         | 104 ++++++++++++
 .../composables/media/useUserMedia/demo.vue   | 115 +++++++++++++
 .../composables/media/useWebWorker/demo.vue   |  95 +++++++++++
 .../composables/media/useWebWorkerFn/demo.vue | 116 +++++++++++++
 .../reactivity/computedAsync/demo.vue         | 128 +++++++++++++++
 .../reactivity/computedEager/demo.vue         |  89 ++++++++++
 .../reactivity/computedWithControl/demo.vue   | 110 +++++++++++++
 .../composables/reactivity/extendRef/demo.vue |  88 ++++++++++
 .../reactivity/reactiveComputed/demo.vue      |  93 +++++++++++
 .../reactivity/reactiveOmit/demo.vue          |  87 ++++++++++
 .../reactivity/reactivePick/demo.vue          |  63 +++++++
 .../reactivity/refAutoReset/demo.vue          |  90 ++++++++++
 .../reactivity/refDebounced/demo.vue          |  71 ++++++++
 .../reactivity/refDefault/demo.vue            |  69 ++++++++
 .../reactivity/refThrottled/demo.vue          | 116 +++++++++++++
 .../reactivity/refWithControl/demo.vue        | 119 ++++++++++++++
 .../composables/reactivity/syncRef/demo.vue   |  91 +++++++++++
 .../reactivity/toReactive/demo.vue            |  85 ++++++++++
 .../composables/reactivity/useCached/demo.vue |  69 ++++++++
 .../composables/reactivity/useCloned/demo.vue | 114 +++++++++++++
 .../reactivity/useDebounceFn/demo.vue         | 110 +++++++++++++
 .../reactivity/usePrevious/demo.vue           |  51 ++++++
 .../reactivity/useSyncRefs/demo.vue           |  72 ++++++++
 .../reactivity/useThrottleFn/demo.vue         |  91 +++++++++++
 .../reactivity/useToNumber/demo.vue           |  74 +++++++++
 .../reactivity/useToString/demo.vue           |  80 +++++++++
 .../composables/sensors/onKeyStroke/demo.vue  |  96 +++++++++++
 .../composables/sensors/onLongPress/demo.vue  |  84 ++++++++++
 .../sensors/onStartTyping/demo.vue            |  77 +++++++++
 .../composables/sensors/useBattery/demo.vue   |  84 ++++++++++
 .../sensors/useBodyScrollLock/demo.vue        |  91 +++++++++++
 .../sensors/useClickOutside/demo.vue          |  68 ++++++++
 .../sensors/useDeviceMotion/demo.vue          | 111 +++++++++++++
 .../sensors/useDeviceOrientation/demo.vue     |  73 +++++++++
 .../sensors/useDevicePixelRatio/demo.vue      |  64 ++++++++
 .../sensors/useDevicesList/demo.vue           | 113 +++++++++++++
 .../sensors/useElementByPoint/demo.vue        | 106 ++++++++++++
 .../sensors/useElementHover/demo.vue          |  70 ++++++++
 .../composables/sensors/useEscapeKey/demo.vue | 103 ++++++++++++
 .../src/composables/sensors/useFocus/demo.vue |  66 ++++++++
 .../sensors/useFocusWithin/demo.vue           |  67 ++++++++
 .../src/composables/sensors/useFps/demo.vue   | 106 ++++++++++++
 .../composables/sensors/useGamepad/demo.vue   | 140 ++++++++++++++++
 .../sensors/useGeolocation/demo.vue           | 119 ++++++++++++++
 .../src/composables/sensors/useIdle/demo.vue  |  98 +++++++++++
 .../sensors/useInfiniteScroll/demo.vue        |  89 ++++++++++
 .../sensors/useKeyModifier/demo.vue           |  77 +++++++++
 .../composables/sensors/useMagicKeys/demo.vue |  92 +++++++++++
 .../src/composables/sensors/useMouse/demo.vue |  71 ++++++++
 .../sensors/useMouseInElement/demo.vue        |  82 ++++++++++
 .../sensors/useMousePressed/demo.vue          |  66 ++++++++
 .../composables/sensors/useNetwork/demo.vue   | 112 +++++++++++++
 .../composables/sensors/useOnline/demo.vue    |  55 +++++++
 .../composables/sensors/usePageLeave/demo.vue |  61 +++++++
 .../composables/sensors/useParallax/demo.vue  |  86 ++++++++++
 .../composables/sensors/usePointer/demo.vue   |  76 +++++++++
 .../sensors/usePointerLock/demo.vue           |  98 +++++++++++
 .../sensors/usePointerSwipe/demo.vue          |  87 ++++++++++
 .../sensors/useScreenOrientation/demo.vue     | 102 ++++++++++++
 .../composables/sensors/useScroll/demo.vue    | 114 +++++++++++++
 .../sensors/useScrollLock/demo.vue            |  68 ++++++++
 .../src/composables/sensors/useSwipe/demo.vue |  74 +++++++++
 .../sensors/useTextSelection/demo.vue         |  56 +++++++
 .../state/createSharedComposable/demo.vue     | 101 ++++++++++++
 .../state/useAppSharedState/demo.vue          |  74 +++++++++
 .../composables/state/useAsyncState/demo.vue  | 136 ++++++++++++++++
 .../state/useContextFactory/demo.vue          | 102 ++++++++++++
 .../src/composables/state/useCounter/demo.vue |  92 ++++++++++-
 .../composables/state/useCycleList/demo.vue   |  89 ++++++++++
 .../state/useDebouncedRefHistory/demo.vue     | 100 ++++++++++++
 .../src/composables/state/useId/demo.vue      |  65 ++++++++
 .../state/useInjectionStore/demo.vue          | 116 +++++++++++++
 .../composables/state/useLastChanged/demo.vue |  72 ++++++++
 .../state/useManualRefHistory/demo.vue        | 117 +++++++++++++
 .../state/useOffsetPagination/demo.vue        | 127 +++++++++++++++
 .../composables/state/useRefHistory/demo.vue  | 118 ++++++++++++++
 .../src/composables/state/useStepper/demo.vue |  92 +++++++++++
 .../state/useThrottledRefHistory/demo.vue     | 122 ++++++++++++++
 .../src/composables/state/useToggle/demo.vue  |  88 ++++++++++
 .../storage/useLocalStorage/demo.vue          | 104 ++++++++++++
 .../storage/useSessionStorage/demo.vue        | 121 ++++++++++++++
 .../composables/storage/useStorage/demo.vue   | 130 +++++++++++++++
 .../storage/useStorageAsync/demo.vue          | 124 ++++++++++++++
 .../utilities/createEventHook/demo.vue        | 149 +++++++++++++++++
 .../src/composables/utilities/get/demo.vue    |  80 +++++++++
 .../composables/utilities/isDefined/demo.vue  |  83 ++++++++++
 .../src/composables/utilities/set/demo.vue    |  97 +++++++++++
 .../utilities/useEventBus/demo.vue            | 126 ++++++++++++++
 .../composables/utilities/useMemoize/demo.vue | 154 ++++++++++++++++++
 .../utilities/useSupported/demo.vue           |  61 +++++++
 .../src/composables/watch/until/demo.vue      | 132 +++++++++++++++
 .../composables/watch/watchDebounced/demo.vue |  90 ++++++++++
 .../composables/watch/watchIgnorable/demo.vue |  93 +++++++++++
 .../src/composables/watch/watchOnce/demo.vue  |  92 +++++++++++
 .../composables/watch/watchPausable/demo.vue  | 108 ++++++++++++
 .../composables/watch/watchThrottled/demo.vue |  82 ++++++++++
 .../src/composables/watch/whenever/demo.vue   |  80 +++++++++
 214 files changed, 19584 insertions(+), 74 deletions(-)
 create mode 100644 vue/toolkit/src/composables/animation/useAnimate/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useCountdown/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useDateFormat/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useInterval/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useNow/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useRafFn/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useTimeout/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useTimestamp/demo.vue
 create mode 100644 vue/toolkit/src/composables/animation/useTransition/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayDifference/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayEvery/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayFilter/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayFind/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayJoin/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayMap/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayReduce/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArraySome/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useArrayUnique/demo.vue
 create mode 100644 vue/toolkit/src/composables/array/useSorted/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useClipboard/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useColorMode/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useCssVar/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useDark/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useEventListener/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useFavicon/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useFileDialog/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
 delete mode 100644 vue/toolkit/src/composables/browser/useFps/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useFullscreen/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useImage/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePermission/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useScriptTag/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useShare/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useStyleTag/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useTitle/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useVibrate/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useWakeLock/demo.vue
 create mode 100644 vue/toolkit/src/composables/browser/useWebNotification/demo.vue
 create mode 100644 vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
 create mode 100644 vue/toolkit/src/composables/component/unrefElement/demo.vue
 create mode 100644 vue/toolkit/src/composables/component/useCurrentElement/demo.vue
 create mode 100644 vue/toolkit/src/composables/component/useForwardExpose/demo.vue
 create mode 100644 vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
 create mode 100644 vue/toolkit/src/composables/component/useVirtualList/demo.vue
 create mode 100644 vue/toolkit/src/composables/debug/useRenderCount/demo.vue
 create mode 100644 vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useActiveElement/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useDraggable/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useDropZone/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useElementBounding/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useElementSize/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useParentElement/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
 create mode 100644 vue/toolkit/src/composables/elements/useWindowSize/demo.vue
 create mode 100644 vue/toolkit/src/composables/forms/useField/demo.vue
 create mode 100644 vue/toolkit/src/composables/forms/useFieldArray/demo.vue
 create mode 100644 vue/toolkit/src/composables/forms/useForm/demo.vue
 create mode 100644 vue/toolkit/src/composables/forms/useFormContext/demo.vue
 create mode 100644 vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
 create mode 100644 vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
 create mode 100644 vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
 create mode 100644 vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/logicAnd/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/logicNot/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/logicOr/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useAbs/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useAverage/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useCeil/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useClamp/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useFloor/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useMath/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useMax/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useMin/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/usePrecision/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useProjection/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useRound/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useSum/demo.vue
 create mode 100644 vue/toolkit/src/composables/math/useTrunc/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useBluetooth/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useMediaControls/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useMemory/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useUserMedia/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useWebWorker/demo.vue
 create mode 100644 vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/computedEager/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/extendRef/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/refDefault/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/syncRef/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/toReactive/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useCached/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useCloned/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
 create mode 100644 vue/toolkit/src/composables/reactivity/useToString/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/onLongPress/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useBattery/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useElementHover/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useFocus/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useFps/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useGamepad/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useIdle/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useMouse/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useNetwork/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useOnline/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useParallax/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/usePointer/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useScroll/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useSwipe/demo.vue
 create mode 100644 vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/createSharedComposable/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useAppSharedState/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useAsyncState/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useContextFactory/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useCycleList/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useId/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useInjectionStore/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useLastChanged/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useRefHistory/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useStepper/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
 create mode 100644 vue/toolkit/src/composables/state/useToggle/demo.vue
 create mode 100644 vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
 create mode 100644 vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
 create mode 100644 vue/toolkit/src/composables/storage/useStorage/demo.vue
 create mode 100644 vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/createEventHook/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/get/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/isDefined/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/set/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/useEventBus/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/useMemoize/demo.vue
 create mode 100644 vue/toolkit/src/composables/utilities/useSupported/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/until/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/watchDebounced/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/watchOnce/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/watchPausable/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/watchThrottled/demo.vue
 create mode 100644 vue/toolkit/src/composables/watch/whenever/demo.vue

diff --git a/vue/toolkit/src/composables/animation/useAnimate/demo.vue b/vue/toolkit/src/composables/animation/useAnimate/demo.vue
new file mode 100644
index 0000000..3e3e953
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useAnimate/demo.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useAnimate } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+
+const {
+  isSupported,
+  play,
+  pause,
+  reverse,
+  finish,
+  cancel,
+  playState,
+  currentTime,
+  playbackRate,
+} = useAnimate(
+  target,
+  [
+    { transform: 'translateX(-3.5rem) rotate(0deg)', borderRadius: '0.75rem' },
+    { transform: 'translateX(0) rotate(180deg)', borderRadius: '50%' },
+    { transform: 'translateX(3.5rem) rotate(360deg)', borderRadius: '0.75rem' },
+  ],
+  {
+    duration: 2000,
+    iterations: Infinity,
+    direction: 'alternate',
+    easing: 'ease-in-out',
+    immediate: false,
+  },
+);
+
+const elapsed = computed(() => {
+  const t = currentTime.value;
+  return typeof t === 'number' ? `${(t / 1000).toFixed(2)}s` : '—';
+});
+
+const stateColor = computed(() => {
+  switch (playState.value) {
+    case 'running': return 'bg-emerald-500';
+    case 'paused': return 'bg-amber-500';
+    case 'finished': return 'bg-sky-500';
+    default: return 'bg-(--border-strong)';
+  }
+});
+
+const rates = [0.5, 1, 2] as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      The Web Animations API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex h-28 items-center justify-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+        <div
+          ref="target"
+          class="size-12 bg-(--accent) shadow-lg"
+        />
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            State
+          </div>
+          <div class="mt-1 flex items-center gap-2">
+            <span class="inline-block size-2 rounded-full transition" :class="stateColor" />
+            <span class="font-mono text-sm text-(--fg)">{{ playState }}</span>
+          </div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Current time
+          </div>
+          <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">
+            {{ elapsed }}
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="play"
+        >
+          Play
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="pause"
+        >
+          Pause
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="reverse"
+        >
+          Reverse
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="finish"
+        >
+          Finish
+        </button>
+        <button
+          class="col-span-2 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Playback rate
+        </div>
+        <div class="flex gap-2">
+          <button
+            v-for="rate in rates"
+            :key="rate"
+            class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+            :class="playbackRate === rate
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="playbackRate = rate"
+          >
+            {{ rate }}×
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useCountdown/demo.vue b/vue/toolkit/src/composables/animation/useCountdown/demo.vue
new file mode 100644
index 0000000..652bc45
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useCountdown/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCountdown } from './index';
+
+const initial = ref(60);
+const justFinished = ref(false);
+
+const { remaining, isActive, start, stop, pause, resume } = useCountdown(initial, {
+  onComplete: () => {
+    justFinished.value = true;
+  },
+  onTick: () => {
+    justFinished.value = false;
+  },
+});
+
+const minutes = computed(() => String(Math.floor(remaining.value / 60)).padStart(2, '0'));
+const seconds = computed(() => String(remaining.value % 60).padStart(2, '0'));
+
+const progress = computed(() =>
+  initial.value > 0 ? Math.max(0, Math.min(1, remaining.value / initial.value)) : 0,
+);
+
+const presets = [30, 60, 300] as const;
+
+function setPreset(value: number) {
+  initial.value = value;
+  start(value);
+}
+
+function toggle() {
+  if (isActive.value)
+    pause();
+  else
+    resume();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5 text-center">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Time remaining
+      </div>
+      <div
+        class="mt-2 font-mono text-5xl font-bold tabular-nums transition-colors"
+        :class="justFinished
+          ? 'text-emerald-600 dark:text-emerald-400'
+          : remaining <= 10 && remaining > 0
+            ? 'text-amber-600 dark:text-amber-400'
+            : 'text-(--fg)'"
+      >
+        {{ minutes }}:{{ seconds }}
+      </div>
+
+      <div class="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-300 ease-linear"
+          :style="{ width: `${progress * 100}%` }"
+        />
+      </div>
+
+      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+        <span
+          class="inline-block size-2 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : justFinished ? 'bg-sky-500' : 'bg-(--border-strong)'"
+        />
+        {{ justFinished ? 'Completed' : isActive ? 'Counting down' : 'Paused' }}
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium tabular-nums text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="setPreset(preset)"
+      >
+        {{ preset < 60 ? `${preset}s` : `${preset / 60}m` }}
+      </button>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="remaining === 0 && isActive"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="start()"
+      >
+        Restart
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="stop"
+      >
+        Stop
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useDateFormat/demo.vue b/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
new file mode 100644
index 0000000..54a5dcd
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useDateFormat/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDateFormat } from './index';
+
+// A fixed, real-looking moment so the demo is deterministic across renders.
+const date = ref('2026-06-08T14:37:09');
+const format = ref('dddd, MMMM Do YYYY — hh:mm:ss a');
+const locale = ref('en-US');
+
+const formatted = useDateFormat(date, format, { locales: locale });
+
+const formats = [
+  'YYYY-MM-DD HH:mm:ss',
+  'dddd, MMMM Do YYYY — hh:mm:ss a',
+  'ddd D MMM \'YY',
+  'h:mm A',
+] as const;
+
+const locales = [
+  { value: 'en-US', label: 'English' },
+  { value: 'fr-FR', label: 'Français' },
+  { value: 'de-DE', label: 'Deutsch' },
+  { value: 'ja-JP', label: '日本語' },
+] as const;
+
+const isValid = computed(() => formatted.value !== 'Invalid Date');
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Formatted output
+      </div>
+      <div
+        class="mt-2 font-mono text-lg font-semibold tabular-nums"
+        :class="isValid ? 'text-(--fg)' : 'text-red-600 dark:text-red-400'"
+      >
+        {{ formatted }}
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Date input
+      </label>
+      <input
+        v-model="date"
+        type="datetime-local"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Format token string
+      </label>
+      <input
+        v-model="format"
+        type="text"
+        spellcheck="false"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <div class="flex flex-wrap gap-1.5 pt-1">
+        <button
+          v-for="f in formats"
+          :key="f"
+          class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs text-(--fg-muted) transition hover:bg-(--bg-elevated) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          :class="{ 'border-(--accent) text-(--accent-text)': format === f }"
+          @click="format = f"
+        >
+          {{ f }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Locale
+      </label>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="loc in locales"
+          :key="loc.value"
+          class="rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="locale === loc.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="locale = loc.value"
+        >
+          {{ loc.label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useInterval/demo.vue b/vue/toolkit/src/composables/animation/useInterval/demo.vue
new file mode 100644
index 0000000..a28d92a
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useInterval/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useInterval } from './index';
+
+const interval = ref(1000);
+
+const { counter, isActive, pause, resume, reset } = useInterval(interval, {
+  controls: true,
+  immediate: true,
+});
+
+// A simple visual pulse driven purely off the reactive tick counter.
+const beats = computed(() => Array.from({ length: 8 }, (_, i) => i === counter.value % 8));
+
+const speeds = [
+  { value: 2000, label: 'Slow' },
+  { value: 1000, label: 'Normal' },
+  { value: 400, label: 'Fast' },
+] as const;
+
+function toggle() {
+  if (isActive.value)
+    pause();
+  else
+    resume();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-5 text-center">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Ticks elapsed
+      </div>
+      <div class="mt-2 font-mono text-5xl font-bold tabular-nums text-(--fg)">
+        {{ counter }}
+      </div>
+
+      <div class="mt-4 flex items-center justify-center gap-1.5">
+        <span
+          v-for="(on, i) in beats"
+          :key="i"
+          class="size-2.5 rounded-full transition-colors duration-200"
+          :class="on ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        />
+      </div>
+
+      <div class="mt-4 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+        <span
+          class="inline-block size-2 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+        />
+        {{ isActive ? `Ticking every ${interval}ms` : 'Paused' }}
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Interval speed
+      </div>
+      <div class="flex gap-2">
+        <button
+          v-for="speed in speeds"
+          :key="speed.value"
+          class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="interval === speed.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="interval = speed.value"
+        >
+          {{ speed.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="counter === 0"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue b/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
new file mode 100644
index 0000000..bee5607
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useIntervalFn } from './index';
+
+const interval = ref(800);
+const logs = ref<{ id: number; time: string }[]>([]);
+let nextId = 0;
+
+const { isActive, pause, resume, toggle } = useIntervalFn(
+  () => {
+    logs.value.unshift({
+      id: nextId++,
+      time: new Date().toLocaleTimeString(undefined, { hour12: false }),
+    });
+    if (logs.value.length > 6)
+      logs.value.length = 6;
+  },
+  interval,
+  { immediate: false },
+);
+
+const speeds = [
+  { value: 1500, label: 'Slow' },
+  { value: 800, label: 'Normal' },
+  { value: 300, label: 'Fast' },
+] as const;
+
+function clear() {
+  logs.value = [];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div>
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Interval callback
+        </div>
+        <div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
+          <span
+            class="inline-block size-2 rounded-full transition"
+            :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          />
+          {{ isActive ? `Firing every ${interval}ms` : 'Stopped' }}
+        </div>
+      </div>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Start' }}
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Interval
+      </div>
+      <div class="flex gap-2">
+        <button
+          v-for="speed in speeds"
+          :key="speed.value"
+          class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="interval === speed.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="interval = speed.value"
+        >
+          {{ speed.label }}
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        Changing the interval while running restarts the timer with the new duration.
+      </p>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tick log
+      </div>
+      <button
+        class="text-xs text-(--accent-text) transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+        :disabled="logs.length === 0"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="min-h-32 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p v-if="logs.length === 0" class="py-6 text-center text-sm text-(--fg-subtle)">
+        No ticks yet — press Start.
+      </p>
+      <ul v-else class="flex flex-col gap-1.5">
+        <li
+          v-for="log in logs"
+          :key="log.id"
+          class="flex items-center gap-2 font-mono text-sm tabular-nums text-(--fg)"
+        >
+          <span class="inline-block size-1.5 rounded-full bg-(--accent)" />
+          {{ log.time }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isActive"
+        @click="resume"
+      >
+        Resume
+      </button>
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isActive"
+        @click="pause"
+      >
+        Pause
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useNow/demo.vue b/vue/toolkit/src/composables/animation/useNow/demo.vue
new file mode 100644
index 0000000..d4ec1ba
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useNow/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useNow } from './index';
+
+const { now, isActive, pause, resume, toggle } = useNow({ controls: true, interval: 'requestAnimationFrame' });
+
+const time = computed(() =>
+  now.value.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }),
+);
+const millis = computed(() => now.value.getMilliseconds().toString().padStart(3, '0'));
+const date = computed(() =>
+  now.value.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }),
+);
+
+// A sweeping second hand driven entirely by the reactive `now`.
+const secondAngle = computed(() => {
+  const seconds = now.value.getSeconds() + now.value.getMilliseconds() / 1000;
+  return seconds / 60 * 360;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reactive now</div>
+
+      <div class="flex items-baseline gap-1">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ time }}</span>
+        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg-subtle)">.{{ millis }}</span>
+      </div>
+
+      <div class="text-sm text-(--fg-muted)">{{ date }}</div>
+
+      <div class="relative mt-1 size-24 rounded-full border-2 border-(--border-strong) bg-(--bg-inset)">
+        <div class="absolute inset-0 flex items-center justify-center">
+          <div class="size-1.5 rounded-full bg-(--accent)" />
+        </div>
+        <div
+          class="absolute bottom-1/2 left-1/2 h-9 w-0.5 origin-bottom rounded-full bg-(--accent)"
+          :style="{ transform: `translateX(-50%) rotate(${secondAngle}deg)` }"
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isActive ? 'Ticking (RAF)' : 'Paused' }}
+      </span>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggle"
+        >
+          {{ isActive ? 'Pause' : 'Resume' }}
+        </button>
+        <button
+          type="button"
+          :disabled="isActive"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="resume"
+        >
+          Resume
+        </button>
+        <button
+          type="button"
+          :disabled="!isActive"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="pause"
+        >
+          Pause
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useRafFn/demo.vue b/vue/toolkit/src/composables/animation/useRafFn/demo.vue
new file mode 100644
index 0000000..ca754a0
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useRafFn/demo.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useRafFn } from './index';
+
+const fpsLimit = ref(0);
+
+const position = ref(0);
+const direction = ref(1);
+const delta = shallowRef(0);
+const fps = shallowRef(0);
+const frames = ref(0);
+
+const { isActive, pause, resume, toggle } = useRafFn(
+  ({ delta: d }) => {
+    delta.value = d;
+    fps.value = d > 0 ? Math.round(1000 / d) : 0;
+    frames.value++;
+
+    // Bounce a marker across the track using real frame delta (px per second).
+    position.value += direction.value * (d / 1000) * 120;
+
+    if (position.value >= 100) {
+      position.value = 100;
+      direction.value = -1;
+    }
+    else if (position.value <= 0) {
+      position.value = 0;
+      direction.value = 1;
+    }
+  },
+  { fpsLimit: fpsLimit.value || undefined },
+);
+
+const limitLabel = computed(() => (fpsLimit.value === 0 ? 'Unlimited' : `${fpsLimit.value} fps`));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">requestAnimationFrame</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isActive ? 'Running' : 'Paused' }}
+        </span>
+      </div>
+
+      <!-- The animated track: marker position is updated every frame -->
+      <div class="relative mx-2.5 h-8 rounded-lg border border-(--border) bg-(--bg-inset)">
+        <div
+          class="absolute top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent) shadow"
+          :style="{ left: `${position}%` }"
+        />
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ fps }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">fps</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ delta.toFixed(1) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">delta ms</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ frames }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">frames</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="fps-limit">FPS limit</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ limitLabel }}</span>
+      </div>
+      <input
+        id="fps-limit"
+        v-model.number="fpsLimit"
+        type="range"
+        min="0"
+        max="60"
+        step="5"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <p class="text-xs text-(--fg-subtle)">Changing the limit takes effect on the next mount; toggle below to see it live.</p>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="toggle"
+    >
+      {{ isActive ? 'Pause loop' : 'Resume loop' }}
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue b/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
new file mode 100644
index 0000000..1d97257
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeAgo/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimeAgo } from './index';
+
+interface Preset {
+  label: string;
+  offset: number;
+}
+
+// Offsets in ms relative to now; negative = past, positive = future.
+const presets: Preset[] = [
+  { label: '15 s ago', offset: -15_000 },
+  { label: '3 min ago', offset: -3 * 60_000 },
+  { label: '2 h ago', offset: -2 * 3_600_000 },
+  { label: 'Yesterday', offset: -86_400_000 },
+  { label: 'Last week', offset: -7 * 86_400_000 },
+  { label: '5 months ago', offset: -5 * 2_592_000_000 },
+  { label: 'In 45 min', offset: 45 * 60_000 },
+  { label: 'Next year', offset: 31_536_000_000 },
+];
+
+const offset = ref(presets[1]!.offset);
+
+// Reactive getter recomputed each tick so the string stays live.
+const target = computed(() => Date.now() + offset.value);
+
+const { timeAgo, isActive, toggle } = useTimeAgo(target, {
+  controls: true,
+  updateInterval: 1000,
+  showSecond: true,
+});
+
+const absolute = computed(() =>
+  new Date(target.value).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }),
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Relative time</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg) text-center">{{ timeAgo }}</span>
+      <span class="text-xs text-(--fg-muted)">{{ absolute }}</span>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pick an instant</span>
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          v-for="preset in presets"
+          :key="preset.label"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="offset === preset.offset
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="offset = preset.offset"
+        >
+          {{ preset.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isActive ? 'Updating every 1s' : 'Updates paused' }}
+      </span>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimeout/demo.vue b/vue/toolkit/src/composables/animation/useTimeout/demo.vue
new file mode 100644
index 0000000..cc5be1c
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeout/demo.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTimeout } from './index';
+
+const delay = ref(3000);
+const firedAt = ref<string | null>(null);
+
+const { ready, start, stop } = useTimeout(delay, {
+  controls: true,
+  immediate: false,
+  callback: () => {
+    firedAt.value = new Date().toLocaleTimeString('en-US', { hour12: false });
+  },
+});
+
+function restart() {
+  firedAt.value = null;
+  start();
+}
+
+function cancel() {
+  stop();
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+
+      <div
+        class="flex size-20 items-center justify-center rounded-full border-2 transition"
+        :class="ready
+          ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'"
+      >
+        <span class="text-sm font-semibold">{{ ready ? 'Ready' : 'Pending' }}</span>
+      </div>
+
+      <p class="text-center text-sm text-(--fg-muted)">
+        <template v-if="ready && firedAt">Fired at <span class="font-mono tabular-nums text-(--fg)">{{ firedAt }}</span></template>
+        <template v-else-if="ready">Idle — start the timer below</template>
+        <template v-else>Counting down… stays pending until the delay elapses</template>
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="delay">Delay</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ (delay / 1000).toFixed(1) }}s</span>
+      </div>
+      <input
+        id="delay"
+        v-model.number="delay"
+        type="range"
+        min="500"
+        max="5000"
+        step="500"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="restart"
+      >
+        {{ ready ? 'Start' : 'Restart' }}
+      </button>
+      <button
+        type="button"
+        :disabled="ready"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="cancel"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue b/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
new file mode 100644
index 0000000..a75029c
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimeoutFn/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTimeoutFn } from './index';
+
+interface Mail {
+  id: number;
+  from: string;
+  subject: string;
+}
+
+const inbox = ref<Mail[]>([
+  { id: 1, from: 'Ada Lovelace', subject: 'Notes on the Analytical Engine' },
+  { id: 2, from: 'Grace Hopper', subject: 'Found a bug in the relay' },
+  { id: 3, from: 'Alan Turing', subject: 'Re: Halting problem' },
+]);
+
+const pendingDelete = ref<Mail | null>(null);
+
+// After the grace period elapses the mail is permanently removed.
+const { isPending, start, stop } = useTimeoutFn(
+  () => {
+    if (pendingDelete.value)
+      inbox.value = inbox.value.filter(m => m.id !== pendingDelete.value!.id);
+
+    pendingDelete.value = null;
+  },
+  5000,
+  { immediate: false },
+);
+
+function archive(mail: Mail) {
+  stop();
+  pendingDelete.value = mail;
+  start();
+}
+
+function undo() {
+  stop();
+  pendingDelete.value = null;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-3">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Inbox · undo with grace period</span>
+
+    <ul v-if="inbox.length" class="flex flex-col gap-2">
+      <li
+        v-for="mail in inbox"
+        :key="mail.id"
+        class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-3 transition"
+        :class="{ 'opacity-40': pendingDelete?.id === mail.id }"
+      >
+        <div class="min-w-0">
+          <div class="truncate text-sm font-medium text-(--fg)">{{ mail.subject }}</div>
+          <div class="truncate text-xs text-(--fg-muted)">{{ mail.from }}</div>
+        </div>
+        <button
+          type="button"
+          :disabled="isPending"
+          class="shrink-0 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="archive(mail)"
+        >
+          Archive
+        </button>
+      </li>
+    </ul>
+
+    <div v-else class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)">
+      Inbox zero — everything archived.
+    </div>
+
+    <Transition
+      enter-active-class="transition duration-200" enter-from-class="opacity-0 translate-y-1"
+      leave-active-class="transition duration-150" leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="isPending && pendingDelete"
+        class="flex items-center justify-between gap-3 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2"
+      >
+        <span class="flex items-center gap-2 text-sm text-amber-700 dark:text-amber-400">
+          <span class="size-1.5 animate-pulse rounded-full bg-amber-500" />
+          Archiving “{{ pendingDelete.subject }}”…
+        </span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-semibold text-amber-700 underline-offset-2 transition hover:underline dark:text-amber-400 cursor-pointer"
+          @click="undo"
+        >
+          Undo
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTimestamp/demo.vue b/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
new file mode 100644
index 0000000..826edea
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTimestamp/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTimestamp } from './index';
+
+const interval = ref(1000);
+const offset = ref(0);
+
+const { timestamp, isActive, pause, resume } = useTimestamp({
+  controls: true,
+  interval: 1000,
+  offset,
+});
+
+const clockTime = computed(() =>
+  new Date(timestamp.value).toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  }),
+);
+
+const clockDate = computed(() =>
+  new Date(timestamp.value).toLocaleDateString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  }),
+);
+
+function toggle() {
+  if (isActive.value)
+    pause();
+  else
+    resume();
+}
+
+function shift(ms: number) {
+  offset.value += ms;
+}
+
+function resetOffset() {
+  offset.value = 0;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Reactive timestamp
+      </div>
+      <div class="mt-2 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ clockTime }}
+      </div>
+      <div class="mt-1 text-sm text-(--fg-muted)">
+        {{ clockDate }}
+      </div>
+      <div class="mt-3 flex items-center justify-center gap-2 text-xs text-(--fg-subtle)">
+        <span
+          class="inline-block size-2 rounded-full transition"
+          :class="isActive ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+        />
+        {{ isActive ? 'Updating every second' : 'Paused' }}
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      {{ Math.round(timestamp) }} ms
+    </div>
+
+    <div class="flex items-center justify-between gap-2">
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+
+      <div class="flex items-center gap-2">
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="shift(-3600_000)"
+        >
+          -1h
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="shift(3600_000)"
+        >
+          +1h
+        </button>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between text-sm text-(--fg-muted)">
+      <span>
+        Offset:
+        <span class="font-mono text-(--fg) tabular-nums">{{ (offset / 3600_000).toFixed(0) }}h</span>
+      </span>
+      <button
+        class="text-(--accent-text) transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+        :disabled="offset === 0"
+        @click="resetOffset"
+      >
+        Reset offset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/animation/useTransition/demo.vue b/vue/toolkit/src/composables/animation/useTransition/demo.vue
new file mode 100644
index 0000000..a94bcf9
--- /dev/null
+++ b/vue/toolkit/src/composables/animation/useTransition/demo.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TransitionPresets, useTransition } from './index';
+
+type PresetName = keyof typeof TransitionPresets;
+
+const presetNames = Object.keys(TransitionPresets) as PresetName[];
+const preset = ref<PresetName>('easeOutCubic');
+const duration = ref(800);
+
+// Animated progress value (0–100).
+const target = ref(72);
+const value = useTransition(target, {
+  duration,
+  transition: computed(() => TransitionPresets[preset.value]),
+});
+
+// Animated color tuple (RGB).
+const swatches: Array<[string, [number, number, number]]> = [
+  ['Indigo', [99, 102, 241]],
+  ['Emerald', [16, 185, 129]],
+  ['Amber', [245, 158, 11]],
+  ['Rose', [244, 63, 94]],
+];
+const colorTarget = ref<[number, number, number]>([99, 102, 241]);
+const color = useTransition(colorTarget, {
+  duration: 600,
+  transition: TransitionPresets.easeInOutQuad,
+});
+
+const colorCss = computed(() => {
+  const [r, g, b] = color.value;
+  return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+});
+
+function randomize() {
+  target.value = Math.round(Math.random() * 100);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-5">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Eased value
+        </span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ value.toFixed(1) }}
+        </span>
+      </div>
+
+      <div class="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent)"
+          :style="{ width: `${Math.max(0, Math.min(100, value))}%` }"
+        />
+      </div>
+
+      <div class="mt-4 flex items-center gap-3">
+        <input
+          v-model.number="target"
+          type="range"
+          min="0"
+          max="100"
+          class="h-1.5 flex-1 cursor-pointer accent-(--accent)"
+        >
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="randomize"
+        >
+          Random
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Easing preset
+      </label>
+      <select
+        v-model="preset"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+        <option v-for="name in presetNames" :key="name" :value="name">
+          {{ name }}
+        </option>
+      </select>
+
+      <label class="mt-1 flex items-center justify-between text-sm text-(--fg-muted)">
+        <span>Duration</span>
+        <span class="font-mono text-(--fg) tabular-nums">{{ duration }}ms</span>
+      </label>
+      <input
+        v-model.number="duration"
+        type="range"
+        min="100"
+        max="2000"
+        step="100"
+        class="h-1.5 w-full cursor-pointer accent-(--accent)"
+      >
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center gap-3">
+        <div
+          class="size-12 shrink-0 rounded-lg border border-(--border)"
+          :style="{ backgroundColor: colorCss }"
+        />
+        <div class="min-w-0">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Animated tuple
+          </div>
+          <div class="font-mono text-sm text-(--fg) tabular-nums">
+            {{ colorCss }}
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-3 flex flex-wrap gap-2">
+        <button
+          v-for="[label, rgb] in swatches"
+          :key="label"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) cursor-pointer"
+          @click="colorTarget = [...rgb]"
+        >
+          <span class="size-2.5 rounded-full" :style="{ backgroundColor: `rgb(${rgb.join(',')})` }" />
+          {{ label }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayDifference/demo.vue b/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
new file mode 100644
index 0000000..ca2d492
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayDifference/demo.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayDifference } from './index';
+
+interface Track {
+  id: number;
+  title: string;
+}
+
+const library: Track[] = [
+  { id: 1, title: 'Midnight City' },
+  { id: 2, title: 'Strobe' },
+  { id: 3, title: 'Open Eye Signal' },
+  { id: 4, title: 'Innerbloom' },
+  { id: 5, title: 'Teardrop' },
+  { id: 6, title: 'Resonance' },
+];
+
+const list = ref<Track[]>([...library]);
+const playlist = ref<Track[]>([library[1], library[3]]);
+const symmetric = ref(false);
+
+// Compare tracks by their `id` key.
+const diff = useArrayDifference(list, playlist, 'id', {
+  get symmetric() {
+    return symmetric.value;
+  },
+});
+
+function inPlaylist(track: Track) {
+  return playlist.value.some(t => t.id === track.id);
+}
+
+function toggle(track: Track) {
+  if (inPlaylist(track))
+    playlist.value = playlist.value.filter(t => t.id !== track.id);
+  else
+    playlist.value = [...playlist.value, track];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Library — tap to add / remove from playlist
+      </span>
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input
+          v-model="symmetric"
+          type="checkbox"
+          class="size-4 cursor-pointer accent-(--accent)"
+        >
+        Symmetric
+      </label>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        v-for="track in library"
+        :key="track.id"
+        class="inline-flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="inPlaylist(track)
+          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="toggle(track)"
+      >
+        <span class="truncate">{{ track.title }}</span>
+        <span class="shrink-0 text-xs opacity-70">{{ inPlaylist(track) ? '−' : '+' }}</span>
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ symmetric ? 'In exactly one (XOR)' : 'Not in playlist' }}
+        </span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">
+          {{ diff.length }}
+        </span>
+      </div>
+
+      <ul v-if="diff.length" class="mt-3 flex flex-wrap gap-2">
+        <li
+          v-for="track in diff"
+          :key="track.id"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ track.title }}
+        </li>
+      </ul>
+      <p v-else class="mt-3 text-sm text-(--fg-subtle)">
+        No difference — every track matches.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayEvery/demo.vue b/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
new file mode 100644
index 0000000..5c44e50
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayEvery/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayEvery } from './index';
+
+interface Check {
+  id: number;
+  label: string;
+  done: boolean;
+}
+
+const checklist = ref<Check[]>([
+  { id: 1, label: 'Build passes', done: true },
+  { id: 2, label: 'Tests green', done: true },
+  { id: 3, label: 'Types check', done: false },
+  { id: 4, label: 'Docs updated', done: false },
+]);
+
+// True only when every item is done.
+const allDone = useArrayEvery(checklist, item => item.done);
+
+const completed = computed(() => checklist.value.filter(c => c.done).length);
+
+function toggle(item: Check) {
+  item.done = !item.done;
+}
+
+function reset() {
+  checklist.value.forEach(c => (c.done = false));
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="rounded-xl border p-4 transition"
+      :class="allDone
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-(--border) bg-(--bg-elevated)'"
+    >
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Release readiness
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="allDone
+            ? 'border-emerald-500/30 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-2 rounded-full"
+            :class="allDone ? 'bg-emerald-500' : 'bg-amber-500'"
+          />
+          {{ allDone ? 'Ready to ship' : 'Blocked' }}
+        </span>
+      </div>
+      <div class="mt-2 font-mono text-sm tabular-nums text-(--fg-muted)">
+        {{ completed }} / {{ checklist.length }} complete
+      </div>
+    </div>
+
+    <ul class="flex flex-col gap-2">
+      <li v-for="item in checklist" :key="item.id">
+        <button
+          class="flex w-full items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+          @click="toggle(item)"
+        >
+          <span
+            class="flex size-5 shrink-0 items-center justify-center rounded-md border text-xs transition"
+            :class="item.done
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border-strong) text-transparent'"
+          >
+            ✓
+          </span>
+          <span :class="item.done ? 'line-through text-(--fg-subtle)' : ''">
+            {{ item.label }}
+          </span>
+        </button>
+      </li>
+    </ul>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 self-start rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="reset"
+    >
+      Reset
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFilter/demo.vue b/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
new file mode 100644
index 0000000..32080ea
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFilter/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayFilter } from './index';
+
+interface Product {
+  name: string;
+  price: number;
+  inStock: boolean;
+}
+
+const products = ref<Product[]>([
+  { name: 'Mechanical Keyboard', price: 129, inStock: true },
+  { name: 'USB-C Hub', price: 49, inStock: false },
+  { name: '4K Monitor', price: 399, inStock: true },
+  { name: 'Webcam', price: 79, inStock: true },
+  { name: 'Desk Mat', price: 25, inStock: false },
+  { name: 'Wireless Mouse', price: 59, inStock: true },
+]);
+
+const query = ref('');
+const maxPrice = ref(400);
+const inStockOnly = ref(true);
+
+// Reactive filter: name match + price ceiling + stock toggle.
+const visible = useArrayFilter(products, (product) => {
+  const matchesName = product.name.toLowerCase().includes(query.value.trim().toLowerCase());
+  const matchesPrice = product.price <= maxPrice.value;
+  const matchesStock = !inStockOnly.value || product.inStock;
+  return matchesName && matchesPrice && matchesStock;
+});
+
+const formatted = computed(() =>
+  visible.value.map(p => ({ ...p, priceLabel: `$${p.price}` })),
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <input
+      v-model="query"
+      type="text"
+      placeholder="Search products…"
+      class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+    >
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex items-center justify-between text-sm text-(--fg-muted)">
+        <span>Max price</span>
+        <span class="font-mono text-(--fg) tabular-nums">${{ maxPrice }}</span>
+      </label>
+      <input
+        v-model.number="maxPrice"
+        type="range"
+        min="25"
+        max="400"
+        step="5"
+        class="h-1.5 w-full cursor-pointer accent-(--accent)"
+      >
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input
+          v-model="inStockOnly"
+          type="checkbox"
+          class="size-4 cursor-pointer accent-(--accent)"
+        >
+        In stock only
+      </label>
+    </div>
+
+    <div class="flex items-center justify-between text-xs">
+      <span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Results</span>
+      <span class="font-mono tabular-nums text-(--fg-muted)">
+        {{ formatted.length }} / {{ products.length }}
+      </span>
+    </div>
+
+    <ul v-if="formatted.length" class="flex flex-col gap-2">
+      <li
+        v-for="product in formatted"
+        :key="product.name"
+        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-medium text-(--fg)">{{ product.name }}</span>
+          <span
+            v-if="!product.inStock"
+            class="inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-600 dark:text-amber-400"
+          >
+            Out
+          </span>
+        </div>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ product.priceLabel }}</span>
+      </li>
+    </ul>
+    <div
+      v-else
+      class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+    >
+      No products match your filters.
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFind/demo.vue b/vue/toolkit/src/composables/array/useArrayFind/demo.vue
new file mode 100644
index 0000000..aa60657
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFind/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayFind } from './index';
+
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  inStock: boolean;
+}
+
+const catalog = ref<Product[]>([
+  { id: 1, name: 'Mechanical Keyboard', price: 129, inStock: false },
+  { id: 2, name: 'USB-C Hub', price: 49, inStock: true },
+  { id: 3, name: 'Desk Mat', price: 24, inStock: true },
+  { id: 4, name: '4K Monitor', price: 399, inStock: true },
+  { id: 5, name: 'Webcam', price: 89, inStock: false },
+]);
+
+const maxPrice = ref(100);
+const inStockOnly = ref(true);
+
+// Reactive Array.prototype.find — re-evaluates when the list, the price
+// threshold or the toggle change.
+const firstMatch = useArrayFind(
+  catalog,
+  product =>
+    product.price <= maxPrice.value
+    && (!inStockOnly.value || product.inStock),
+);
+
+const matchIndex = computed(() =>
+  firstMatch.value ? catalog.value.indexOf(firstMatch.value) : -1,
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="maxPrice">
+          Max price
+        </label>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">${{ maxPrice }}</span>
+      </div>
+      <input
+        id="maxPrice"
+        v-model.number="maxPrice"
+        type="range"
+        min="20"
+        max="400"
+        step="5"
+        class="w-full accent-(--accent)"
+      >
+      <label class="flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input v-model="inStockOnly" type="checkbox" class="accent-(--accent)">
+        In stock only
+      </label>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        First match
+      </p>
+      <template v-if="firstMatch">
+        <div class="flex items-baseline justify-between">
+          <span class="text-sm font-medium text-(--fg)">{{ firstMatch.name }}</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">${{ firstMatch.price }}</span>
+        </div>
+        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">
+          index {{ matchIndex }} · id {{ firstMatch.id }}
+        </p>
+      </template>
+      <p v-else class="text-sm text-(--fg-subtle)">
+        No product matches the filters
+      </p>
+    </div>
+
+    <ul class="flex flex-col gap-1.5">
+      <li
+        v-for="product in catalog"
+        :key="product.id"
+        class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
+        :class="product.id === firstMatch?.id
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+      >
+        <span class="flex items-center gap-2">
+          {{ product.name }}
+          <span
+            v-if="!product.inStock"
+            class="inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400"
+          >
+            out of stock
+          </span>
+        </span>
+        <span class="font-mono tabular-nums">${{ product.price }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue b/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
new file mode 100644
index 0000000..219f1d3
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindIndex/demo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayFindIndex } from './index';
+
+interface Step {
+  label: string;
+  done: boolean;
+}
+
+const steps = ref<Step[]>([
+  { label: 'Clone repository', done: true },
+  { label: 'Install dependencies', done: true },
+  { label: 'Run database migrations', done: false },
+  { label: 'Seed sample data', done: false },
+  { label: 'Start dev server', done: false },
+]);
+
+// Reactive Array.prototype.findIndex — points at the first step still pending.
+const nextIndex = useArrayFindIndex(steps, step => !step.done);
+
+function toggle(index: number) {
+  steps.value[index]!.done = !steps.value[index]!.done;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Next pending index
+      </p>
+      <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ nextIndex }}
+      </p>
+      <p class="mt-1 text-sm text-(--fg-subtle)">
+        {{ nextIndex === -1 ? 'All steps complete' : `“${steps[nextIndex]!.label}”` }}
+      </p>
+    </div>
+
+    <ol class="flex flex-col gap-1.5">
+      <li
+        v-for="(step, index) in steps"
+        :key="step.label"
+        class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
+        :class="index === nextIndex
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+      >
+        <span class="flex items-center gap-2">
+          <span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ index }}</span>
+          <span :class="step.done ? 'line-through opacity-60' : ''">{{ step.label }}</span>
+        </span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggle(index)"
+        >
+          {{ step.done ? 'Undo' : 'Done' }}
+        </button>
+      </li>
+    </ol>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue b/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
new file mode 100644
index 0000000..771490b
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayFindLast/demo.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayFindLast } from './index';
+
+interface LogEntry {
+  id: number;
+  level: 'info' | 'warn' | 'error';
+  message: string;
+}
+
+let nextId = 6;
+const log = ref<LogEntry[]>([
+  { id: 1, level: 'info', message: 'Server started on :3000' },
+  { id: 2, level: 'warn', message: 'Cache miss for key "user:42"' },
+  { id: 3, level: 'error', message: 'Failed to reach payments API' },
+  { id: 4, level: 'info', message: 'Request handled in 12ms' },
+  { id: 5, level: 'warn', message: 'Deprecated header received' },
+]);
+
+const filter = ref<LogEntry['level']>('warn');
+
+// Reactive Array.prototype.findLast — the most recent entry at this level.
+const latest = useArrayFindLast(log, entry => entry.level === filter.value);
+
+const samples: LogEntry['message'][] = [
+  'Disk usage at 82%',
+  'New WebSocket connection',
+  'Token refresh failed',
+];
+
+function append(level: LogEntry['level']) {
+  const message = samples[Math.floor(Math.random() * samples.length)]!;
+  log.value.push({ id: nextId++, level, message });
+}
+
+const levels: LogEntry['level'][] = ['info', 'warn', 'error'];
+const tone: Record<LogEntry['level'], string> = {
+  info: 'text-sky-600 dark:text-sky-400',
+  warn: 'text-amber-600 dark:text-amber-400',
+  error: 'text-red-600 dark:text-red-400',
+};
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex gap-1.5">
+      <button
+        v-for="level in levels"
+        :key="level"
+        type="button"
+        class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="filter === level
+          ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
+        @click="filter = level"
+      >
+        {{ level }}
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Latest “{{ filter }}” entry
+      </p>
+      <template v-if="latest">
+        <p class="mt-1 font-mono text-sm text-(--fg)">{{ latest.message }}</p>
+        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">#{{ latest.id }}</p>
+      </template>
+      <p v-else class="mt-1 text-sm text-(--fg-subtle)">
+        No “{{ filter }}” entries yet
+      </p>
+    </div>
+
+    <ul class="flex max-h-44 flex-col gap-1 overflow-y-auto rounded-lg border border-(--border) bg-(--bg-elevated) p-2">
+      <li
+        v-for="entry in log"
+        :key="entry.id"
+        class="flex items-center gap-2 rounded-md px-2 py-1 font-mono text-xs transition"
+        :class="entry.id === latest?.id ? 'bg-(--accent-subtle)' : ''"
+      >
+        <span class="w-10 shrink-0 font-semibold uppercase" :class="tone[entry.level]">
+          {{ entry.level }}
+        </span>
+        <span class="truncate text-(--fg-muted)">{{ entry.message }}</span>
+      </li>
+    </ul>
+
+    <div class="flex gap-1.5">
+      <button
+        v-for="level in levels"
+        :key="level"
+        type="button"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="append(level)"
+      >
+        + {{ level }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue b/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
new file mode 100644
index 0000000..6cdd6be
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayIncludes/demo.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayIncludes } from './index';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+const team = ref<User[]>([
+  { id: 11, name: 'Ada' },
+  { id: 22, name: 'Linus' },
+  { id: 33, name: 'Grace' },
+  { id: 44, name: 'Dennis' },
+]);
+
+// Search by an object key — `id` is compared against the searched value.
+const searchId = ref(33);
+const isMember = useArrayIncludes(team, searchId, 'id');
+
+// Plain primitive membership with a reactive `fromIndex` option.
+const tags = ref(['vue', 'reactive', 'composable', 'reactive']);
+const query = ref('reactive');
+const fromIndex = ref(2);
+const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Member by key
+      </p>
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="user in team"
+          :key="user.id"
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="user.id === searchId
+            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          {{ user.name }}
+          <span class="font-mono text-(--fg-subtle)">#{{ user.id }}</span>
+        </span>
+      </div>
+
+      <div class="mt-3 flex items-center gap-2">
+        <input
+          v-model.number="searchId"
+          type="number"
+          class="w-24 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium"
+          :class="isMember
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ isMember ? 'includes id' : 'not found' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Primitive search (fromIndex 2)
+      </p>
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="(tag, i) in tags"
+          :key="i"
+          class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="i < 2
+            ? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle) opacity-50 line-through'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          {{ tag }}
+        </span>
+      </div>
+
+      <input
+        v-model="query"
+        type="text"
+        placeholder="search a tag…"
+        class="mt-3 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <p class="mt-2 text-sm text-(--fg-muted)">
+        Searching from index 2 →
+        <span
+          class="font-mono font-semibold"
+          :class="hasTag ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
+        >{{ hasTag }}</span>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayJoin/demo.vue b/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
new file mode 100644
index 0000000..3058c1b
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayJoin/demo.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayJoin } from './index';
+
+const segments = ref<string[]>(['users', 'robonen', 'projects', 'tools']);
+const separator = ref('/');
+const draft = ref('');
+
+// Reactive Array.prototype.join — recomputes on item edits and separator change.
+const joined = useArrayJoin(segments, separator);
+
+const separators: { label: string; value: string }[] = [
+  { label: 'slash', value: '/' },
+  { label: 'comma', value: ', ' },
+  { label: 'dash', value: ' - ' },
+  { label: 'none', value: '' },
+];
+
+function add() {
+  const value = draft.value.trim();
+  if (!value)
+    return;
+  segments.value.push(value);
+  draft.value = '';
+}
+
+function remove(index: number) {
+  segments.value.splice(index, 1);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Joined result
+      </p>
+      <p class="break-all font-mono text-sm text-(--fg) tabular-nums">
+        <span v-if="joined">{{ joined }}</span>
+        <span v-else class="text-(--fg-subtle)">empty</span>
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Separator</span>
+      <div class="flex gap-1.5">
+        <button
+          v-for="sep in separators"
+          :key="sep.label"
+          type="button"
+          class="flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="separator === sep.value
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
+          @click="separator = sep.value"
+        >
+          {{ sep.label }}
+        </button>
+      </div>
+    </div>
+
+    <ul class="flex flex-col gap-1.5">
+      <li
+        v-for="(segment, index) in segments"
+        :key="index"
+        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm text-(--fg)"
+      >
+        <span class="flex items-center gap-2">
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ index }}</span>
+          {{ segment }}
+        </span>
+        <button
+          type="button"
+          aria-label="Remove segment"
+          class="rounded-md px-2 py-0.5 text-xs font-medium text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) cursor-pointer"
+          @click="remove(index)"
+        >
+          ✕
+        </button>
+      </li>
+    </ul>
+
+    <form class="flex gap-2" @submit.prevent="add">
+      <input
+        v-model="draft"
+        type="text"
+        placeholder="add a segment…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <button
+        type="submit"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        :disabled="!draft.trim()"
+      >
+        Add
+      </button>
+    </form>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayMap/demo.vue b/vue/toolkit/src/composables/array/useArrayMap/demo.vue
new file mode 100644
index 0000000..9ac6c9f
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayMap/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayMap } from './index';
+
+interface Product {
+  name: string;
+  price: number;
+}
+
+const products = ref<Product[]>([
+  { name: 'Mechanical keyboard', price: 129 },
+  { name: 'Ultrawide monitor', price: 549 },
+  { name: 'Noise-cancelling headset', price: 299 },
+  { name: 'Standing desk', price: 419 },
+]);
+
+const taxRate = ref(8);
+
+// Reactive Array.prototype.map — recomputes when products or taxRate change.
+const priced = useArrayMap(products, (product) => {
+  const gross = product.price * (1 + taxRate.value / 100);
+  return { ...product, gross };
+});
+
+const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
+const total = computed(() => priced.value.reduce((sum, p) => sum + p.gross, 0));
+
+function bump(index: number, delta: number) {
+  const next = products.value.slice();
+  next[index] = { ...next[index], price: Math.max(0, next[index].price + delta) };
+  products.value = next;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart</span>
+      <label class="flex items-center gap-2 text-sm text-(--fg-muted)">
+        Tax {{ taxRate }}%
+        <input
+          v-model.number="taxRate"
+          type="range"
+          min="0"
+          max="25"
+          class="accent-(--accent)"
+        >
+      </label>
+    </div>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="(item, index) in priced"
+        :key="item.name"
+        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <div class="min-w-0 flex-1">
+          <p class="truncate text-sm font-medium text-(--fg)">
+            {{ item.name }}
+          </p>
+          <p class="text-xs text-(--fg-subtle)">
+            base {{ formatter.format(item.price) }}
+          </p>
+        </div>
+        <div class="flex items-center gap-1.5">
+          <button
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+            aria-label="Decrease price"
+            @click="bump(index, -10)"
+          >
+            &minus;
+          </button>
+          <button
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+            aria-label="Increase price"
+            @click="bump(index, 10)"
+          >
+            +
+          </button>
+        </div>
+        <span class="w-20 text-right font-mono text-sm tabular-nums text-(--fg)">
+          {{ formatter.format(item.gross) }}
+        </span>
+      </li>
+    </ul>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total with tax</span>
+      <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+        {{ formatter.format(total) }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayReduce/demo.vue b/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
new file mode 100644
index 0000000..800a60f
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayReduce/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArrayReduce } from './index';
+
+interface Expense {
+  label: string;
+  amount: number;
+}
+
+const expenses = ref<Expense[]>([
+  { label: 'Cloud hosting', amount: 86 },
+  { label: 'Domain renewal', amount: 18 },
+  { label: 'Design assets', amount: 42 },
+  { label: 'Coffee', amount: 7 },
+]);
+
+// A reactive seed: the running balance grows as you raise the starting budget.
+const startingBudget = ref(500);
+
+// Reactive Array.prototype.reduce with a reactive initial value.
+const remaining = useArrayReduce(
+  expenses,
+  (balance, expense) => balance - expense.amount,
+  startingBudget,
+);
+
+const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
+function add() {
+  expenses.value = [...expenses.value, { label: 'New charge', amount: 25 }];
+}
+
+function removeAt(index: number) {
+  expenses.value = expenses.value.filter((_, i) => i !== index);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Starting budget</span>
+      <input
+        v-model.number="startingBudget"
+        type="number"
+        step="50"
+        class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="(expense, index) in expenses"
+        :key="index"
+        class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <span class="flex-1 truncate text-sm text-(--fg)">{{ expense.label }}</span>
+        <span class="font-mono text-sm tabular-nums text-rose-600 dark:text-rose-400">
+          &minus;{{ formatter.format(expense.amount) }}
+        </span>
+        <button
+          class="inline-flex size-6 items-center justify-center rounded-md text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          aria-label="Remove expense"
+          @click="removeAt(index)"
+        >
+          &times;
+        </button>
+      </li>
+      <li v-if="expenses.length === 0" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
+        No expenses — full budget remains.
+      </li>
+    </ul>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="add"
+    >
+      + Add charge
+    </button>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Remaining</span>
+      <span
+        class="font-mono text-2xl font-bold tabular-nums"
+        :class="remaining < 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
+      >
+        {{ formatter.format(remaining) }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArraySome/demo.vue b/vue/toolkit/src/composables/array/useArraySome/demo.vue
new file mode 100644
index 0000000..0de38a9
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArraySome/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useArraySome } from './index';
+
+interface Server {
+  name: string;
+  cpu: number;
+}
+
+const servers = ref<Server[]>([
+  { name: 'api-west-1', cpu: 32 },
+  { name: 'api-east-1', cpu: 54 },
+  { name: 'worker-1', cpu: 71 },
+  { name: 'db-primary', cpu: 48 },
+]);
+
+const threshold = ref(80);
+
+// Reactive Array.prototype.some — true if ANY server is over the threshold.
+const hasOverloaded = useArraySome(servers, server => server.cpu > threshold.value);
+
+function load(index: number, delta: number) {
+  const next = servers.value.slice();
+  next[index] = { ...next[index], cpu: Math.min(100, Math.max(0, next[index].cpu + delta)) };
+  servers.value = next;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      class="flex items-center gap-3 rounded-xl border p-4 transition"
+      :class="hasOverloaded
+        ? 'border-amber-500/30 bg-amber-500/10'
+        : 'border-emerald-500/30 bg-emerald-500/10'"
+    >
+      <span
+        class="inline-flex size-2.5 rounded-full"
+        :class="hasOverloaded ? 'bg-amber-500' : 'bg-emerald-500'"
+      />
+      <p class="text-sm font-medium" :class="hasOverloaded ? 'text-amber-700 dark:text-amber-300' : 'text-emerald-700 dark:text-emerald-300'">
+        {{ hasOverloaded ? 'At least one server is overloaded' : 'All servers within limits' }}
+      </p>
+    </div>
+
+    <label class="flex items-center justify-between gap-3 text-sm text-(--fg-muted)">
+      <span>Alert threshold</span>
+      <span class="flex items-center gap-2">
+        <input
+          v-model.number="threshold"
+          type="range"
+          min="40"
+          max="100"
+          class="accent-(--accent)"
+        >
+        <span class="w-10 text-right font-mono tabular-nums text-(--fg)">{{ threshold }}%</span>
+      </span>
+    </label>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="(server, index) in servers"
+        :key="server.name"
+        class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
+      >
+        <div class="mb-1.5 flex items-center justify-between">
+          <span class="font-mono text-sm text-(--fg)">{{ server.name }}</span>
+          <span class="flex items-center gap-2">
+            <span
+              class="font-mono text-sm tabular-nums"
+              :class="server.cpu > threshold ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg-muted)'"
+            >{{ server.cpu }}%</span>
+            <button
+              class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+              aria-label="Decrease load"
+              @click="load(index, -10)"
+            >&minus;</button>
+            <button
+              class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+              aria-label="Increase load"
+              @click="load(index, 10)"
+            >+</button>
+          </span>
+        </div>
+        <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+          <div
+            class="h-full rounded-full transition-all"
+            :class="server.cpu > threshold ? 'bg-amber-500' : 'bg-(--accent)'"
+            :style="{ width: `${server.cpu}%` }"
+          />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useArrayUnique/demo.vue b/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
new file mode 100644
index 0000000..6db2374
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useArrayUnique/demo.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useArrayUnique } from './index';
+
+const raw = ref<string[]>([
+  'design',
+  'Design',
+  'frontend',
+  'design',
+  'FRONTEND',
+  'vue',
+  'Vue',
+  'a11y',
+]);
+
+const caseInsensitive = ref(true);
+
+// Switch de-dup strategy reactively:
+//  - identity (===): "Design" and "design" are distinct
+//  - comparator: case-insensitive equality folds them together
+const exact = useArrayUnique(raw);
+const folded = useArrayUnique(raw, (a, b) => a.toLowerCase() === b.toLowerCase());
+
+const unique = computed(() => (caseInsensitive.value ? folded.value : exact.value));
+
+const draft = ref('');
+
+function addTag() {
+  const value = draft.value.trim();
+  if (!value)
+    return;
+  raw.value = [...raw.value, value];
+  draft.value = '';
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <form class="flex gap-2" @submit.prevent="addTag">
+      <input
+        v-model="draft"
+        type="text"
+        placeholder="Add a tag, e.g. TypeScript"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <button
+        type="submit"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      >
+        Add
+      </button>
+    </form>
+
+    <label class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 text-sm text-(--fg)">
+      <span>Case-insensitive comparator</span>
+      <input
+        v-model="caseInsensitive"
+        type="checkbox"
+        class="size-4 accent-(--accent) cursor-pointer"
+      >
+    </label>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Source ({{ raw.length }})
+      </span>
+      <div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span
+          v-for="(tag, index) in raw"
+          :key="`${tag}-${index}`"
+          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Unique ({{ unique.length }})
+      </span>
+      <div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) p-3">
+        <span
+          v-for="tag in unique"
+          :key="tag"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--accent) bg-(--accent-subtle) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
+        >
+          {{ tag }}
+        </span>
+        <span v-if="unique.length === 0" class="text-xs text-(--fg-subtle)">No tags yet.</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/array/useSorted/demo.vue b/vue/toolkit/src/composables/array/useSorted/demo.vue
new file mode 100644
index 0000000..082bbd2
--- /dev/null
+++ b/vue/toolkit/src/composables/array/useSorted/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSorted } from './index';
+
+interface Player {
+  name: string;
+  score: number;
+  level: number;
+}
+
+const players = ref<Player[]>([
+  { name: 'Nova', score: 1840, level: 12 },
+  { name: 'Echo', score: 2310, level: 9 },
+  { name: 'Pixel', score: 1840, level: 7 },
+  { name: 'Drift', score: 990, level: 14 },
+  { name: 'Sable', score: 2310, level: 11 },
+]);
+
+type SortKey = 'score' | 'level' | 'name';
+
+const sortKey = ref<SortKey>('score');
+const descending = ref(true);
+
+// Reactive, stable sorted copy — the source `players` is never mutated.
+// Stable ordering means ties (equal score) keep their original relative order.
+const sorted = useSorted(players, (a, b) => {
+  const direction = descending.value ? -1 : 1;
+  if (sortKey.value === 'name')
+    return a.name.localeCompare(b.name) * direction;
+  return (a[sortKey.value] - b[sortKey.value]) * direction;
+});
+
+const keys: { id: SortKey; label: string }[] = [
+  { id: 'score', label: 'Score' },
+  { id: 'level', label: 'Level' },
+  { id: 'name', label: 'Name' },
+];
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-2">
+      <div class="inline-flex rounded-lg border border-(--border) bg-(--bg-elevated) p-0.5">
+        <button
+          v-for="key in keys"
+          :key="key.id"
+          class="rounded-md px-3 py-1 text-sm font-medium transition cursor-pointer"
+          :class="sortKey === key.id
+            ? 'bg-(--accent) text-(--accent-fg)'
+            : 'text-(--fg-muted) hover:text-(--fg)'"
+          @click="sortKey = key.id"
+        >
+          {{ key.label }}
+        </button>
+      </div>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="descending = !descending"
+      >
+        {{ descending ? 'Desc ↓' : 'Asc ↑' }}
+      </button>
+    </div>
+
+    <ol class="flex flex-col gap-2">
+      <li
+        v-for="(player, index) in sorted"
+        :key="player.name"
+        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
+      >
+        <span class="w-6 text-center font-mono text-sm tabular-nums text-(--fg-subtle)">
+          {{ index + 1 }}
+        </span>
+        <span class="flex-1 text-sm font-medium text-(--fg)">{{ player.name }}</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          Lv {{ player.level }}
+        </span>
+        <span class="w-16 text-right font-mono text-sm font-semibold tabular-nums text-(--fg)">
+          {{ player.score.toLocaleString() }}
+        </span>
+      </li>
+    </ol>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Stable sort — players with an equal {{ sortKey }} keep their original order. The source array is left untouched.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue b/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
new file mode 100644
index 0000000..d87dfff
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/broadcastedRef/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { broadcastedRef } from './index';
+
+interface CartState {
+  item: string;
+  quantity: number;
+}
+
+const products = ['Mechanical Keyboard', 'USB-C Hub', 'Desk Mat', 'Wrist Rest'];
+
+// Synced across every open tab via BroadcastChannel
+const cart = broadcastedRef<CartState>('docs-demo-cart', { item: products[0], quantity: 1 }, { immediate: true });
+const theme = broadcastedRef<'light' | 'dark'>('docs-demo-theme', 'light');
+
+const supported = typeof BroadcastChannel !== 'undefined';
+
+const subtotal = computed(() => cart.value.quantity * 49);
+
+function pick(item: string): void {
+  cart.value = { ...cart.value, item };
+}
+
+function setQuantity(delta: number): void {
+  cart.value = { ...cart.value, quantity: Math.max(1, cart.value.quantity + delta) };
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared cart</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="supported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span class="h-1.5 w-1.5 rounded-full" :class="supported ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ supported ? 'Broadcasting' : 'Not supported' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="product in products"
+          :key="product"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="cart.item === product
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="pick(product)"
+        >
+          {{ product }}
+        </button>
+      </div>
+
+      <div class="mt-4 flex items-center justify-between">
+        <span class="text-sm text-(--fg-muted)">Quantity</span>
+        <div class="flex items-center gap-2">
+          <button
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+            :disabled="cart.quantity <= 1"
+            @click="setQuantity(-1)"
+          >
+            &minus;
+          </button>
+          <span class="w-8 text-center font-mono text-lg font-bold tabular-nums text-(--fg)">{{ cart.quantity }}</span>
+          <button
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="setQuantity(1)"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex justify-between">
+        <span class="text-(--fg-muted)">{{ cart.item }} &times; {{ cart.quantity }}</span>
+        <span class="font-bold">${{ subtotal }}</span>
+      </div>
+    </div>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="theme = theme === 'light' ? 'dark' : 'light'"
+    >
+      Toggle shared theme: <span class="font-mono">{{ theme }}</span>
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Open this page in a second tab. Every change you make here is broadcast and mirrored instantly in the other tab.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue b/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
new file mode 100644
index 0000000..c573b73
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useBreakpoints/demo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useBreakpoints, breakpointsTailwind } from './index';
+
+const bp = useBreakpoints(breakpointsTailwind);
+
+const active = bp.active();
+const current = bp.current();
+
+const isMobile = bp.smaller('md');
+const isDesktop = bp.greaterOrEqual('lg');
+
+const rows: { key: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; width: string }[] = [
+  { key: 'sm', width: '640px' },
+  { key: 'md', width: '768px' },
+  { key: 'lg', width: '1024px' },
+  { key: 'xl', width: '1280px' },
+  { key: '2xl', width: '1536px' },
+];
+
+const device = (): string => (isDesktop.value ? 'Desktop' : isMobile.value ? 'Mobile' : 'Tablet');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Active breakpoint</span>
+      <div class="mt-1 flex items-baseline gap-2">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ active || 'none' }}</span>
+        <span class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">{{ device() }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tailwind breakpoints</span>
+      <div
+        v-for="row in rows"
+        :key="row.key"
+        class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
+        :class="bp[row.key].value
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="font-mono font-medium">{{ row.key }}</span>
+        <span class="font-mono tabular-nums text-(--fg-subtle)">&ge; {{ row.width }}</span>
+        <span
+          class="h-2 w-2 rounded-full transition"
+          :class="bp[row.key].value ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex justify-between">
+        <span class="text-(--fg-muted)">current()</span>
+        <span>[{{ current.length ? current.join(', ') : '—' }}]</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Resize your browser window — the matched breakpoints update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useClipboard/demo.vue b/vue/toolkit/src/composables/browser/useClipboard/demo.vue
new file mode 100644
index 0000000..b229387
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboard/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useClipboard } from './index';
+
+const { text, copied, copyPending, isSupported, copy } = useClipboard({ copiedDuring: 1500 });
+
+const draft = ref('npm install @robonen/toolkit');
+
+const snippets = [
+  'git switch -c feature/clipboard',
+  'sk-live-9f2a4c7e1b8d6033',
+  'https://robonen.dev/docs/useClipboard',
+];
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Clipboard API</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        {{ isSupported ? 'Supported' : 'Not supported' }}
+      </span>
+    </div>
+
+    <template v-if="isSupported">
+      <div class="flex flex-col gap-2">
+        <input
+          v-model="draft"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          placeholder="Type something to copy…"
+        >
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="copyPending || !draft"
+          @click="copy(draft)"
+        >
+          {{ copyPending ? 'Copying…' : copied ? 'Copied!' : 'Copy to clipboard' }}
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Quick copy</span>
+        <button
+          v-for="snippet in snippets"
+          :key="snippet"
+          class="inline-flex items-center justify-between gap-2 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+          @click="copy(snippet)"
+        >
+          <span class="truncate font-mono text-xs text-(--fg-muted)">{{ snippet }}</span>
+          <span class="shrink-0 text-xs text-(--fg-subtle)">Copy</span>
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last copied</span>
+        <p class="mt-1 break-all font-mono text-sm text-(--fg)">{{ text || '—' }}</p>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400"
+    >
+      The Clipboard API is not available in this browser.
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue b/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
new file mode 100644
index 0000000..485ab6f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useClipboardItems/demo.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useClipboardItems } from './index';
+
+const errorMessage = ref('');
+
+const { content, copied, copyPending, isSupported, copy, read } = useClipboardItems({
+  onError: (error) => {
+    errorMessage.value = error instanceof Error ? error.message : String(error);
+  },
+});
+
+const plain = 'Ada Lovelace — first computer programmer';
+const html = '<strong>Ada Lovelace</strong> — <em>first computer programmer</em>';
+
+function copyRich(): void {
+  errorMessage.value = '';
+  copy([
+    new ClipboardItem({
+      'text/plain': new Blob([plain], { type: 'text/plain' }),
+      'text/html': new Blob([html], { type: 'text/html' }),
+    }),
+  ]);
+}
+
+async function readClipboard(): Promise<void> {
+  errorMessage.value = '';
+  await read();
+}
+
+function typesOf(item: ClipboardItem): string {
+  return item.types.join(', ');
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ClipboardItem API</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        {{ isSupported ? 'Supported' : 'Not supported' }}
+      </span>
+    </div>
+
+    <template v-if="isSupported">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rich payload</span>
+        <p class="mt-1 text-sm text-(--fg)" v-html="html" />
+        <p class="mt-1 font-mono text-xs text-(--fg-subtle)">text/plain &middot; text/html</p>
+      </div>
+
+      <div class="flex gap-2">
+        <button
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="copyPending"
+          @click="copyRich"
+        >
+          {{ copyPending ? 'Copying…' : copied ? 'Copied!' : 'Copy rich content' }}
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="readClipboard"
+        >
+          Read clipboard
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          content ({{ content.length }} {{ content.length === 1 ? 'item' : 'items' }})
+        </span>
+        <ul v-if="content.length" class="mt-2 flex flex-col gap-1">
+          <li
+            v-for="(item, i) in content"
+            :key="i"
+            class="font-mono text-xs text-(--fg)"
+          >
+            #{{ i + 1 }}: {{ typesOf(item) }}
+          </li>
+        </ul>
+        <p v-else class="mt-2 font-mono text-xs text-(--fg-subtle)">No items read yet</p>
+      </div>
+
+      <div
+        v-if="errorMessage"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-xs text-red-600 dark:text-red-400"
+      >
+        {{ errorMessage }}
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400"
+    >
+      The async ClipboardItem API is not available in this browser.
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue b/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
new file mode 100644
index 0000000..475391e
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCloseWatcher/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useCloseWatcher } from './index';
+
+const { isSupported, onClose, close } = useCloseWatcher();
+
+const open = ref(false);
+const lastClosedAt = ref<string | null>(null);
+const closeCount = ref(0);
+
+onMounted(() => {
+  onClose(() => {
+    if (!open.value)
+      return;
+    open.value = false;
+    closeCount.value++;
+    lastClosedAt.value = new Date().toLocaleTimeString();
+  });
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">CloseWatcher API</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        {{ isSupported ? 'Native' : 'Esc fallback' }}
+      </span>
+    </div>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="open"
+      @click="open = true"
+    >
+      Open dialog
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-active-class="transition duration-100 ease-in"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="open" class="rounded-xl border border-(--border-strong) bg-(--bg-elevated) p-4 shadow-lg">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <p class="text-sm font-semibold text-(--fg)">Unsaved changes</p>
+            <p class="mt-1 text-sm text-(--fg-muted)">
+              Press <kbd class="rounded border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
+              (or the Android back gesture) to dismiss.
+            </p>
+          </div>
+        </div>
+        <div class="mt-4 flex justify-end gap-2">
+          <button
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="close()"
+          >
+            Dismiss via close()
+          </button>
+        </div>
+      </div>
+    </Transition>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex justify-between">
+        <span class="text-(--fg-muted)">closes</span>
+        <span class="font-bold">{{ closeCount }}</span>
+      </div>
+      <div class="mt-1 flex justify-between">
+        <span class="text-(--fg-muted)">last</span>
+        <span>{{ lastClosedAt ?? '—' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Open the dialog, then dismiss it with Esc, the system back gesture, or the programmatic <code class="font-mono">close()</code> call.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useColorMode/demo.vue b/vue/toolkit/src/composables/browser/useColorMode/demo.vue
new file mode 100644
index 0000000..0b58ce9
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useColorMode/demo.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useColorMode } from './index';
+
+// Scope the applied class/attribute to the demo card so it does not
+// fight the docs site's own theme. `emitAuto` keeps the tri-state value.
+const target = ref<HTMLElement>();
+
+const mode = useColorMode({
+  selector: target,
+  attribute: 'data-demo-theme',
+  storageKey: null,
+  emitAuto: true,
+  modes: {
+    auto: '',
+    light: 'light',
+    dark: 'dark',
+    sepia: 'sepia',
+  },
+});
+
+const options = [
+  { value: 'auto', label: 'Auto', icon: '◐' },
+  { value: 'light', label: 'Light', icon: '☀' },
+  { value: 'dark', label: 'Dark', icon: '☾' },
+  { value: 'sepia', label: 'Sepia', icon: '✦' },
+] as const;
+</script>
+
+<template>
+  <div
+    ref="target"
+    class="flex w-full max-w-sm flex-col gap-4"
+  >
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Color mode</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        system: {{ mode.system.value }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-4 gap-2">
+      <button
+        v-for="opt in options"
+        :key="opt.value"
+        type="button"
+        class="inline-flex flex-col items-center justify-center gap-1 rounded-lg border px-2 py-3 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="mode === opt.value
+          ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="mode = opt.value"
+      >
+        <span class="text-base leading-none">{{ opt.icon }}</span>
+        {{ opt.label }}
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-3 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reactive state</p>
+      <dl class="space-y-2 text-sm">
+        <div class="flex items-center justify-between">
+          <dt class="text-(--fg-muted)">selected (emitAuto)</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ mode }}</dd>
+        </div>
+        <div class="flex items-center justify-between">
+          <dt class="text-(--fg-muted)">resolved state</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ mode.state.value }}</dd>
+        </div>
+        <div class="flex items-center justify-between">
+          <dt class="text-(--fg-muted)">store</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ mode.store.value }}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The chosen mode is applied as <code class="font-mono text-(--fg-muted)">data-demo-theme</code> on this card.
+      Pick "Auto" to follow your OS preference.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useCssVar/demo.vue b/vue/toolkit/src/composables/browser/useCssVar/demo.vue
new file mode 100644
index 0000000..8858fa0
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useCssVar/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCssVar } from './index';
+
+const target = ref<HTMLElement>();
+
+// Read/write live CSS custom properties on the preview box.
+const hue = useCssVar('--demo-hue', target, { initialValue: '210' });
+const radius = useCssVar('--demo-radius', target, { initialValue: '16' });
+const size = useCssVar('--demo-size', target, { initialValue: '96' });
+
+const swatches = ['12', '90', '150', '210', '270', '330'];
+
+const accent = computed(() => `hsl(${hue.value} 80% 55%)`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="target"
+      class="flex items-center justify-center rounded-xl border border-(--border) bg-(--bg-inset) p-6"
+    >
+      <div
+        class="shadow-lg transition-all duration-300 ease-out"
+        :style="{
+          width: 'calc(var(--demo-size) * 1px)',
+          height: 'calc(var(--demo-size) * 1px)',
+          borderRadius: 'calc(var(--demo-radius) * 1px)',
+          background: 'hsl(var(--demo-hue) 80% 55%)',
+        }"
+      />
+    </div>
+
+    <div class="flex flex-col gap-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="hue">Hue</label>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-hue: {{ hue }}</span>
+        </div>
+        <input
+          id="hue"
+          v-model="hue"
+          type="range"
+          min="0"
+          max="360"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+        <div class="flex gap-1.5">
+          <button
+            v-for="s in swatches"
+            :key="s"
+            type="button"
+            class="h-6 w-6 rounded-md border border-(--border) transition hover:scale-110 active:scale-95 cursor-pointer"
+            :style="{ background: `hsl(${s} 80% 55%)` }"
+            :aria-label="`Set hue ${s}`"
+            @click="hue = s"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="radius">Radius</label>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-radius: {{ radius }}</span>
+        </div>
+        <input
+          id="radius"
+          v-model="radius"
+          type="range"
+          min="0"
+          max="48"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="size">Size</label>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">--demo-size: {{ size }}</span>
+        </div>
+        <input
+          id="size"
+          v-model="size"
+          type="range"
+          min="48"
+          max="140"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      background: {{ accent }};
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useDark/demo.vue b/vue/toolkit/src/composables/browser/useDark/demo.vue
new file mode 100644
index 0000000..bc261de
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDark/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDark } from './index';
+
+const target = ref<HTMLElement>();
+
+// Scope the toggle to the demo card via a data attribute so it does not
+// override the docs site's own theme. `storageKey: null` keeps it in memory.
+const isDark = useDark({
+  selector: target,
+  attribute: 'data-demo-mode',
+  valueDark: 'dark',
+  valueLight: 'light',
+  storageKey: null,
+});
+
+function toggle() {
+  isDark.value = !isDark.value;
+}
+</script>
+
+<template>
+  <div
+    ref="target"
+    data-demo-mode
+    class="flex w-full max-w-sm flex-col gap-4"
+  >
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center gap-3">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-lg text-lg transition-colors"
+          :class="isDark
+            ? 'bg-indigo-500/15 text-indigo-400'
+            : 'bg-amber-500/15 text-amber-600 dark:text-amber-400'"
+        >
+          {{ isDark ? '☾' : '☀' }}
+        </span>
+        <div>
+          <p class="text-sm font-medium text-(--fg)">{{ isDark ? 'Dark mode' : 'Light mode' }}</p>
+          <p class="text-xs text-(--fg-subtle)">isDark = {{ isDark }}</p>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="isDark"
+        class="relative inline-flex h-7 w-12 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring) cursor-pointer"
+        :class="isDark ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        @click="toggle"
+      >
+        <span
+          class="inline-block h-5 w-5 transform rounded-full bg-(--bg) shadow transition-transform"
+          :class="isDark ? 'translate-x-6' : 'translate-x-1'"
+        />
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Preview surface</p>
+      <div class="flex items-center gap-2">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          data-demo-mode = "{{ isDark ? 'dark' : 'light' }}"
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Writing the boolean toggles the attribute on this card. When the requested state
+      matches your OS preference, <code class="font-mono text-(--fg-muted)">useDark</code>
+      falls back to <code class="font-mono text-(--fg-muted)">auto</code> to keep tracking it.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue b/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
new file mode 100644
index 0000000..64c433e
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useDocumentPiP/demo.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useDocumentPiP } from './index';
+
+const { isSupported, isOpen, error, open, close } = useDocumentPiP();
+
+// A live element we move into (and back out of) the PiP window.
+const player = ref<HTMLElement>();
+const host = ref<HTMLElement>();
+const elapsed = ref(0);
+
+let timer: ReturnType<typeof setInterval> | undefined;
+
+onMounted(() => {
+  timer = setInterval(() => {
+    elapsed.value += 1;
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer)
+    clearInterval(timer);
+});
+
+async function popOut() {
+  const win = await open({ width: 320, height: 180 });
+
+  if (win && player.value) {
+    // Carry over the document styles so the moved DOM keeps its look.
+    for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        const css = Array.from(sheet.cssRules).map(r => r.cssText).join('');
+        const style = win.document.createElement('style');
+        style.textContent = css;
+        win.document.head.append(style);
+      }
+      catch {
+        // Cross-origin stylesheet — skip.
+      }
+    }
+    win.document.body.style.margin = '0';
+    win.document.body.append(player.value);
+  }
+}
+
+// When the PiP window closes, pull the element back into the page.
+watch(isOpen, (openNow) => {
+  if (!openNow && player.value && host.value)
+    host.value.append(player.value);
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
+    >
+      Document Picture-in-Picture is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div
+        ref="host"
+        class="min-h-[7rem] rounded-xl border border-(--border) bg-(--bg-inset) p-1"
+      >
+        <div
+          ref="player"
+          class="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-(--bg-elevated) p-6"
+        >
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live timer</span>
+          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+            {{ String(Math.floor(elapsed / 60)).padStart(2, '0') }}:{{ String(elapsed % 60).padStart(2, '0') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isOpen"
+          @click="popOut"
+        >
+          Pop out
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!isOpen"
+          @click="close"
+        >
+          Close window
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+        <span class="text-(--fg-muted)">isOpen</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="isOpen
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg) text-(--fg-muted)'"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="isOpen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+          />
+          {{ isOpen ? 'floating' : 'docked' }}
+        </span>
+      </div>
+
+      <p
+        v-if="error"
+        class="text-xs text-red-600 dark:text-red-400"
+      >
+        {{ String(error) }}
+      </p>
+      <p
+        v-else
+        class="text-xs text-(--fg-subtle)"
+      >
+        "Pop out" moves the live timer into an always-on-top window. Closing it returns the element to the page.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useEventListener/demo.vue b/vue/toolkit/src/composables/browser/useEventListener/demo.vue
new file mode 100644
index 0000000..7cfd334
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useEventListener/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useEventListener } from './index';
+
+// 1. Element target via template ref — track pointer position over the pad.
+const pad = ref<HTMLElement>();
+const pos = ref({ x: 0, y: 0 });
+const inside = ref(false);
+
+useEventListener(pad, 'pointermove', (e: PointerEvent) => {
+  const rect = pad.value?.getBoundingClientRect();
+  if (!rect)
+    return;
+  pos.value = {
+    x: Math.round(e.clientX - rect.left),
+    y: Math.round(e.clientY - rect.top),
+  };
+});
+useEventListener(pad, 'pointerenter', () => (inside.value = true));
+useEventListener(pad, 'pointerleave', () => (inside.value = false));
+
+// 2. Global window target with a stoppable listener — capture last key.
+const lastKey = shallowRef<string>('');
+const keyCount = ref(0);
+const listening = ref(true);
+
+const stop = useEventListener('keydown', (e: KeyboardEvent) => {
+  lastKey.value = e.key === ' ' ? 'Space' : e.key;
+  keyCount.value += 1;
+});
+
+function toggleListening() {
+  if (listening.value) {
+    stop();
+    listening.value = false;
+  }
+  else {
+    // Re-arm by registering a fresh listener.
+    useEventListener('keydown', (e: KeyboardEvent) => {
+      lastKey.value = e.key === ' ' ? 'Space' : e.key;
+      keyCount.value += 1;
+    });
+    listening.value = true;
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">pointermove on element</span>
+      <div
+        ref="pad"
+        class="relative h-32 overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) touch-none"
+      >
+        <div
+          class="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent) transition-opacity"
+          :class="inside ? 'opacity-100' : 'opacity-0'"
+          :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
+        />
+        <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <span class="text-xs text-(--fg-subtle)">{{ inside ? '' : 'Hover here' }}</span>
+        </div>
+        <div class="pointer-events-none absolute bottom-2 left-2 rounded-md border border-(--border) bg-(--bg) px-2 py-0.5 font-mono text-xs tabular-nums text-(--fg-muted)">
+          x: {{ pos.x }} · y: {{ pos.y }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">keydown on window</span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-xs font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggleListening"
+        >
+          {{ listening ? 'Stop listening' : 'Start listening' }}
+        </button>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <kbd
+          class="flex min-w-[3.5rem] items-center justify-center rounded-lg border border-(--border-strong) bg-(--bg-inset) px-3 py-2 font-mono text-sm font-medium text-(--fg)"
+        >
+          {{ lastKey || '—' }}
+        </kbd>
+        <div class="flex flex-col">
+          <span class="text-xs text-(--fg-subtle)">presses captured</span>
+          <span class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ keyCount }}</span>
+        </div>
+        <span
+          class="ml-auto inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="listening
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="listening ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ listening ? 'active' : 'stopped' }}
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Listeners auto-detach on unmount. The returned stop function lets you detach early — press any key, then toggle listening.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue b/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
new file mode 100644
index 0000000..0e51395
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useEyeDropper/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useEyeDropper } from './index';
+
+const { isSupported, sRGBHex, open } = useEyeDropper({ initialValue: '#6366f1' });
+
+const history = ref<string[]>([]);
+const error = ref('');
+
+const hex = computed(() => sRGBHex.value || '#000000');
+
+function relativeLuminance(color: string): number {
+  const value = color.replace('#', '');
+  const r = Number.parseInt(value.slice(0, 2), 16) / 255;
+  const g = Number.parseInt(value.slice(2, 4), 16) / 255;
+  const b = Number.parseInt(value.slice(4, 6), 16) / 255;
+  const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+const readableText = computed(() => (relativeLuminance(hex.value) > 0.5 ? '#000000' : '#ffffff'));
+
+async function pick() {
+  error.value = '';
+  try {
+    const result = await open();
+    if (result && !history.value.includes(result.sRGBHex))
+      history.value = [result.sRGBHex, ...history.value].slice(0, 6);
+  }
+  catch {
+    error.value = 'Selection cancelled';
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
+    >
+      The EyeDropper API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div
+        class="flex h-32 items-center justify-center rounded-xl border border-(--border) transition-colors duration-300"
+        :style="{ backgroundColor: hex, color: readableText }"
+      >
+        <span class="font-mono text-2xl font-bold tabular-nums">{{ hex }}</span>
+      </div>
+
+      <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer" @click="pick">
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m2 22 1-1h3l9-9" /><path d="M3 21v-3l9-9" /><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L21 6l3 3-3 3-3-3-9 9" />
+        </svg>
+        Pick a color from screen
+      </button>
+
+      <p v-if="error" class="text-center text-xs text-(--fg-subtle)">
+        {{ error }}
+      </p>
+
+      <div v-if="history.length" class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent</span>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="color in history"
+            :key="color"
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) cursor-pointer"
+            @click="sRGBHex = color"
+          >
+            <span class="size-3 rounded-full border border-(--border)" :style="{ backgroundColor: color }" />
+            {{ color }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFavicon/demo.vue b/vue/toolkit/src/composables/browser/useFavicon/demo.vue
new file mode 100644
index 0000000..ef57387
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFavicon/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFavicon } from './index';
+
+interface Preset {
+  label: string;
+  href: string;
+  emoji: string;
+}
+
+// Tiny inline SVG data-URIs so the demo needs no network/assets.
+function emojiFavicon(emoji: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${emoji}</text></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+const presets: Preset[] = [
+  { label: 'Rocket', emoji: '🚀', href: emojiFavicon('🚀') },
+  { label: 'Fire', emoji: '🔥', href: emojiFavicon('🔥') },
+  { label: 'Heart', emoji: '💜', href: emojiFavicon('💜') },
+  { label: 'Star', emoji: '⭐', href: emojiFavicon('⭐') },
+];
+
+const favicon = useFavicon(presets[0].href);
+const active = ref(presets[0].label);
+
+function select(preset: Preset) {
+  active.value = preset.label;
+  favicon.value = preset.href;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2">
+        <div class="flex gap-1.5">
+          <span class="size-2.5 rounded-full bg-red-500/70" />
+          <span class="size-2.5 rounded-full bg-amber-500/70" />
+          <span class="size-2.5 rounded-full bg-emerald-500/70" />
+        </div>
+        <div class="ml-2 flex flex-1 items-center gap-2 rounded-md bg-(--bg) px-2 py-1">
+          <span class="text-base leading-none">{{ presets.find(p => p.label === active)?.emoji }}</span>
+          <span class="truncate text-xs text-(--fg-muted)">My Awesome App</span>
+        </div>
+      </div>
+      <p class="mt-2 text-center text-xs text-(--fg-subtle)">
+        Look at the real browser tab — its favicon updates live.
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Choose a favicon</span>
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          v-for="preset in presets"
+          :key="preset.label"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="active === preset.label
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="select(preset)"
+        >
+          <span class="text-base leading-none">{{ preset.emoji }}</span>
+          {{ preset.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) break-all">
+      favicon.value = "{{ presets.find(p => p.label === active)?.emoji }} svg"
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFileDialog/demo.vue b/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
new file mode 100644
index 0000000..b1e3e3b
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileDialog/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useFileDialog } from './index';
+
+const { files, open, reset, onChange, onCancel } = useFileDialog({
+  accept: 'image/*',
+  multiple: true,
+});
+
+const status = ref('Idle');
+const multiple = ref(true);
+
+const selected = computed(() => (files.value ? Array.from(files.value) : []));
+const totalBytes = computed(() => selected.value.reduce((sum, file) => sum + file.size, 0));
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0)
+    return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / 1024 ** index).toFixed(1)} ${units[index]}`;
+}
+
+onChange((list) => {
+  status.value = list && list.length ? `Selected ${list.length} file(s)` : 'Cleared';
+});
+
+onCancel(() => {
+  status.value = 'Dialog dismissed';
+});
+
+function pick() {
+  open({ multiple: multiple.value });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
+        <input v-model="multiple" type="checkbox" class="size-4 rounded border-(--border) accent-(--accent)">
+        Allow multiple
+      </label>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ status }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer" @click="pick">
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        Choose images
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!selected.length"
+        @click="reset"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div
+      v-if="!selected.length"
+      class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+    >
+      <span class="text-sm text-(--fg-muted)">No files selected</span>
+      <span class="text-xs text-(--fg-subtle)">Click “Choose images” to open the native dialog</span>
+    </div>
+
+    <div v-else class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">{{ selected.length }} file(s)</span>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ formatBytes(totalBytes) }} total</span>
+      </div>
+      <ul class="flex max-h-44 flex-col gap-1.5 overflow-auto">
+        <li
+          v-for="file in selected"
+          :key="file.name + file.lastModified"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+        >
+          <span class="truncate text-sm text-(--fg)">{{ file.name }}</span>
+          <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-subtle)">{{ formatBytes(file.size) }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue b/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
new file mode 100644
index 0000000..29a100f
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFileSystemAccess/demo.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useFileSystemAccess } from './index';
+
+const lastError = ref('');
+
+const {
+  isSupported,
+  data,
+  fileName,
+  fileMIME,
+  fileSize,
+  open,
+  create,
+  save,
+  saveAs,
+} = useFileSystemAccess({
+  dataType: 'Text',
+  types: [{ description: 'Text files', accept: { 'text/plain': ['.txt', '.md'] } }],
+  onError: (error) => {
+    lastError.value = error instanceof Error && error.name === 'AbortError'
+      ? 'Cancelled'
+      : 'Something went wrong';
+  },
+});
+
+// Writable string proxy so the textarea can v-model the (union-typed) data ref.
+const text = computed({
+  get: () => (typeof data.value === 'string' ? data.value : ''),
+  set: (value: string) => { data.value = value; },
+});
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0)
+    return '0 B';
+  const units = ['B', 'KB', 'MB'];
+  const index = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / 1024 ** index).toFixed(1)} ${units[index]}`;
+}
+
+async function newFile() {
+  lastError.value = '';
+  await create({ suggestedName: 'untitled.txt' });
+  if (typeof data.value !== 'string')
+    data.value = 'Hello from the File System Access API!\n';
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
+    >
+      The File System Access API is not supported in this browser. Try Chrome or Edge.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-wrap gap-2">
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer" @click="open()">
+          Open…
+        </button>
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer" @click="newFile">
+          New…
+        </button>
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="save()">
+          Save
+        </button>
+        <button class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" :disabled="data === undefined" @click="saveAs()">
+          Save As…
+        </button>
+      </div>
+
+      <div v-if="fileName" class="flex flex-wrap items-center gap-2">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ fileName }}
+        </span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ fileMIME || 'text/plain' }}
+        </span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-mono tabular-nums text-(--fg-muted)">
+          {{ formatBytes(fileSize) }}
+        </span>
+      </div>
+
+      <textarea
+        v-if="data !== undefined"
+        v-model="text"
+        rows="6"
+        spellcheck="false"
+        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        placeholder="File contents…"
+      />
+
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+      >
+        <span class="text-sm text-(--fg-muted)">No file open</span>
+        <span class="text-xs text-(--fg-subtle)">Open an existing file or create a new one, edit it, then save back to disk.</span>
+      </div>
+
+      <p v-if="lastError" class="text-center text-xs text-(--fg-subtle)">
+        {{ lastError }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useFps/demo.vue b/vue/toolkit/src/composables/browser/useFps/demo.vue
deleted file mode 100644
index 74b78b0..0000000
--- a/vue/toolkit/src/composables/browser/useFps/demo.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">import { useFps } from './index';
-
-const { fps, min, max, isActive, reset, toggle } = useFps({ every: 10 });
-</script>
-
-<template>
-  <div class="space-y-4">
-    <div class="flex items-end gap-8">
-      <div>
-        <div class="text-4xl font-mono font-bold tabular-nums text-(--color-text)">{{ fps }}</div>
-        <div class="text-xs text-(--color-text-mute) mt-1">FPS</div>
-      </div>
-      <div>
-        <div class="text-xl font-mono tabular-nums text-(--color-text-soft)">{{ min === Infinity ? '—' : min }}</div>
-        <div class="text-xs text-(--color-text-mute) mt-1">Min</div>
-      </div>
-      <div>
-        <div class="text-xl font-mono tabular-nums text-(--color-text-soft)">{{ max || '—' }}</div>
-        <div class="text-xs text-(--color-text-mute) mt-1">Max</div>
-      </div>
-    </div>
-
-    <div class="h-2 rounded-full border border-(--color-border) overflow-hidden">
-      <div
-        class="h-full rounded-full transition-all duration-300"
-        :class="fps >= 50 ? 'bg-emerald-500' : fps >= 30 ? 'bg-amber-500' : 'bg-red-500'"
-        :style="{ width: `${Math.min(fps / 60 * 100, 100)}%` }"
-      />
-    </div>
-
-    <div class="flex items-center gap-2">
-      <button
-        class="px-3 py-1.5 text-sm rounded-md border border-(--color-border) bg-(--color-bg) hover:bg-(--color-bg-mute) text-(--color-text-soft) transition-colors cursor-pointer"
-        @click="toggle"
-      >
-        {{ isActive ? 'Pause' : 'Resume' }}
-      </button>
-      <button
-        class="px-3 py-1.5 text-sm rounded-md border border-(--color-border) bg-(--color-bg) hover:bg-(--color-bg-mute) text-(--color-text-soft) transition-colors cursor-pointer"
-        @click="reset"
-      >
-        Reset
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/vue/toolkit/src/composables/browser/useFullscreen/demo.vue b/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
new file mode 100644
index 0000000..2e8bd21
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useFullscreen/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useFullscreen } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
+    >
+      The Fullscreen API is not supported in this browser.
+    </div>
+
+    <div
+      ref="target"
+      class="relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated) transition-colors"
+      :class="isFullscreen && 'bg-(--bg-inset)'"
+    >
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isFullscreen
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isFullscreen ? 'Fullscreen' : 'Windowed' }}
+      </span>
+
+      <p class="px-6 text-center text-sm text-(--fg-muted)">
+        This panel becomes the fullscreen target. Press
+        <kbd class="rounded border border-(--border) bg-(--bg) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
+        to leave.
+      </p>
+
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isSupported"
+        @click="toggle"
+      >
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <template v-if="isFullscreen">
+            <path d="M8 3v3a2 2 0 0 1-2 2H3" /><path d="M21 8h-3a2 2 0 0 1-2-2V3" /><path d="M3 16h3a2 2 0 0 1 2 2v3" /><path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+          </template>
+          <template v-else>
+            <path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+          </template>
+        </svg>
+        {{ isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
+      </button>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isSupported || isFullscreen"
+        @click="enter"
+      >
+        Enter
+      </button>
+      <button
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isSupported || !isFullscreen"
+        @click="exit"
+      >
+        Exit
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useImage/demo.vue b/vue/toolkit/src/composables/browser/useImage/demo.vue
new file mode 100644
index 0000000..d73c318
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useImage/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useImage } from './index';
+
+const samples = [
+  { label: 'Mountains', src: 'https://picsum.photos/id/1018/640/400' },
+  { label: 'Forest', src: 'https://picsum.photos/id/1015/640/400' },
+  { label: 'Broken URL', src: 'https://picsum.photos/this-image-does-not-exist.jpg' },
+];
+
+const current = ref(0);
+const src = computed(() => samples[current.value]!.src);
+
+// Reactive getter source: useImage reloads whenever `src` changes.
+const { isLoading, isReady, error, state, execute } = useImage(
+  () => ({ src: src.value, alt: samples[current.value]!.label }),
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="(sample, index) in samples"
+        :key="sample.src"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="current === index
+          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="current = index"
+      >
+        {{ sample.label }}
+      </button>
+    </div>
+
+    <div class="relative aspect-[8/5] w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+      <Transition
+        enter-active-class="transition duration-300"
+        enter-from-class="opacity-0 scale-[1.02]"
+        leave-active-class="transition duration-200"
+        leave-to-class="opacity-0"
+      >
+        <img
+          v-if="isReady && state"
+          :key="src"
+          :src="state.src"
+          :alt="state.alt"
+          class="h-full w-full object-cover"
+        >
+        <div
+          v-else-if="error"
+          class="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center"
+        >
+          <span class="text-2xl">⚠️</span>
+          <p class="text-sm font-medium text-red-600 dark:text-red-400">
+            Failed to load image
+          </p>
+        </div>
+        <div
+          v-else
+          class="absolute inset-0 flex flex-col items-center justify-center gap-3"
+        >
+          <span class="h-7 w-7 animate-spin rounded-full border-2 border-(--border-strong) border-t-(--accent)" />
+          <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Loading…
+          </p>
+        </div>
+      </Transition>
+    </div>
+
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="isLoading
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : isReady
+              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+        >
+          {{ isLoading ? 'loading' : isReady ? 'ready' : 'error' }}
+        </span>
+        <span
+          v-if="isReady && state"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums"
+        >
+          {{ state.naturalWidth }}×{{ state.naturalHeight }}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isLoading"
+        @click="execute()"
+      >
+        Reload
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue b/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
new file mode 100644
index 0000000..3000cfa
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useLocalFonts/demo.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useLocalFonts } from './index';
+
+const { isSupported, fonts, error, query } = useLocalFonts();
+
+const loading = ref(false);
+const filter = ref('');
+
+async function pickFonts() {
+  loading.value = true;
+  try {
+    await query();
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
+const filtered = computed(() => {
+  const term = filter.value.trim().toLowerCase();
+  if (!term)
+    return fonts.value;
+  return fonts.value.filter(font => font.fullName.toLowerCase().includes(term));
+});
+
+// Unique families for the summary readout.
+const familyCount = computed(() => new Set(fonts.value.map(font => font.family)).size);
+
+// Render each face in its own font (quotes kept out of the template attribute).
+function familyStyle(name: string) {
+  return { fontFamily: `'${name}', sans-serif` };
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Local Font Access
+      </p>
+      <span
+        v-if="fonts.length"
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums"
+      >
+        {{ fonts.length }} faces · {{ familyCount }} families
+      </span>
+    </div>
+
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Local Font Access API is not supported in this browser. Try a recent Chromium-based desktop browser.
+    </div>
+
+    <template v-else>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="loading"
+        @click="pickFonts"
+      >
+        {{ loading ? 'Requesting permission…' : fonts.length ? 'Re-query fonts' : 'Enumerate installed fonts' }}
+      </button>
+
+      <p
+        v-if="error"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        Query failed — permission was likely denied.
+      </p>
+
+      <template v-if="fonts.length">
+        <input
+          v-model="filter"
+          type="search"
+          placeholder="Filter by name…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+
+        <ul class="max-h-56 divide-y divide-(--border) overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated)">
+          <li
+            v-for="font in filtered"
+            :key="font.postscriptName"
+            class="flex items-baseline justify-between gap-3 px-3 py-2"
+          >
+            <span
+              class="truncate text-base text-(--fg)"
+              :style="familyStyle(font.fullName)"
+            >
+              {{ font.fullName }}
+            </span>
+            <span class="shrink-0 font-mono text-xs text-(--fg-subtle)">
+              {{ font.style }}
+            </span>
+          </li>
+          <li
+            v-if="!filtered.length"
+            class="px-3 py-6 text-center text-sm text-(--fg-subtle)"
+          >
+            No fonts match "{{ filter }}"
+          </li>
+        </ul>
+      </template>
+
+      <p
+        v-else-if="!error && !loading"
+        class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+      >
+        Click above to grant the <code class="font-mono">local-fonts</code> permission and list your fonts.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue b/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
new file mode 100644
index 0000000..0915dbf
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useMediaQuery/demo.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useMediaQuery } from './index';
+
+// useMediaQuery returns a single ComputedRef<boolean> — bind it directly.
+const isWide = useMediaQuery('(min-width: 1024px)');
+const isMedium = useMediaQuery('(min-width: 640px)');
+const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+const isPortrait = useMediaQuery('(orientation: portrait)');
+const isFinePointer = useMediaQuery('(pointer: fine)');
+
+const breakpoint = isWide;
+
+const queries = [
+  { label: 'min-width: 1024px', match: isWide },
+  { label: 'min-width: 640px', match: isMedium },
+  { label: 'prefers-color-scheme: dark', match: prefersDark },
+  { label: 'prefers-reduced-motion', match: prefersReducedMotion },
+  { label: 'orientation: portrait', match: isPortrait },
+  { label: 'pointer: fine', match: isFinePointer },
+];
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Current layout
+      </p>
+      <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ breakpoint ? 'desktop' : isMedium ? 'tablet' : 'mobile' }}
+      </p>
+      <p class="mt-1 text-sm text-(--fg-muted)">
+        Resize the window to watch these queries flip live.
+      </p>
+    </div>
+
+    <ul class="divide-y divide-(--border) rounded-xl border border-(--border) bg-(--bg-elevated)">
+      <li
+        v-for="query in queries"
+        :key="query.label"
+        class="flex items-center justify-between gap-3 px-3 py-2.5"
+      >
+        <code class="font-mono text-sm text-(--fg)">{{ query.label }}</code>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="query.match.value
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          <span
+            class="h-1.5 w-1.5 rounded-full"
+            :class="query.match.value ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          />
+          {{ query.match.value ? 'matches' : 'no match' }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue b/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
new file mode 100644
index 0000000..be76b54
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useObjectUrl/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useObjectUrl } from './index';
+
+const file = shallowRef<File>();
+// useObjectUrl returns a single read-only ShallowRef<string | undefined>.
+const url = useObjectUrl(file);
+
+const isImage = computed(() => file.value?.type.startsWith('image/') ?? false);
+
+const sizeLabel = computed(() => {
+  const bytes = file.value?.size ?? 0;
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+});
+
+const dragging = ref(false);
+
+function onFiles(list: FileList | null | undefined) {
+  if (list && list.length)
+    file.value = list[0];
+}
+
+function onDrop(event: DragEvent) {
+  dragging.value = false;
+  onFiles(event.dataTransfer?.files);
+}
+
+function clear() {
+  file.value = undefined;
+}
+
+// A synthetic blob so the demo works even without a file at hand.
+function generateSample() {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160">`
+    + `<rect width="240" height="160" fill="#6366f1"/>`
+    + `<text x="120" y="90" font-size="22" font-family="sans-serif" fill="white" text-anchor="middle">useObjectUrl</text>`
+    + `</svg>`;
+  file.value = new File([svg], 'sample.svg', { type: 'image/svg+xml' });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <label
+      class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 text-center transition"
+      :class="dragging
+        ? 'border-(--accent) bg-(--accent-subtle)'
+        : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+      @dragover.prevent="dragging = true"
+      @dragleave.prevent="dragging = false"
+      @drop.prevent="onDrop"
+    >
+      <span class="text-2xl">📎</span>
+      <span class="text-sm font-medium text-(--fg)">Drop a file or click to choose</span>
+      <span class="text-xs text-(--fg-subtle)">An object URL is created instantly</span>
+      <input
+        type="file"
+        class="hidden"
+        @change="onFiles(($event.target as HTMLInputElement).files)"
+      >
+    </label>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="generateSample"
+      >
+        Use sample image
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!file"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div
+      v-if="file"
+      class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4"
+    >
+      <img
+        v-if="isImage && url"
+        :src="url"
+        alt="Selected file preview"
+        class="mx-auto max-h-40 rounded-lg border border-(--border) object-contain"
+      >
+      <div class="flex items-center justify-between gap-3 text-sm">
+        <span class="truncate font-medium text-(--fg)">{{ file.name }}</span>
+        <span class="shrink-0 font-mono text-xs text-(--fg-muted) tabular-nums">{{ sizeLabel }}</span>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) break-all">
+        {{ url }}
+      </div>
+    </div>
+
+    <p
+      v-else
+      class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
+    >
+      No source — the URL ref is <code class="font-mono">undefined</code>
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePermission/demo.vue b/vue/toolkit/src/composables/browser/usePermission/demo.vue
new file mode 100644
index 0000000..23651a7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePermission/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { usePermission } from './index';
+import type { GeneralPermissionDescriptor } from './index';
+
+const names: GeneralPermissionDescriptor['name'][] = [
+  'geolocation',
+  'camera',
+  'microphone',
+  'notifications',
+  'clipboard-read',
+];
+
+// usePermission takes a static descriptor, so instantiate one per permission
+// up-front and switch which reactive state we read via the dropdown.
+const permissions = names.map(name => ({
+  name,
+  ...usePermission(name, { controls: true }),
+}));
+
+const selected = ref<GeneralPermissionDescriptor['name']>('geolocation');
+
+const active = computed(() => permissions.find(perm => perm.name === selected.value)!);
+const isSupported = active.value.isSupported;
+
+const meta = computed(() => {
+  switch (active.value.state.value) {
+    case 'granted':
+      return { label: 'granted', dot: 'bg-emerald-500', text: 'text-emerald-600 dark:text-emerald-400', ring: 'border-emerald-500/30 bg-emerald-500/10' };
+    case 'denied':
+      return { label: 'denied', dot: 'bg-red-500', text: 'text-red-600 dark:text-red-400', ring: 'border-red-500/30 bg-red-500/10' };
+    case 'prompt':
+      return { label: 'prompt', dot: 'bg-amber-500', text: 'text-amber-600 dark:text-amber-400', ring: 'border-amber-500/30 bg-amber-500/10' };
+    default:
+      return { label: 'unknown', dot: 'bg-(--border-strong)', text: 'text-(--fg-subtle)', ring: 'border-(--border) bg-(--bg-inset)' };
+  }
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Permissions API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-col gap-1.5">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Permission
+        </label>
+        <select
+          v-model="selected"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+          <option v-for="name in names" :key="name" :value="name">
+            {{ name }}
+          </option>
+        </select>
+      </div>
+
+      <ul class="divide-y divide-(--border) rounded-xl border border-(--border) bg-(--bg-elevated)">
+        <li
+          v-for="perm in permissions"
+          :key="perm.name"
+          class="flex items-center justify-between gap-3 px-3 py-2.5"
+        >
+          <code class="font-mono text-sm text-(--fg)">{{ perm.name }}</code>
+          <span class="font-mono text-xs text-(--fg-muted)">{{ perm.state.value ?? 'unknown' }}</span>
+        </li>
+      </ul>
+
+      <div class="flex flex-col items-center gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ selected }}
+        </span>
+        <span
+          class="inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm font-semibold transition"
+          :class="[meta.ring, meta.text]"
+        >
+          <span class="h-2 w-2 rounded-full" :class="meta.dot" />
+          {{ meta.label }}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="active.query()"
+      >
+        Re-check "{{ selected }}"
+      </button>
+
+      <p class="text-center text-xs text-(--fg-subtle)">
+        Status updates live if you change a permission in your browser settings.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue b/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
new file mode 100644
index 0000000..7106197
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredColorScheme/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredColorScheme } from './index';
+
+const scheme = usePreferredColorScheme();
+
+const options = [
+  { value: 'light', label: 'Light', icon: '☀️', hint: 'prefers-color-scheme: light' },
+  { value: 'dark', label: 'Dark', icon: '🌙', hint: 'prefers-color-scheme: dark' },
+  { value: 'no-preference', label: 'No preference', icon: '🌓', hint: 'no explicit preference' },
+] as const;
+
+const active = computed(() => options.find(o => o.value === scheme.value));
+
+// A tiny live preview that flips its own palette based on the OS preference,
+// independent of the docs site theme.
+const previewClass = computed(() =>
+  scheme.value === 'dark'
+    ? 'bg-zinc-900 text-zinc-100 border-zinc-700'
+    : 'bg-white text-zinc-900 border-zinc-200',
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Preferred color scheme
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full bg-emerald-500" />
+        live
+      </span>
+    </div>
+
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="option in options"
+        :key="option.value"
+        class="flex items-center gap-3 rounded-lg border px-3 py-2.5 transition"
+        :class="scheme === option.value
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <span class="text-lg leading-none">{{ option.icon }}</span>
+        <span class="flex flex-1 flex-col">
+          <span
+            class="text-sm font-medium"
+            :class="scheme === option.value ? 'text-(--accent-text)' : 'text-(--fg)'"
+          >
+            {{ option.label }}
+          </span>
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ option.hint }}</span>
+        </span>
+        <span
+          v-if="scheme === option.value"
+          class="text-(--accent-text)"
+          aria-hidden="true"
+        >✓</span>
+      </li>
+    </ul>
+
+    <div
+      class="flex items-center gap-3 rounded-xl border p-4 transition-colors"
+      :class="previewClass"
+    >
+      <span class="text-2xl">{{ active?.icon }}</span>
+      <div class="flex flex-col">
+        <span class="text-sm font-semibold">Self-themed preview</span>
+        <span class="text-xs opacity-70">
+          Resolved to <span class="font-mono">{{ scheme }}</span>
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: change your OS appearance setting to see this update instantly.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue b/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
new file mode 100644
index 0000000..637cea6
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredContrast/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredContrast } from './index';
+
+const contrast = usePreferredContrast({ ssrContrast: 'no-preference' });
+
+const levels = [
+  { value: 'more', label: 'More', desc: 'Heavier borders, stronger separation', query: 'prefers-contrast: more' },
+  { value: 'less', label: 'Less', desc: 'Softer, lower-contrast surfaces', query: 'prefers-contrast: less' },
+  { value: 'custom', label: 'Custom', desc: 'A user-defined contrast scheme', query: 'prefers-contrast: custom' },
+  { value: 'no-preference', label: 'No preference', desc: 'Default system contrast', query: 'prefers-contrast: no-preference' },
+] as const;
+
+const active = computed(() => levels.find(l => l.value === contrast.value));
+
+// Demonstrate adapting UI intensity to the reported contrast level.
+const cardClass = computed(() => {
+  switch (contrast.value) {
+    case 'more':
+      return 'border-(--border-strong) bg-(--bg-inset)';
+    case 'less':
+      return 'border-(--border) bg-(--bg-subtle) opacity-90';
+    default:
+      return 'border-(--border) bg-(--bg-elevated)';
+  }
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Preferred contrast
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ contrast }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div
+        v-for="level in levels"
+        :key="level.value"
+        class="flex flex-col gap-1 rounded-lg border px-3 py-2.5 transition"
+        :class="contrast === level.value
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <span
+          class="text-sm font-medium"
+          :class="contrast === level.value ? 'text-(--accent-text)' : 'text-(--fg)'"
+        >
+          {{ level.label }}
+        </span>
+        <span class="text-xs leading-snug text-(--fg-muted)">{{ level.desc }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border p-4 transition-colors" :class="cardClass">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Adaptive surface
+      </span>
+      <p class="mt-1 text-sm text-(--fg)">
+        This card adjusts its borders and fill to match the
+        <span class="font-mono text-(--fg-muted)">{{ active?.query }}</span> level.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: toggle your OS accessibility "increase / reduce contrast" setting to update.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue b/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
new file mode 100644
index 0000000..c190cd2
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredDark/demo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredDark } from './index';
+
+const isDark = usePreferredDark();
+
+const label = computed(() => (isDark.value ? 'Dark' : 'Light'));
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        prefers-color-scheme: dark
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors"
+        :class="isDark
+          ? 'border-indigo-500/30 bg-indigo-500/10 text-indigo-600 dark:text-indigo-300'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        {{ isDark ? 'true' : 'false' }}
+      </span>
+    </div>
+
+    <!-- A miniature sky scene that flips between day and night. -->
+    <div
+      class="relative flex h-40 items-end overflow-hidden rounded-xl border border-(--border) p-4 transition-colors duration-500"
+      :class="isDark
+        ? 'bg-gradient-to-b from-slate-900 to-slate-700'
+        : 'bg-gradient-to-b from-sky-300 to-sky-100'"
+    >
+      <!-- Sun / Moon -->
+      <div
+        class="absolute right-5 top-5 size-12 rounded-full transition-all duration-500"
+        :class="isDark
+          ? 'bg-zinc-200 shadow-[0_0_28px_6px_rgba(228,228,231,0.4)]'
+          : 'bg-amber-300 shadow-[0_0_36px_10px_rgba(252,211,77,0.6)]'"
+      />
+      <!-- Stars, only at night -->
+      <Transition
+        enter-active-class="transition-opacity duration-700"
+        enter-from-class="opacity-0"
+        leave-active-class="transition-opacity duration-300"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="isDark" class="absolute inset-0">
+          <span class="absolute left-6 top-7 size-1 rounded-full bg-white" />
+          <span class="absolute left-20 top-12 size-0.5 rounded-full bg-white" />
+          <span class="absolute left-32 top-6 size-1 rounded-full bg-white" />
+          <span class="absolute left-12 top-16 size-0.5 rounded-full bg-white" />
+          <span class="absolute left-40 top-16 size-1 rounded-full bg-white" />
+        </div>
+      </Transition>
+      <span
+        class="relative z-10 text-2xl font-bold tabular-nums transition-colors duration-500"
+        :class="isDark ? 'text-zinc-100' : 'text-slate-800'"
+      >
+        {{ label }}
+      </span>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      const isDark = usePreferredDark()
+      <span class="text-(--fg-subtle)"> // </span>{{ isDark }}
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: switch your OS to dark/light mode to watch the scene change.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue b/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
new file mode 100644
index 0000000..28820be
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredLanguages/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredLanguages } from './index';
+
+const languages = usePreferredLanguages();
+
+// Resolve a human-friendly name + flag for each BCP-47 tag where possible.
+const displayNames = computed(() => {
+  try {
+    return new Intl.DisplayNames(['en'], { type: 'language' });
+  }
+  catch {
+    return undefined;
+  }
+});
+
+function nameOf(tag: string): string {
+  return displayNames.value?.of(tag) ?? tag;
+}
+
+function flagOf(tag: string): string {
+  const region = tag.split('-')[1]?.toUpperCase();
+  if (!region || region.length !== 2)
+    return '🌐';
+  // Convert a 2-letter region code to a flag emoji.
+  return String.fromCodePoint(...[...region].map(c => 0x1F1E6 + c.charCodeAt(0) - 65));
+}
+
+const primary = computed(() => languages.value[0] ?? 'en');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        navigator.languages
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ languages.length }} {{ languages.length === 1 ? 'locale' : 'locales' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Primary language
+      </span>
+      <div class="mt-1 flex items-center gap-2.5">
+        <span class="text-2xl leading-none">{{ flagOf(primary) }}</span>
+        <span class="flex flex-col">
+          <span class="text-base font-semibold text-(--fg)">{{ nameOf(primary) }}</span>
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ primary }}</span>
+        </span>
+      </div>
+    </div>
+
+    <ol class="flex flex-col gap-2">
+      <li
+        v-for="(lang, index) in languages"
+        :key="`${lang}-${index}`"
+        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
+      >
+        <span class="w-5 text-center font-mono text-xs text-(--fg-subtle) tabular-nums">
+          {{ index + 1 }}
+        </span>
+        <span class="text-lg leading-none">{{ flagOf(lang) }}</span>
+        <span class="flex flex-1 flex-col">
+          <span class="text-sm font-medium text-(--fg)">{{ nameOf(lang) }}</span>
+          <span class="font-mono text-xs text-(--fg-subtle)">{{ lang }}</span>
+        </span>
+        <span
+          v-if="index === 0"
+          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          preferred
+        </span>
+      </li>
+    </ol>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: updates automatically on the browser's <span class="font-mono">languagechange</span> event.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
new file mode 100644
index 0000000..3324d2d
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedMotion/demo.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredReducedMotion } from './index';
+
+const motion = usePreferredReducedMotion();
+
+const reduced = computed(() => motion.value === 'reduce');
+
+// Mirror the recommended pattern: derive a transition duration from the
+// preference so animations are disabled when the user asks for reduced motion.
+const duration = computed(() => (reduced.value ? 0 : 1.2));
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        prefers-reduced-motion
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors"
+        :class="reduced
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        {{ motion }}
+      </span>
+    </div>
+
+    <!-- Animated demo box: the orbiting dot pauses when motion is reduced. -->
+    <div class="flex h-40 items-center justify-center rounded-xl border border-(--border) bg-(--bg-inset)">
+      <div class="relative size-24">
+        <div class="absolute inset-0 rounded-full border-2 border-dashed border-(--border-strong)" />
+        <div
+          class="orbit absolute left-1/2 top-1/2 size-24"
+          :style="{ animationDuration: `${duration}s`, animationPlayState: reduced ? 'paused' : 'running' }"
+        >
+          <span class="absolute -left-2 -top-2 size-4 rounded-full bg-(--accent) shadow-lg" />
+        </div>
+        <div class="absolute inset-0 flex items-center justify-center">
+          <span class="text-2xl">{{ reduced ? '⏸' : '🎞️' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Derived setting
+      </span>
+      <div class="mt-1 flex items-baseline gap-2">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ reduced ? 0 : 1200 }}
+        </span>
+        <span class="text-sm text-(--fg-muted)">ms transition</span>
+      </div>
+      <p class="mt-2 text-sm text-(--fg-muted)">
+        {{ reduced
+          ? 'Reduced motion requested — animations are disabled.'
+          : 'Full motion — animations run at normal speed.' }}
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Read-only: enable "Reduce motion" in your OS accessibility settings to pause the orbit.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.orbit {
+  animation-name: spin;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
new file mode 100644
index 0000000..3924f18
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/usePreferredReducedTransparency/demo.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePreferredReducedTransparency } from './index';
+
+const transparency = usePreferredReducedTransparency();
+
+const isReduced = computed(() => transparency.value === 'reduce');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        prefers-reduced-transparency
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isReduced
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isReduced ? 'bg-amber-500' : 'bg-emerald-500'"
+        />
+        {{ transparency }}
+      </span>
+    </div>
+
+    <!-- Live preview: a frosted glass panel that flattens when reduce is preferred -->
+    <div class="relative overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+      <div
+        class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-(--accent) opacity-60 blur-xl"
+      />
+      <div
+        class="pointer-events-none absolute -bottom-10 right-2 size-24 rounded-full bg-sky-500 opacity-50 blur-xl"
+      />
+      <div
+        class="relative rounded-lg border border-(--border) p-4 transition"
+        :class="isReduced
+          ? 'bg-(--bg-elevated)'
+          : 'bg-(--bg-elevated)/60 backdrop-blur-md'"
+      >
+        <p class="text-sm font-medium text-(--fg)">
+          Glass card
+        </p>
+        <p class="mt-1 text-sm text-(--fg-muted)">
+          {{ isReduced
+            ? 'Translucency removed for clarity.'
+            : 'Background blurs through the panel.' }}
+        </p>
+      </div>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Toggle <span class="font-mono text-(--fg-muted)">Reduce transparency</span> in your OS
+      accessibility settings to see this update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useScriptTag/demo.vue b/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
new file mode 100644
index 0000000..8e4d142
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useScriptTag/demo.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useScriptTag } from './index';
+
+// A tiny, well-known public UMD script (no side effects beyond defining a global).
+const src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js';
+
+const status = ref<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+const loadedAt = shallowRef<string | null>(null);
+
+const { scriptTag, load, unload } = useScriptTag(
+  src,
+  () => {
+    status.value = 'loaded';
+    loadedAt.value = new Date().toLocaleTimeString();
+  },
+  { manual: true },
+);
+
+async function onLoad() {
+  if (status.value === 'loading') return;
+  status.value = 'loading';
+  try {
+    await load();
+  }
+  catch {
+    status.value = 'error';
+  }
+}
+
+function onUnload() {
+  unload();
+  status.value = 'idle';
+  loadedAt.value = null;
+}
+
+const statusStyles = {
+  idle: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)',
+  loading: 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400',
+  loaded: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+  error: 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400',
+} as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Script status
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium capitalize"
+          :class="statusStyles[status]"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="{
+              'bg-(--fg-subtle)': status === 'idle',
+              'bg-sky-500 animate-pulse': status === 'loading',
+              'bg-emerald-500': status === 'loaded',
+              'bg-red-500': status === 'error',
+            }"
+          />
+          {{ status }}
+        </span>
+      </div>
+
+      <div class="mt-3 truncate rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted)">
+        {{ src }}
+      </div>
+
+      <dl class="mt-3 grid grid-cols-2 gap-2 text-sm">
+        <div>
+          <dt class="text-xs text-(--fg-subtle)">
+            &lt;script&gt; element
+          </dt>
+          <dd class="font-mono text-(--fg)">
+            {{ scriptTag ? 'present' : 'null' }}
+          </dd>
+        </div>
+        <div>
+          <dt class="text-xs text-(--fg-subtle)">
+            Loaded at
+          </dt>
+          <dd class="font-mono text-(--fg)">
+            {{ loadedAt ?? '—' }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="status === 'loading' || status === 'loaded'"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="onLoad"
+      >
+        {{ status === 'loading' ? 'Loading…' : 'Load script' }}
+      </button>
+      <button
+        type="button"
+        :disabled="status !== 'loaded'"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="onUnload"
+      >
+        Unload
+      </button>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Manual mode — the tag is injected into <span class="font-mono text-(--fg-muted)">&lt;head&gt;</span>
+      only when you click, and removed on unload.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useShare/demo.vue b/vue/toolkit/src/composables/browser/useShare/demo.vue
new file mode 100644
index 0000000..a42d352
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useShare/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useShare } from './index';
+
+const payload = reactive({
+  title: 'Vue Toolkit',
+  text: 'A collection of essential Vue composables.',
+  url: 'https://vuejs.org',
+});
+
+const { share, isSupported } = useShare(payload);
+
+const lastResult = ref<'shared' | 'dismissed' | null>(null);
+
+async function onShare() {
+  lastResult.value = null;
+  try {
+    await share();
+    lastResult.value = 'shared';
+  }
+  catch {
+    // User dismissed the share sheet (AbortError) — treat as a non-error.
+    lastResult.value = 'dismissed';
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Web Share API
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isSupported ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isSupported ? 'Supported' : 'Unsupported' }}
+      </span>
+    </div>
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Title</span>
+        <input
+          v-model="payload.title"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Text</span>
+        <input
+          v-model="payload.text"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">URL</span>
+        <input
+          v-model="payload.url"
+          type="url"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+    </div>
+
+    <button
+      type="button"
+      :disabled="!isSupported"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      @click="onShare"
+    >
+      <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="18" cy="5" r="3" />
+        <circle cx="6" cy="12" r="3" />
+        <circle cx="18" cy="19" r="3" />
+        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+      </svg>
+      Share
+    </button>
+
+    <p v-if="!isSupported" class="text-xs leading-relaxed text-(--fg-subtle)">
+      The Web Share API is not available in this browser. It works on most mobile
+      browsers and Safari.
+    </p>
+    <p
+      v-else-if="lastResult"
+      class="text-xs font-medium"
+      :class="lastResult === 'shared'
+        ? 'text-emerald-600 dark:text-emerald-400'
+        : 'text-(--fg-muted)'"
+    >
+      {{ lastResult === 'shared' ? 'Content shared.' : 'Share sheet dismissed.' }}
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useStyleTag/demo.vue b/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
new file mode 100644
index 0000000..b3d1c43
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useStyleTag/demo.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useStyleTag } from './index';
+
+const initialCss = `.styletag-demo-box {
+  background: linear-gradient(135deg, #6366f1, #ec4899);
+  color: white;
+  letter-spacing: 0.05em;
+}`;
+
+const { id, css, isLoaded, load, unload } = useStyleTag(initialCss, { immediate: false });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Injected style tag
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isLoaded
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isLoaded ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isLoaded ? 'Loaded' : 'Unloaded' }}
+      </span>
+    </div>
+
+    <!-- Live target affected by the injected stylesheet -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+      <div
+        class="styletag-demo-box rounded-lg border border-(--border) bg-(--bg-elevated) px-4 py-6 text-center text-sm font-semibold text-(--fg) transition-all"
+      >
+        Styled by &lt;style id="{{ id }}"&gt;
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">CSS source</span>
+      <textarea
+        v-model="css"
+        rows="5"
+        spellcheck="false"
+        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-xs leading-relaxed text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </label>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="isLoaded"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="load"
+      >
+        Load
+      </button>
+      <button
+        type="button"
+        :disabled="!isLoaded"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="unload"
+      >
+        Unload
+      </button>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Editing the CSS updates the live stylesheet instantly while loaded.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useTabLeader/demo.vue b/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
index da8af33..cab81c2 100644
--- a/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
+++ b/vue/toolkit/src/composables/browser/useTabLeader/demo.vue
@@ -1,54 +1,84 @@
-<script setup lang="ts">import { useTabLeader } from './index';
+<script setup lang="ts">
+import { useTabLeader } from './index';
 
-const { isLeader, isSupported, acquire, release } = useTabLeader('docs-demo-leader');
+const { isLeader, isSupported, acquire, release } = useTabLeader('vue-toolkit-demo-leader');
 </script>
 
 <template>
-  <div class="space-y-4">
-    <div class="flex items-center gap-3">
-      <span class="text-sm font-medium text-(--color-text-soft)">Web Locks API:</span>
-      <span
-        class="inline-flex items-center gap-1.5 text-sm font-mono px-2 py-0.5 rounded border"
-        :class="isSupported ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700' : 'border-red-500/30 bg-red-500/10 text-red-700'"
-      >
-        {{ isSupported ? 'Supported' : 'Not supported' }}
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Web Locks election
       </span>
-    </div>
-
-    <div class="flex items-center gap-3">
-      <span class="text-sm font-medium text-(--color-text-soft)">Leader status:</span>
       <span
-        class="inline-flex items-center gap-1.5 text-sm font-mono px-2 py-0.5 rounded border"
-        :class="isLeader ? 'border-brand-500/30 bg-brand-500/10 text-brand-600' : 'border-(--color-border) bg-(--color-bg-mute) text-(--color-text-soft)'"
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isSupported
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
       >
         <span
-          class="w-2 h-2 rounded-full"
-          :class="isLeader ? 'bg-brand-500 animate-pulse' : 'bg-(--color-text-mute)'"
+          class="size-1.5 rounded-full"
+          :class="isSupported ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
         />
-        {{ isLeader ? 'Leader' : 'Follower' }}
+        {{ isSupported ? 'Supported' : 'Unsupported' }}
       </span>
     </div>
 
-    <p class="text-xs text-(--color-text-mute)">
-      Open this page in multiple tabs — only one will be the leader.
-      Close the leader tab and another will take over automatically.
-    </p>
+    <!-- Primary leader state -->
+    <div
+      class="flex flex-col items-center gap-2 rounded-xl border p-6 transition-colors"
+      :class="isLeader
+        ? 'border-(--accent) bg-(--accent-subtle)'
+        : 'border-(--border) bg-(--bg-elevated)'"
+    >
+      <div
+        class="flex size-12 items-center justify-center rounded-full transition-colors"
+        :class="isLeader
+          ? 'bg-(--accent) text-(--accent-fg)'
+          : 'bg-(--bg-inset) text-(--fg-subtle)'"
+      >
+        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m12 2 3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21 7.5 13.5 2 9h7z" />
+        </svg>
+      </div>
+      <p
+        class="text-lg font-bold"
+        :class="isLeader ? 'text-(--accent-text)' : 'text-(--fg)'"
+      >
+        {{ isLeader ? 'Leader tab' : 'Follower tab' }}
+      </p>
+      <p class="text-center text-xs text-(--fg-muted)">
+        {{ isLeader
+          ? 'This tab holds the lock and would run exclusive work.'
+          : 'Another tab is the leader, or leadership was released.' }}
+      </p>
+    </div>
 
-    <div class="flex items-center gap-2 pt-2">
+    <div class="flex gap-2">
       <button
-        class="px-3 py-1.5 text-sm rounded-md border border-(--color-border) bg-(--color-bg) hover:bg-(--color-bg-mute) text-(--color-text-soft) transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        type="button"
         :disabled="!isSupported || isLeader"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="acquire"
       >
         Acquire
       </button>
       <button
-        class="px-3 py-1.5 text-sm rounded-md border border-(--color-border) bg-(--color-bg) hover:bg-(--color-bg-mute) text-(--color-text-soft) transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        type="button"
         :disabled="!isSupported || !isLeader"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
         @click="release"
       >
         Release
       </button>
     </div>
+
+    <p v-if="!isSupported" class="text-xs leading-relaxed text-(--fg-subtle)">
+      The Web Locks API is not available in this browser.
+    </p>
+    <p v-else class="text-xs leading-relaxed text-(--fg-subtle)">
+      Open this page in a second tab — only one tab is the leader at a time. Release
+      here and watch another tab take over.
+    </p>
   </div>
 </template>
diff --git a/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue b/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
new file mode 100644
index 0000000..66b2940
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTextareaAutosize/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTextareaAutosize } from './index';
+
+const maxHeight = ref(220);
+const resizes = ref(0);
+
+const { textarea, input, triggerResize } = useTextareaAutosize({
+  maxHeight,
+  onResize: () => resizes.value++,
+});
+
+input.value = 'Type here and watch the textarea grow with your content.\n\nIt re-fits on every keystroke, on programmatic changes, and when the available width changes (try resizing the panel).';
+
+function loadSample(): void {
+  input.value = [
+    'Release notes — v0.0.15',
+    '',
+    '- useTextareaAutosize now reacts to width reflow',
+    '- Title sync is SSR-safe',
+    '- URL params decode repeated keys to arrays',
+  ].join('\n');
+}
+
+function clear(): void {
+  input.value = '';
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Auto-growing textarea
+      </label>
+      <textarea
+        ref="textarea"
+        v-model="input"
+        placeholder="Start typing…"
+        rows="1"
+        class="w-full resize-none overflow-y-auto rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm leading-relaxed text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Max height
+        </span>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">{{ maxHeight }}px</span>
+      </div>
+      <input
+        v-model.number="maxHeight"
+        type="range"
+        min="80"
+        max="400"
+        step="20"
+        class="w-full accent-(--accent)"
+      >
+      <div class="flex items-center justify-between border-t border-(--border) pt-2 text-xs">
+        <span class="text-(--fg-muted)">{{ input.length }} chars</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-medium text-(--fg-muted)">
+          {{ resizes }} resizes
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="loadSample"
+      >
+        Load sample
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="triggerResize"
+      >
+        Trigger resize
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!input"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useTitle/demo.vue b/vue/toolkit/src/composables/browser/useTitle/demo.vue
new file mode 100644
index 0000000..793fd98
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useTitle/demo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useTitle } from './index';
+
+const appName = ref('Toolkit');
+
+// Two-way bound to document.title, formatted through the template.
+const title = useTitle('Dashboard', {
+  titleTemplate: (t) => `${t} · ${appName.value}`,
+});
+
+const presets = ['Dashboard', 'Inbox', 'Settings', 'Billing'];
+
+// Re-apply the template when the app name changes by re-writing the title.
+watch(appName, () => {
+  // eslint-disable-next-line no-self-assign
+  title.value = title.value;
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Live document title
+      </span>
+      <div class="mt-2 flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <svg viewBox="0 0 24 24" fill="none" class="size-4 shrink-0 text-(--fg-subtle)">
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5" />
+          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" stroke="currentColor" stroke-width="1.5" />
+        </svg>
+        <span class="truncate font-mono text-sm text-(--fg)">
+          {{ title || 'Untitled' }} · {{ appName }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Page title
+      </label>
+      <input
+        v-model="title"
+        type="text"
+        placeholder="Enter a page title"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        App name (template suffix)
+      </label>
+      <input
+        v-model="appName"
+        type="text"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        :class="title === preset ? 'border-(--accent) text-(--accent-text)' : ''"
+        @click="title = preset"
+      >
+        {{ preset }}
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Check your browser tab — it updates in real time.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue b/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
new file mode 100644
index 0000000..e0dfca7
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useUrlSearchParams/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUrlSearchParams } from './index';
+
+interface Filters {
+  q: string;
+  sort: string;
+  tags: string[];
+}
+
+// Reactive object mirrored to the URL query string. Mutate it to update the URL.
+const params = useUrlSearchParams<Filters>('history', {
+  initialValue: { q: 'vue', sort: 'recent', tags: ['ui'] },
+  removeFalsyValues: true,
+});
+
+const sorts = ['recent', 'popular', 'name'];
+const allTags = ['ui', 'browser', 'animation', 'sensors'];
+
+const activeTags = computed<string[]>(() =>
+  Array.isArray(params.tags) ? params.tags : params.tags ? [params.tags] : [],
+);
+
+function toggleTag(tag: string): void {
+  const next = new Set(activeTags.value);
+  if (next.has(tag))
+    next.delete(tag);
+  else
+    next.add(tag);
+  params.tags = [...next];
+}
+
+const queryString = computed(() => {
+  const usp = new URLSearchParams();
+  if (params.q)
+    usp.set('q', params.q);
+  if (params.sort)
+    usp.set('sort', params.sort);
+  for (const t of activeTags.value)
+    usp.append('tags', t);
+  const s = usp.toString();
+  return s ? `?${s}` : '(empty)';
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Search query
+      </label>
+      <input
+        v-model="params.q"
+        type="text"
+        placeholder="Search…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Sort by</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="s in sorts"
+          :key="s"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="params.sort === s
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="params.sort = s"
+        >
+          {{ s }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tags (repeated keys → array)
+      </span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="tag in allTags"
+          :key="tag"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition cursor-pointer"
+          :class="activeTags.includes(tag)
+            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted) hover:border-(--border-strong)'"
+          @click="toggleTag(tag)"
+        >
+          #{{ tag }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Live URL query
+      </span>
+      <div class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        <span class="whitespace-nowrap">{{ queryString }}</span>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        The browser address bar updates as you edit. Falsy values are dropped.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useVibrate/demo.vue b/vue/toolkit/src/composables/browser/useVibrate/demo.vue
new file mode 100644
index 0000000..bbea540
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useVibrate/demo.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useVibrate } from './index';
+
+const presets: Record<string, number[]> = {
+  Pulse: [200],
+  Double: [100, 60, 100],
+  SOS: [100, 60, 100, 60, 100, 200, 250, 60, 250, 60, 250, 200, 100, 60, 100, 60, 100],
+  Heartbeat: [120, 100, 120, 500],
+};
+
+const { isSupported, pattern, vibrate, stop, intervalControls } = useVibrate({
+  pattern: presets.Double,
+  interval: 1500,
+});
+
+const activePreset = ref('Double');
+const looping = intervalControls?.isActive;
+
+function applyPreset(name: string): void {
+  activePreset.value = name;
+  pattern.value = presets[name];
+  vibrate();
+}
+
+function toggleLoop(): void {
+  if (intervalControls?.isActive.value)
+    stop();
+  else
+    intervalControls?.resume();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Vibration API is not supported in this browser. Try a mobile device.
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Current pattern (ms)
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="isSupported
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          {{ isSupported ? 'supported' : 'unsupported' }}
+        </span>
+      </div>
+      <div class="mt-2 overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        [{{ Array.isArray(pattern) ? pattern.join(', ') : pattern }}]
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Presets</span>
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          v-for="(_, name) in presets"
+          :key="name"
+          type="button"
+          :disabled="!isSupported"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :class="activePreset === name
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="applyPreset(name)"
+        >
+          {{ name }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        :disabled="!isSupported"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="vibrate()"
+      >
+        Vibrate now
+      </button>
+      <button
+        type="button"
+        :disabled="!isSupported"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="toggleLoop"
+      >
+        {{ looping ? 'Stop loop' : 'Loop every 1.5s' }}
+      </button>
+      <button
+        type="button"
+        :disabled="!isSupported"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="stop"
+      >
+        Stop
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useWakeLock/demo.vue b/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
new file mode 100644
index 0000000..26f9c05
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWakeLock/demo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useWakeLock } from './index';
+
+const { isSupported, isActive, sentinel, request, release } = useWakeLock();
+
+const error = ref<string | null>(null);
+
+async function toggle(): Promise<void> {
+  error.value = null;
+  try {
+    if (sentinel.value)
+      await release();
+    else
+      await request('screen');
+  }
+  catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Screen Wake Lock API is not supported in this browser.
+    </div>
+
+    <div class="flex flex-col items-center gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-6">
+      <div
+        class="flex size-16 items-center justify-center rounded-full border transition"
+        :class="isActive
+          ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+      >
+        <svg viewBox="0 0 24 24" fill="none" class="size-7">
+          <rect x="4" y="3" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.5" />
+          <path d="M8 21h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path v-if="isActive" d="m9 9 2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+      <div class="text-center">
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ isActive ? 'AWAKE' : 'IDLE' }}
+        </p>
+        <p class="mt-1 text-xs text-(--fg-muted)">
+          {{ isActive ? 'Screen will stay on' : 'Screen may sleep normally' }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5 text-sm">
+      <span class="text-(--fg-muted)">Lock held</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ sentinel ? 'yes' : 'none' }}
+      </span>
+    </div>
+
+    <button
+      type="button"
+      :disabled="!isSupported"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      @click="toggle"
+    >
+      {{ sentinel ? 'Release wake lock' : 'Request wake lock' }}
+    </button>
+
+    <p v-if="error" class="text-xs text-red-600 dark:text-red-400">
+      {{ error }}
+    </p>
+    <p v-else class="text-xs text-(--fg-subtle)">
+      The lock auto-releases when the tab is hidden and re-acquires when visible again.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/browser/useWebNotification/demo.vue b/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
new file mode 100644
index 0000000..16103ad
--- /dev/null
+++ b/vue/toolkit/src/composables/browser/useWebNotification/demo.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useWebNotification } from './index';
+
+const title = ref('New message from Ada');
+const body = ref('Hey — the deploy is green. Ship it whenever you are ready.');
+const lastEvent = ref<string>('');
+
+const {
+  isSupported,
+  notification,
+  permissionGranted,
+  show,
+  close,
+  ensurePermissionGranted,
+  onClick,
+  onShow,
+  onClose,
+  onError,
+} = useWebNotification({
+  // Don't prompt on mount — wait for an explicit user gesture below.
+  requestPermissions: false,
+  icon: 'https://vuejs.org/images/logo.png',
+  requireInteraction: false,
+});
+
+onShow(() => (lastEvent.value = 'shown'));
+onClick(() => (lastEvent.value = 'clicked'));
+onClose(() => (lastEvent.value = 'closed'));
+onError(() => (lastEvent.value = 'error'));
+
+async function requestPermission() {
+  await ensurePermissionGranted();
+}
+
+function notify() {
+  show({ title: title.value, body: body.value });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400"
+    >
+      Notifications are not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <div>
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Permission
+          </div>
+          <div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
+            <span
+              class="inline-block size-2 rounded-full transition"
+              :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+            />
+            {{ permissionGranted ? 'Granted' : 'Not granted' }}
+          </div>
+        </div>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="permissionGranted"
+          @click="requestPermission"
+        >
+          {{ permissionGranted ? 'Allowed' : 'Request access' }}
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Title</span>
+          <input
+            v-model="title"
+            type="text"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Body</span>
+          <textarea
+            v-model="body"
+            rows="2"
+            class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          />
+        </label>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!permissionGranted"
+          @click="notify"
+        >
+          Show notification
+        </button>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!notification"
+          @click="close"
+        >
+          Close
+        </button>
+      </div>
+
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last event</span>
+        <span class="font-mono text-(--fg)">{{ lastEvent || '—' }}</span>
+      </div>
+
+      <p v-if="!permissionGranted" class="text-xs text-(--fg-subtle)">
+        Grant access first, then trigger a notification. Switch back to this tab and it auto-closes.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue b/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
new file mode 100644
index 0000000..bdd3c6c
--- /dev/null
+++ b/vue/toolkit/src/composables/component/createReusableTemplate/demo.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { createReusableTemplate } from './index';
+
+interface Member {
+  name: string;
+  role: string;
+  online: boolean;
+}
+
+// Define a stat card template once, reuse it for every metric below.
+const [DefineStat, ReuseStat] = createReusableTemplate<{ label: string; value: string }>();
+
+// Object form + typed bindings for a richer row template.
+const { define: DefineMember, reuse: ReuseMember } = createReusableTemplate<Member>();
+
+const team = ref<Member[]>([
+  { name: 'Ada Lovelace', role: 'Engineering', online: true },
+  { name: 'Grace Hopper', role: 'Design', online: false },
+  { name: 'Alan Turing', role: 'Research', online: true },
+]);
+
+function toggle(member: Member) {
+  member.online = !member.online;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <!-- Templates are captured here, rendered wherever Reuse* appears -->
+    <DefineStat v-slot="{ label, value }">
+      <div class="flex-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ label }}
+        </div>
+        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ value }}
+        </div>
+      </div>
+    </DefineStat>
+
+    <DefineMember v-slot="{ name, role, online }">
+      <div class="flex items-center gap-3">
+        <span
+          class="inline-block size-2 shrink-0 rounded-full transition"
+          :class="online ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+        />
+        <div class="min-w-0 flex-1">
+          <div class="truncate text-sm font-medium text-(--fg)">{{ name }}</div>
+          <div class="text-xs text-(--fg-subtle)">{{ role }}</div>
+        </div>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ online ? 'Online' : 'Away' }}
+        </span>
+      </div>
+    </DefineMember>
+
+    <div class="flex gap-2">
+      <ReuseStat label="Members" :value="String(team.length)" />
+      <ReuseStat label="Online" :value="String(team.filter(m => m.online).length)" />
+    </div>
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Team — click a row to toggle status
+      </div>
+      <button
+        v-for="member in team"
+        :key="member.name"
+        class="rounded-lg p-2 text-left transition hover:bg-(--bg-inset) active:scale-[0.99] cursor-pointer"
+        @click="toggle(member)"
+      >
+        <ReuseMember
+          :name="member.name"
+          :role="member.role"
+          :online="member.online"
+        />
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Both card and row markup are declared once via <code class="font-mono">DefineTemplate</code> and
+      rendered from multiple <code class="font-mono">ReuseTemplate</code> call sites.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/unrefElement/demo.vue b/vue/toolkit/src/composables/component/unrefElement/demo.vue
new file mode 100644
index 0000000..5a75c8e
--- /dev/null
+++ b/vue/toolkit/src/composables/component/unrefElement/demo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { unrefElement } from './index';
+
+const boxRef = useTemplateRef<HTMLElement>('box');
+const width = ref(280);
+const tag = ref('—');
+const rect = ref<{ w: number; h: number } | null>(null);
+
+function measure() {
+  // unrefElement turns the template ref into the raw DOM element, regardless of
+  // whether it points at an HTMLElement or a component instance.
+  const el = unrefElement(boxRef);
+  if (!el)
+    return;
+
+  tag.value = el.tagName.toLowerCase();
+  const { width: w, height: h } = el.getBoundingClientRect();
+  rect.value = { w: Math.round(w), h: Math.round(h) };
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="box"
+      class="flex items-center justify-center rounded-xl border border-dashed border-(--border-strong) bg-(--bg-inset) py-8 text-sm font-medium text-(--fg-muted) transition-[width] duration-300 ease-out"
+      :style="{ width: `${width}px` }"
+    >
+      Target element
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Width</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ width }}px</span>
+      </div>
+      <input
+        v-model.number="width"
+        type="range"
+        min="120"
+        max="340"
+        class="w-full accent-(--accent)"
+      >
+    </label>
+
+    <button
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="measure"
+    >
+      Read element via unrefElement
+    </button>
+
+    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">tagName</span>
+        <span>{{ tag }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">boundingRect</span>
+        <span>{{ rect ? `${rect.w} × ${rect.h}` : '—' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Resize the box, then measure. <code class="font-mono">unrefElement</code> unwraps the template
+      ref to the real DOM node — it also resolves a component ref to its <code class="font-mono">$el</code>.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useCurrentElement/demo.vue b/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
new file mode 100644
index 0000000..1c59986
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useCurrentElement/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { useCurrentElement } from './index';
+
+// Resolves to this component's root DOM element, re-read on mount + every update.
+const el = useCurrentElement<HTMLElement>();
+
+const padding = ref(16);
+const childCount = ref(3);
+const info = ref<{ tag: string; children: number; height: number } | null>(null);
+
+watchEffect(() => {
+  const node = el.value;
+  if (!node) {
+    // SSR / pre-mount: el.value is undefined.
+    info.value = null;
+    return;
+  }
+
+  info.value = {
+    tag: node.tagName.toLowerCase(),
+    children: node.querySelectorAll('[data-chip]').length,
+    height: Math.round(node.getBoundingClientRect().height),
+  };
+});
+
+const chips = ['vue', 'reactivity', 'composables', 'ssr', 'typescript', 'dom'];
+</script>
+
+<template>
+  <div
+    class="flex w-full max-w-sm flex-col gap-4 rounded-xl border border-(--border) bg-(--bg-elevated)"
+    :style="{ padding: `${padding}px` }"
+  >
+    <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+      Live measurement of this component's root
+    </div>
+
+    <div class="flex flex-wrap gap-1.5">
+      <span
+        v-for="chip in chips.slice(0, childCount)"
+        :key="chip"
+        data-chip
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        {{ chip }}
+      </span>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Root padding</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ padding }}px</span>
+      </div>
+      <input
+        v-model.number="padding"
+        type="range"
+        min="8"
+        max="40"
+        class="w-full accent-(--accent)"
+      >
+    </label>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="childCount <= 1"
+        @click="childCount--"
+      >
+        Remove chip
+      </button>
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="childCount >= chips.length"
+        @click="childCount++"
+      >
+        Add chip
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">el.value</span>
+        <span>{{ info ? `<${info.tag}>` : 'undefined' }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">chips in DOM</span>
+        <span>{{ info?.children ?? '—' }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">root height</span>
+        <span>{{ info ? `${info.height}px` : '—' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The computed re-reads <code class="font-mono">$el</code> on every update, so the readout tracks
+      padding and chip changes automatically.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useForwardExpose/demo.vue b/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
new file mode 100644
index 0000000..0e84b4c
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useForwardExpose/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+import { defineComponent, h, ref, useTemplateRef, watchEffect } from 'vue';
+import { useForwardExpose } from './index';
+
+// A headless wrapper: it renders a child <input> but transparently forwards the
+// child's $el (and any exposed API) up to whoever holds a ref to the wrapper.
+const FieldWrapper = defineComponent({
+  name: 'FieldWrapper',
+  setup() {
+    // forwardRef is bound to the inner element's :ref; currentElement resolves
+    // to the underlying HTMLElement, skipping text/comment nodes.
+    const { forwardRef, currentElement } = useForwardExpose();
+
+    return () =>
+      h('input', {
+        ref: forwardRef,
+        placeholder: 'Forwarded input',
+        // expose the resolved element so the demo can show it changed live
+        'data-tag': currentElement.value?.tagName.toLowerCase(),
+        class:
+          'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)',
+      });
+  },
+});
+
+// The parent holds a ref to the wrapper — but thanks to useForwardExpose,
+// wrapper.$el points straight at the inner <input>.
+const field = useTemplateRef<ComponentPublicInstance>('field');
+const resolved = ref<{ tag: string; value: string } | null>(null);
+
+watchEffect(() => {
+  const el = field.value?.$el as HTMLInputElement | undefined;
+  resolved.value = el ? { tag: el.tagName.toLowerCase(), value: el.value } : null;
+});
+
+function focusForwarded() {
+  // Reaching through the wrapper straight to the real DOM node.
+  (field.value?.$el as HTMLInputElement | undefined)?.focus();
+}
+
+function fillSample() {
+  const el = field.value?.$el as HTMLInputElement | undefined;
+  if (el) {
+    el.value = 'ada@anthropic.dev';
+    resolved.value = { tag: el.tagName.toLowerCase(), value: el.value };
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Wrapper component
+      </div>
+      <FieldWrapper ref="field" />
+      <p class="text-xs text-(--fg-subtle)">
+        <code class="font-mono">&lt;FieldWrapper&gt;</code> renders an inner input, but
+        <code class="font-mono">useForwardExpose</code> makes its <code class="font-mono">$el</code>
+        resolve to that input.
+      </p>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="focusForwarded"
+      >
+        Focus forwarded $el
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="fillSample"
+      >
+        Fill sample
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-subtle)">field.$el</span>
+        <span>{{ resolved ? `<${resolved.tag}>` : 'undefined' }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">value</span>
+        <span class="truncate">{{ resolved?.value || '""' }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The parent never touches the input directly — it holds a ref to the wrapper, whose
+      <code class="font-mono">$el</code> is forwarded to the inner element.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue b/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
new file mode 100644
index 0000000..82bb7db
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useTemplateRefsList/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import { useTemplateRefsList } from './index';
+
+interface Track {
+  id: number;
+  title: string;
+  artist: string;
+}
+
+let nextId = 6;
+const tracks = ref<Track[]>([
+  { id: 1, title: 'Midnight City', artist: 'M83' },
+  { id: 2, title: 'Resonance', artist: 'Home' },
+  { id: 3, title: 'Nightcall', artist: 'Kavinsky' },
+  { id: 4, title: 'Strangers', artist: 'Sigrid' },
+  { id: 5, title: 'Open Eye Signal', artist: 'Jon Hopkins' },
+]);
+
+// Collect a live, document-ordered array of every rendered row element.
+const { refs, set } = useTemplateRefsList<HTMLLIElement>();
+
+const lastMeasured = ref<{ index: number; width: number } | null>(null);
+
+// Reads the freshly collected refs to measure the DOM directly.
+function measureLast() {
+  const els = refs.value;
+  if (els.length === 0)
+    return;
+  const index = els.length - 1;
+  const el = els[index]!;
+  lastMeasured.value = { index, width: Math.round(el.getBoundingClientRect().width) };
+  el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+async function addTrack() {
+  const sample = { id: nextId++, title: `Aurora ${nextId}`, artist: 'Synthwave' };
+  tracks.value.push(sample);
+  // Wait for the update flush so the new element is in `refs`.
+  await nextTick();
+  measureLast();
+}
+
+function removeTrack(id: number) {
+  tracks.value = tracks.value.filter(t => t.id !== id);
+  lastMeasured.value = null;
+}
+
+const collected = computed(() => refs.value.length);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Playlist</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ collected }} refs collected
+      </span>
+    </div>
+
+    <ul class="flex flex-col gap-2 max-h-56 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+      <li
+        v-for="(track, index) in tracks"
+        :key="track.id"
+        :ref="set"
+        class="group flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 transition"
+        :class="lastMeasured?.index === index ? 'border-(--accent) ring-2 ring-(--ring)' : 'hover:border-(--border-strong)'"
+      >
+        <span class="font-mono text-xs tabular-nums text-(--fg-subtle) w-5 text-right">{{ index + 1 }}</span>
+        <span class="flex min-w-0 flex-1 flex-col">
+          <span class="truncate text-sm font-medium text-(--fg)">{{ track.title }}</span>
+          <span class="truncate text-xs text-(--fg-muted)">{{ track.artist }}</span>
+        </span>
+        <button
+          type="button"
+          aria-label="Remove track"
+          class="rounded-md px-1.5 py-0.5 text-xs text-(--fg-subtle) opacity-0 transition hover:text-(--fg) group-hover:opacity-100 cursor-pointer"
+          @click="removeTrack(track.id)"
+        >
+          ✕
+        </button>
+      </li>
+      <li v-if="tracks.length === 0" class="px-3 py-6 text-center text-sm text-(--fg-subtle)">
+        No tracks — add one to collect a ref.
+      </li>
+    </ul>
+
+    <div
+      v-if="lastMeasured"
+      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums"
+    >
+      refs[{{ lastMeasured.index }}].width = {{ lastMeasured.width }}px
+    </div>
+    <p v-else class="text-xs text-(--fg-subtle)">
+      Add a track to measure the newest collected element directly from the DOM.
+    </p>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="addTrack"
+      >
+        Add track
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="collected === 0"
+        @click="measureLast"
+      >
+        Measure last
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/component/useVirtualList/demo.vue b/vue/toolkit/src/composables/component/useVirtualList/demo.vue
new file mode 100644
index 0000000..efc31cb
--- /dev/null
+++ b/vue/toolkit/src/composables/component/useVirtualList/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useVirtualList } from './index';
+
+// 10,000 rows — only the visible window (plus overscan) is ever in the DOM.
+const total = 10000;
+const items = shallowRef(
+  Array.from({ length: total }, (_, i) => ({
+    id: i,
+    label: `Row #${(i + 1).toString().padStart(5, '0')}`,
+    hue: (i * 37) % 360,
+  })),
+);
+
+const itemHeight = 44;
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(items, {
+  itemHeight,
+  overscan: 6,
+});
+
+const jumpTo = ref(5000);
+
+function go() {
+  const index = Math.min(Math.max(jumpTo.value || 0, 0), total - 1);
+  scrollTo(index, { behavior: 'smooth', block: 'center' });
+}
+
+const visibleRange = computed(() => {
+  if (list.value.length === 0)
+    return '—';
+  const first = list.value[0]!.index;
+  const last = list.value[list.value.length - 1]!.index;
+  return `${first}–${last}`;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Virtual list</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ total.toLocaleString() }} rows
+      </span>
+    </div>
+
+    <div
+      v-bind="containerProps"
+      class="h-64 rounded-xl border border-(--border) bg-(--bg-elevated)"
+    >
+      <div v-bind="wrapperProps">
+        <div
+          v-for="{ data, index } in list"
+          :key="index"
+          class="flex items-center gap-3 border-b border-(--border) px-3"
+          :style="{ height: `${itemHeight}px` }"
+        >
+          <span
+            class="size-6 shrink-0 rounded-md border border-(--border)"
+            :style="{ backgroundColor: `hsl(${data.hue} 65% 55%)` }"
+          />
+          <span class="flex-1 truncate font-mono text-sm text-(--fg) tabular-nums">{{ data.label }}</span>
+          <span class="text-xs text-(--fg-subtle)">idx {{ index }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
+      <span class="text-(--fg-muted)">rendered</span>
+      <span>{{ list.length }} nodes · idx {{ visibleRange }}</span>
+    </div>
+
+    <div class="flex items-end gap-2">
+      <label class="flex flex-1 flex-col gap-1">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll to index</span>
+        <input
+          v-model.number="jumpTo"
+          type="number"
+          :min="0"
+          :max="total - 1"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="go"
+      >
+        Jump
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/debug/useRenderCount/demo.vue b/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
new file mode 100644
index 0000000..a34343b
--- /dev/null
+++ b/vue/toolkit/src/composables/debug/useRenderCount/demo.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRenderCount } from './index';
+
+// Increments on mount and on every subsequent re-render of this component.
+const renderCount = useRenderCount();
+
+// Reactive state — touching any of these triggers a re-render, bumping the count.
+const message = ref('Edit me to force a re-render');
+const tint = ref(210);
+
+function nudgeTint() {
+  tint.value = (tint.value + 40) % 360;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Render count</span>
+      <span
+        class="font-mono text-3xl font-bold tabular-nums text-(--fg) transition-colors"
+        :style="{ color: `hsl(${tint} 70% 55%)` }"
+      >{{ renderCount }}</span>
+      <span class="text-xs text-(--fg-subtle)">renders since mount</span>
+    </div>
+
+    <label class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Bound input</span>
+      <input
+        v-model="message"
+        type="text"
+        placeholder="Type to re-render…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <p class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg)">
+      {{ message }}
+    </p>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="nudgeTint"
+    >
+      Force re-render (shift color)
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue b/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
new file mode 100644
index 0000000..ff3c78c
--- /dev/null
+++ b/vue/toolkit/src/composables/debug/useRenderInfo/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRenderInfo } from './index';
+
+// `count` and `duration` are reactive refs; `component` and `lastRendered`
+// are captured once at setup (component name/uid and the mount timestamp).
+const { component, count, duration, lastRendered } = useRenderInfo();
+
+// Reactive state — mutating it triggers re-renders that update count + duration.
+const rows = ref(40);
+const grid = computed(() => Array.from({ length: rows.value }, (_, i) => i));
+
+const mountedAt = new Date(lastRendered).toLocaleTimeString();
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Render info</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ component ?? 'anonymous' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">renders</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ duration.toFixed(2) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last render ms</div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
+      <span class="text-(--fg-muted)">mounted at</span>
+      <span>{{ mountedAt }}</span>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="rows">Render workload</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ rows }} cells</span>
+      </div>
+      <input
+        id="rows"
+        v-model.number="rows"
+        type="range"
+        min="1"
+        max="400"
+        step="1"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <p class="text-xs text-(--fg-subtle)">Drag to re-render a larger DOM subtree and watch the render duration climb.</p>
+    </div>
+
+    <div class="grid grid-cols-10 gap-1">
+      <span
+        v-for="i in grid"
+        :key="i"
+        class="aspect-square rounded-sm bg-(--accent-subtle)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue b/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
new file mode 100644
index 0000000..eaa0a87
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/onElementRemoval/demo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { onElementRemoval } from './index';
+
+const watched = useTemplateRef<HTMLDivElement>('watched');
+
+const mounted = ref(true);
+const removals = ref(0);
+const lastEvent = ref<string | null>(null);
+
+// Fires whenever the watched element (or any ancestor containing it) leaves the DOM.
+onElementRemoval(watched, (records) => {
+  removals.value++;
+  lastEvent.value = new Date().toLocaleTimeString();
+  // `records` are the raw MutationRecords describing the removal.
+  void records;
+});
+
+function toggle() {
+  mounted.value = !mounted.value;
+}
+
+function reset() {
+  removals.value = 0;
+  lastEvent.value = null;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">DOM removal watcher</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span class="size-1.5 rounded-full transition" :class="mounted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ mounted ? 'In DOM' : 'Removed' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 min-h-28 flex items-center justify-center">
+      <div
+        v-if="mounted"
+        ref="watched"
+        class="flex w-full flex-col items-center gap-1 rounded-lg border border-(--accent) bg-(--accent-subtle) px-4 py-6 text-center transition"
+      >
+        <span class="text-sm font-medium text-(--accent-text)">Watched element</span>
+        <span class="text-xs text-(--fg-muted)">Remove me and the callback fires</span>
+      </div>
+      <span v-else class="text-sm text-(--fg-subtle)">Element detached from the document</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ removals }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">removals fired</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center flex flex-col justify-center">
+        <div class="font-mono text-sm font-medium tabular-nums text-(--fg)">{{ lastEvent ?? '—' }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last fired</div>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="toggle"
+      >
+        {{ mounted ? 'Remove element' : 'Mount element' }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="removals === 0"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useActiveElement/demo.vue b/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
new file mode 100644
index 0000000..8f136c2
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useActiveElement/demo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useActiveElement } from './index';
+
+const activeElement = useActiveElement();
+
+const fields = [
+  { id: 'name', label: 'Full name', placeholder: 'Ada Lovelace', type: 'text' },
+  { id: 'email', label: 'Email', placeholder: 'ada@analytical.engine', type: 'email' },
+  { id: 'city', label: 'City', placeholder: 'London', type: 'text' },
+];
+
+const activeId = computed(() => activeElement.value?.id || null);
+const activeTag = computed(() => activeElement.value?.tagName.toLowerCase() ?? null);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="space-y-3">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Focus a field
+      </p>
+      <div
+        v-for="field in fields"
+        :key="field.id"
+        class="space-y-1"
+      >
+        <label
+          :for="field.id"
+          class="text-sm font-medium text-(--fg-muted)"
+        >{{ field.label }}</label>
+        <input
+          :id="field.id"
+          :type="field.type"
+          :placeholder="field.placeholder"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      >
+        A focusable button
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">activeElement</span>
+        <span
+          v-if="activeTag"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
+        >
+          &lt;{{ activeTag }}&gt;
+        </span>
+        <span
+          v-else
+          class="text-xs text-(--fg-subtle)"
+        >none</span>
+      </div>
+      <div class="mt-2 flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">id</span>
+        <span class="truncate">{{ activeId ?? '—' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue b/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
new file mode 100644
index 0000000..ebd88f7
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentReadyState/demo.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDocumentReadyState } from './index';
+
+const readyState = useDocumentReadyState();
+
+const stages: { state: DocumentReadyState; label: string; hint: string }[] = [
+  { state: 'loading', label: 'loading', hint: 'Parsing the document' },
+  { state: 'interactive', label: 'interactive', hint: 'DOM ready, assets pending' },
+  { state: 'complete', label: 'complete', hint: 'Everything loaded' },
+];
+
+const activeIndex = computed(() => stages.findIndex(s => s.state === readyState.value));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        document.readyState
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+        <span class="size-1.5 rounded-full bg-emerald-500" />
+        {{ readyState }}
+      </span>
+    </div>
+
+    <ol class="space-y-2">
+      <li
+        v-for="(stage, i) in stages"
+        :key="stage.state"
+        class="flex items-center gap-3 rounded-lg border p-3 transition"
+        :class="i <= activeIndex
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <span
+          class="flex size-6 shrink-0 items-center justify-center rounded-full font-mono text-xs font-bold tabular-nums transition"
+          :class="i < activeIndex
+            ? 'bg-(--accent) text-(--accent-fg)'
+            : i === activeIndex
+              ? 'bg-(--accent) text-(--accent-fg) ring-4 ring-(--ring)'
+              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ i + 1 }}
+        </span>
+        <div class="min-w-0">
+          <p class="font-mono text-sm font-medium text-(--fg)">
+            {{ stage.label }}
+          </p>
+          <p class="text-xs text-(--fg-subtle)">
+            {{ stage.hint }}
+          </p>
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue b/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
new file mode 100644
index 0000000..79fda82
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDocumentVisibility/demo.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDocumentVisibility } from './index';
+
+const switches = ref(0);
+const lastHidden = ref<string | null>(null);
+
+const visibility = useDocumentVisibility({
+  onChange: (state) => {
+    if (state === 'hidden') {
+      switches.value += 1;
+      lastHidden.value = new Date().toLocaleTimeString();
+    }
+  },
+});
+
+const isVisible = computed(() => visibility.value === 'visible');
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3 text-center">
+      <span
+        class="flex size-14 items-center justify-center rounded-full text-2xl transition"
+        :class="isVisible
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        {{ isVisible ? '👁️' : '💤' }}
+      </span>
+      <div>
+        <p class="font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ visibility }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          {{ isVisible ? 'This tab is in the foreground' : 'This tab is hidden' }}
+        </p>
+      </div>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Switch to another tab or minimize the window to watch this update.
+    </p>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ switches }}
+        </p>
+        <p class="mt-0.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Times hidden
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="font-mono text-sm font-medium tabular-nums text-(--fg) truncate">
+          {{ lastHidden ?? '—' }}
+        </p>
+        <p class="mt-0.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Last hidden at
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDraggable/demo.vue b/vue/toolkit/src/composables/elements/useDraggable/demo.vue
new file mode 100644
index 0000000..96c35fb
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDraggable/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useDraggable } from './index';
+
+const container = useTemplateRef<HTMLElement>('container');
+const handle = useTemplateRef<HTMLElement>('handle');
+
+const { x, y, isDragging, style } = useDraggable(
+  useTemplateRef<HTMLElement>('card'),
+  {
+    initialValue: { x: 24, y: 24 },
+    containerElement: container,
+    handle,
+  },
+);
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Draggable, clamped to container
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isDragging
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="isDragging ? 'bg-(--accent)' : 'bg-(--fg-subtle)'"
+        />
+        {{ isDragging ? 'dragging' : 'idle' }}
+      </span>
+    </div>
+
+    <div
+      ref="container"
+      class="relative h-56 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)"
+    >
+      <div
+        ref="card"
+        :style="style"
+        class="absolute w-36 select-none rounded-lg border border-(--border-strong) bg-(--bg-elevated) shadow-lg"
+        :class="isDragging ? 'ring-2 ring-(--ring)' : ''"
+      >
+        <div
+          ref="handle"
+          class="flex items-center gap-1.5 rounded-t-lg border-b border-(--border) bg-(--bg-subtle) px-3 py-2 cursor-grab active:cursor-grabbing"
+        >
+          <span class="text-(--fg-subtle)">⠿</span>
+          <span class="text-xs font-medium text-(--fg-muted)">Drag me</span>
+        </div>
+        <div class="p-3 font-mono text-xs tabular-nums text-(--fg)">
+          <div>x: {{ Math.round(x) }}</div>
+          <div>y: {{ Math.round(y) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Drag from the header. Movement is clamped to the container bounds.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useDropZone/demo.vue b/vue/toolkit/src/composables/elements/useDropZone/demo.vue
new file mode 100644
index 0000000..7961c1a
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useDropZone/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useDropZone } from './index';
+
+const dropZone = useTemplateRef<HTMLElement>('dropZone');
+
+const { isOverDropZone, files, isSupported } = useDropZone(dropZone, {
+  dataTypes: ['image/'],
+  onDrop: (dropped) => {
+    // eslint-disable-next-line no-console
+    console.log('dropped', dropped);
+  },
+});
+
+const fileList = computed(() => files.value ?? []);
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
+    >
+      Drag and Drop is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div
+        ref="dropZone"
+        class="flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition"
+        :class="isOverDropZone
+          ? 'border-(--accent) bg-(--accent-subtle)'
+          : 'border-(--border-strong) bg-(--bg-elevated)'"
+      >
+        <span class="text-3xl transition" :class="isOverDropZone ? 'scale-110' : ''">
+          {{ isOverDropZone ? '📥' : '🖼️' }}
+        </span>
+        <p class="text-sm font-medium text-(--fg)">
+          {{ isOverDropZone ? 'Release to drop' : 'Drop image files here' }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          Only <span class="font-mono">image/*</span> files are accepted
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            Dropped files
+          </span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+            {{ fileList.length }}
+          </span>
+        </div>
+
+        <p
+          v-if="fileList.length === 0"
+          class="mt-3 text-center text-sm text-(--fg-subtle)"
+        >
+          Nothing dropped yet.
+        </p>
+
+        <ul v-else class="mt-3 space-y-1.5">
+          <li
+            v-for="file in fileList"
+            :key="file.name"
+            class="flex items-center justify-between gap-3 rounded-md bg-(--bg-elevated) px-2.5 py-1.5"
+          >
+            <span class="truncate text-sm text-(--fg)">{{ file.name }}</span>
+            <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-subtle)">
+              {{ formatSize(file.size) }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useElementBounding/demo.vue b/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
new file mode 100644
index 0000000..59b4110
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementBounding/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useElementBounding } from './index';
+
+type Timing = 'sync' | 'next-frame';
+
+const timing = ref<Timing>('sync');
+
+const target = ref<HTMLElement>();
+
+// Two independent measurers so toggling the timing mode is visible live.
+const sync = useElementBounding(target, { updateTiming: 'sync' });
+const nextFrame = useElementBounding(target, { updateTiming: 'next-frame' });
+
+const bounds = computed(() => (timing.value === 'sync' ? sync : nextFrame));
+
+// Resizable, draggable-ish target driven by sliders so every field updates live.
+const size = ref(56);
+
+const metrics = computed(() => [
+  { label: 'width', value: bounds.value.width.value },
+  { label: 'height', value: bounds.value.height.value },
+  { label: 'top', value: bounds.value.top.value },
+  { label: 'left', value: bounds.value.left.value },
+  { label: 'right', value: bounds.value.right.value },
+  { label: 'bottom', value: bounds.value.bottom.value },
+  { label: 'x', value: bounds.value.x.value },
+  { label: 'y', value: bounds.value.y.value },
+]);
+
+function fmt(n: number) {
+  return Math.round(n);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">getBoundingClientRect</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ timing }}
+        </span>
+      </div>
+
+      <!-- The measured target. Resizing it mutates the reactive bounds. -->
+      <div class="relative h-40 overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset)">
+        <div
+          ref="target"
+          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 grid place-items-center rounded-lg bg-(--accent) text-(--accent-fg) shadow transition-[width,height] duration-150"
+          :style="{ width: `${size}px`, height: `${size}px` }"
+        >
+          <span class="font-mono text-xs font-semibold tabular-nums">{{ fmt(bounds.width.value) }}×{{ fmt(bounds.height.value) }}</span>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-4 gap-2">
+        <div
+          v-for="m in metrics"
+          :key="m.label"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center"
+        >
+          <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fmt(m.value) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ m.label }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="bound-size">Size</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ size }}px</span>
+      </div>
+      <input
+        id="bound-size"
+        v-model.number="size"
+        type="range"
+        min="32"
+        max="140"
+        step="2"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        v-for="opt in (['sync', 'next-frame'] as Timing[])"
+        :key="opt"
+        type="button"
+        class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="timing === opt
+          ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+        @click="timing = opt"
+      >
+        {{ opt }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="bounds.update()"
+      >
+        Update
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      <span class="font-mono">next-frame</span> batches rapid scroll/resize reads into one measurement per animation frame.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useElementSize/demo.vue b/vue/toolkit/src/composables/elements/useElementSize/demo.vue
new file mode 100644
index 0000000..474cb27
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementSize/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useElementSize } from './index';
+
+const target = ref<HTMLElement>();
+
+// content-box vs border-box is the headline option, so observe it directly.
+const { width, height, stop } = useElementSize(target, { width: 0, height: 0 }, { box: 'border-box' });
+
+const padding = ref(16);
+const observing = ref(true);
+
+function toggleObserver() {
+  if (observing.value) {
+    stop();
+    observing.value = false;
+  }
+  // Re-observing requires a fresh composable instance; keep the demo honest by
+  // only offering "stop" once and noting it below.
+}
+
+function fmt(n: number) {
+  return n.toFixed(0);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ResizeObserver</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="size-1.5 rounded-full" :class="observing ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ observing ? 'Observing' : 'Stopped' }}
+        </span>
+      </div>
+
+      <!-- Native textarea resize handle makes the element user-resizable. -->
+      <textarea
+        ref="target"
+        readonly
+        :style="{ padding: `${padding}px` }"
+        class="w-full min-h-24 resize rounded-lg border border-(--border-strong) bg-(--bg-inset) text-sm leading-relaxed text-(--fg-muted) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >Drag the bottom-right corner to resize me. The width and height update live as the ResizeObserver fires. Border-box sizing includes the padding below.</textarea>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ fmt(width) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">width px</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ fmt(height) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">height px</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="size-padding">Padding (border-box)</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ padding }}px</span>
+      </div>
+      <input
+        id="size-padding"
+        v-model.number="padding"
+        type="range"
+        min="0"
+        max="40"
+        step="2"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      :disabled="!observing"
+      @click="toggleObserver"
+    >
+      {{ observing ? 'Stop observing' : 'Observer stopped' }}
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      With <span class="font-mono">box: 'border-box'</span> the reported size includes padding, so the slider changes the numbers without resizing the element.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue b/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
new file mode 100644
index 0000000..f13ae2e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useElementVisibility/demo.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useElementVisibility } from './index';
+
+const root = ref<HTMLElement>();
+const target = ref<HTMLElement>();
+
+// controls: true returns { isVisible, isSupported, isActive, pause, resume, stop }.
+const { isVisible, isActive, pause, resume } = useElementVisibility(target, {
+  controls: true,
+  root,
+  threshold: 0.5,
+});
+
+const seenCount = ref(0);
+
+// Count each time the card crosses into view (rising edge only).
+watch(isVisible, (visible, was) => {
+  if (visible && !was)
+    seenCount.value++;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">IntersectionObserver</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isVisible
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="isVisible ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isVisible ? 'In view' : 'Hidden' }}
+      </span>
+    </div>
+
+    <!-- Scrollable root; the target card sits below the fold until scrolled. -->
+    <div
+      ref="root"
+      class="h-44 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-inset) p-3"
+    >
+      <p class="text-sm text-(--fg-subtle)">Scroll down inside this box…</p>
+      <div class="h-40" />
+      <div
+        ref="target"
+        class="rounded-lg border border-(--border) bg-(--accent) p-4 text-center text-(--accent-fg) shadow transition"
+        :class="isVisible ? 'opacity-100 scale-100' : 'opacity-60 scale-95'"
+      >
+        <div class="text-sm font-semibold">Target element</div>
+        <div class="text-xs opacity-80">at least 50% visible to count</div>
+      </div>
+      <div class="h-24" />
+      <p class="text-sm text-(--fg-subtle)">…and back up to hide it again.</p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ seenCount }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">times seen</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center flex flex-col items-center justify-center">
+        <div class="text-sm font-semibold" :class="isActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'">
+          {{ isActive ? 'Active' : 'Paused' }}
+        </div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">observer</div>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="isActive ? pause() : resume()"
+    >
+      {{ isActive ? 'Pause observer' : 'Resume observer' }}
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue b/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
new file mode 100644
index 0000000..c27546e
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useFocusGuard/demo.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { defineComponent, h, ref } from 'vue';
+import { useFocusGuard } from './index';
+
+// useFocusGuard() returns void: on mount it inserts a pair of invisible,
+// focusable sentinel elements at the boundaries of the DOM tree. They keep
+// focus order consistent (e.g. for modal/overlay focus management) and are
+// removed when the last consumer unmounts.
+
+// Mount the guard through a child so we can toggle it on/off in the demo.
+const GuardHost = defineComponent({
+  name: 'GuardHost',
+  setup() {
+    useFocusGuard('demo-guard');
+    return () => h('span', { class: 'sr-only' }, 'focus guards mounted');
+  },
+});
+
+const enabled = ref(false);
+const focused = ref<string | null>(null);
+
+const fields = [
+  { id: 'name', label: 'Name', value: 'Ada Lovelace' },
+  { id: 'email', label: 'Email', value: 'ada@analytical.engine' },
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <component :is="GuardHost" v-if="enabled" />
+
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Focus guards</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="enabled
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="enabled ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ enabled ? 'Mounted' : 'Off' }}
+      </span>
+    </div>
+
+    <!-- A small focusable form to feel tab order with the guards active. -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div v-for="f in fields" :key="f.id" class="flex flex-col gap-1">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" :for="f.id">{{ f.label }}</label>
+        <input
+          :id="f.id"
+          :value="f.value"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          @focus="focused = f.label"
+          @blur="focused = null"
+        >
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @focus="focused = 'Submit'"
+        @blur="focused = null"
+      >
+        Submit
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      focused: {{ focused ?? 'nothing' }}
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="enabled = !enabled"
+    >
+      {{ enabled ? 'Remove focus guards' : 'Mount focus guards' }}
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Guards are invisible <span class="font-mono">tabindex="0"</span> sentinels inserted at the page boundaries. Tab past the last field with them on to feel focus wrap around for overlays and modals.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue b/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
new file mode 100644
index 0000000..87925ca
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useIntersectionObserver/demo.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useIntersectionObserver } from './index';
+
+const sections = [
+  { id: 'intro', label: 'Introduction', color: 'bg-sky-500' },
+  { id: 'install', label: 'Installation', color: 'bg-emerald-500' },
+  { id: 'usage', label: 'Usage', color: 'bg-violet-500' },
+  { id: 'api', label: 'API Reference', color: 'bg-amber-500' },
+];
+
+const root = ref<HTMLElement>();
+const itemEls = ref<HTMLElement[]>([]);
+
+// Reactive threshold + rootMargin demonstrate live re-observation.
+const threshold = ref(0.5);
+
+// Track which section is currently the most-visible "active" one (scroll-spy).
+const ratios = ref<Record<string, number>>({});
+
+useIntersectionObserver(
+  itemEls,
+  (entries) => {
+    for (const entry of entries) {
+      const id = (entry.target as HTMLElement).dataset.id;
+      if (id)
+        ratios.value = { ...ratios.value, [id]: entry.intersectionRatio };
+    }
+  },
+  {
+    root,
+    threshold: () => [0, 0.25, 0.5, 0.75, 1],
+  },
+);
+
+const activeId = computed(() => {
+  let best: string | null = null;
+  let bestRatio = threshold.value;
+  for (const s of sections) {
+    const r = ratios.value[s.id] ?? 0;
+    if (r >= bestRatio) {
+      bestRatio = r;
+      best = s.id;
+    }
+  }
+  return best;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll spy</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        active: {{ activeId ?? '—' }}
+      </span>
+    </div>
+
+    <div class="flex gap-3">
+      <!-- Nav reflects which section dominates the viewport. -->
+      <nav class="flex w-32 shrink-0 flex-col gap-1">
+        <span
+          v-for="s in sections"
+          :key="s.id"
+          class="flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition"
+          :class="activeId === s.id
+            ? 'border-(--border-strong) bg-(--bg-inset) text-(--fg)'
+            : 'border-transparent text-(--fg-muted)'"
+        >
+          <span class="size-2 rounded-full transition" :class="[s.color, activeId === s.id ? 'opacity-100' : 'opacity-30']" />
+          {{ s.label }}
+        </span>
+      </nav>
+
+      <!-- Scrollable content; each section is an observed target. -->
+      <div
+        ref="root"
+        class="h-56 flex-1 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-3 scroll-smooth"
+      >
+        <section
+          v-for="s in sections"
+          :key="s.id"
+          ref="itemEls"
+          :data-id="s.id"
+          class="rounded-lg border border-(--border) bg-(--bg-elevated) p-4 transition"
+          :class="activeId === s.id ? 'ring-2 ring-(--ring)' : ''"
+        >
+          <h3 class="text-sm font-semibold text-(--fg)">{{ s.label }}</h3>
+          <p class="mt-1 text-xs text-(--fg-subtle)">
+            Visibility: {{ Math.round((ratios[s.id] ?? 0) * 100) }}%
+          </p>
+          <div class="mt-2 h-16 rounded bg-(--bg-inset)" />
+        </section>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="io-threshold">Active threshold</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ Math.round(threshold * 100) }}%</span>
+      </div>
+      <input
+        id="io-threshold"
+        v-model.number="threshold"
+        type="range"
+        min="0.1"
+        max="0.9"
+        step="0.1"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <p class="text-xs text-(--fg-subtle)">A section becomes active once at least this much of it is visible inside the scroll root.</p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue b/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
new file mode 100644
index 0000000..460d995
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useMutationObserver/demo.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref, shallowRef, useTemplateRef } from 'vue';
+import { useMutationObserver } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+
+// Mutable state that drives the observed element so changes are visible.
+const labels = ref(['Inbox', 'Drafts', 'Archive']);
+const accent = ref(false);
+const fontSize = ref(14);
+
+const mutationCount = shallowRef(0);
+const lastType = shallowRef<MutationRecordType | '—'>('—');
+const log = ref<string[]>([]);
+
+const { isSupported, isActive, pause, resume } = useMutationObserver(
+  target,
+  (records) => {
+    for (const record of records) {
+      mutationCount.value++;
+      lastType.value = record.type;
+
+      let detail = record.type as string;
+      if (record.type === 'attributes')
+        detail = `attribute "${record.attributeName}"`;
+      else if (record.type === 'childList')
+        detail = `children +${record.addedNodes.length} −${record.removedNodes.length}`;
+
+      log.value.unshift(detail);
+      if (log.value.length > 5)
+        log.value.pop();
+    }
+  },
+  { attributes: true, childList: true, subtree: true, attributeFilter: ['style', 'class'] },
+);
+
+function addLabel() {
+  const pool = ['Spam', 'Sent', 'Starred', 'Trash', 'Snoozed', 'Important'];
+  labels.value.push(pool[labels.value.length % pool.length]);
+}
+
+function removeLabel() {
+  labels.value.pop();
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">MutationObserver</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ isActive ? 'Observing' : 'Paused' }}
+      </span>
+    </div>
+
+    <p v-if="!isSupported" class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400">
+      MutationObserver is not supported in this browser.
+    </p>
+
+    <template v-else>
+      <!-- Observed subtree: every attribute/child change fires the callback -->
+      <div
+        ref="target"
+        class="rounded-xl border p-4 transition"
+        :class="accent ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+        :style="{ fontSize: `${fontSize}px` }"
+      >
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="accent ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          Observed element
+        </div>
+        <div class="flex flex-wrap gap-1.5">
+          <span
+            v-for="(label, i) in labels"
+            :key="`${label}-${i}`"
+            class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            {{ label }}
+          </span>
+          <span v-if="!labels.length" class="text-xs text-(--fg-subtle)">No labels</span>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ mutationCount }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">mutations</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+          <div class="truncate font-mono text-sm font-bold text-(--fg)">{{ lastType }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last record type</div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="addLabel"
+        >
+          Add child
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!labels.length"
+          @click="removeLabel"
+        >
+          Remove child
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="accent = !accent"
+        >
+          Toggle class
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="fontSize = fontSize === 14 ? 18 : 14"
+        >
+          Toggle style
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="mb-1.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent records</div>
+        <ul v-if="log.length" class="flex flex-col gap-1 font-mono text-xs text-(--fg)">
+          <li v-for="(entry, i) in log" :key="i" class="truncate">{{ entry }}</li>
+        </ul>
+        <p v-else class="font-mono text-xs text-(--fg-subtle)">Mutate the element above to record changes.</p>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="isActive ? pause() : resume()"
+      >
+        {{ isActive ? 'Pause observer' : 'Resume observer' }}
+      </button>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useParentElement/demo.vue b/vue/toolkit/src/composables/elements/useParentElement/demo.vue
new file mode 100644
index 0000000..05ca7e6
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useParentElement/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { useParentElement } from './index';
+
+const child = useTemplateRef<HTMLElement>('child');
+
+// useParentElement returns a read-only shallow ref of the element's parent.
+const parent = useParentElement(child);
+
+// Reparent the child between two wrappers to watch the resolved parent change.
+const inSecond = ref(false);
+
+const parentInfo = computed(() => {
+  const el = parent.value;
+  if (!el)
+    return null;
+
+  return {
+    tag: el.tagName.toLowerCase(),
+    id: el.id || '—',
+    classes: el.className || '—',
+    width: Math.round(el.getBoundingClientRect().width),
+    height: Math.round(el.getBoundingClientRect().height),
+  };
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">parentElement</span>
+
+    <!-- Two candidate parents; the child is teleported between them via v-if -->
+    <div class="flex flex-col gap-3">
+      <div
+        id="wrapper-a"
+        class="rounded-xl border border-dashed p-3 transition"
+        :class="!inSecond ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="!inSecond ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          #wrapper-a
+        </div>
+        <div
+          v-if="!inSecond"
+          ref="child"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg)"
+        >
+          Tracked child
+        </div>
+        <div v-else class="text-xs text-(--fg-subtle)">empty</div>
+      </div>
+
+      <div
+        id="wrapper-b"
+        class="rounded-xl border border-dashed p-3 transition"
+        :class="inSecond ? 'border-(--accent) bg-(--accent-subtle)' : 'border-(--border) bg-(--bg-elevated)'"
+      >
+        <div class="mb-2 text-xs font-medium uppercase tracking-wide" :class="inSecond ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+          #wrapper-b
+        </div>
+        <div
+          v-if="inSecond"
+          ref="child"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg)"
+        >
+          Tracked child
+        </div>
+        <div v-else class="text-xs text-(--fg-subtle)">empty</div>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="inSecond = !inSecond"
+    >
+      Move child to #wrapper-{{ inSecond ? 'a' : 'b' }}
+    </button>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="mb-2 font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Resolved parent</div>
+      <template v-if="parentInfo">
+        <div class="flex justify-between gap-2">
+          <span class="text-(--fg-subtle)">tag</span>
+          <span class="text-(--accent-text)">&lt;{{ parentInfo.tag }}&gt;</span>
+        </div>
+        <div class="flex justify-between gap-2">
+          <span class="text-(--fg-subtle)">id</span>
+          <span class="truncate">{{ parentInfo.id }}</span>
+        </div>
+        <div class="flex justify-between gap-2">
+          <span class="text-(--fg-subtle)">size</span>
+          <span>{{ parentInfo.width }} × {{ parentInfo.height }}</span>
+        </div>
+      </template>
+      <div v-else class="font-sans text-xs text-(--fg-subtle)">Resolving parent on the client…</div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue b/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
new file mode 100644
index 0000000..025dabd
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useResizeObserver/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { reactive, shallowRef, useTemplateRef } from 'vue';
+import { useResizeObserver } from './index';
+
+const target = useTemplateRef<HTMLElement>('target');
+
+const size = reactive({ width: 0, height: 0 });
+const callbacks = shallowRef(0);
+
+const { isSupported, isActive, pause, resume } = useResizeObserver(
+  target,
+  ([entry]) => {
+    if (!entry)
+      return;
+
+    const { width, height } = entry.contentRect;
+    size.width = Math.round(width);
+    size.height = Math.round(height);
+    callbacks.value++;
+  },
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">ResizeObserver</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ isActive ? 'Observing' : 'Paused' }}
+      </span>
+    </div>
+
+    <p v-if="!isSupported" class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400">
+      ResizeObserver is not supported in this browser.
+    </p>
+
+    <template v-else>
+      <!-- Drag the bottom-right handle to resize; the observer reports new dimensions -->
+      <div
+        ref="target"
+        class="relative grid min-h-32 min-w-40 max-w-full resize overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-4 place-items-center"
+        style="width: 16rem; height: 8rem;"
+      >
+        <div class="pointer-events-none select-none text-center">
+          <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+            {{ size.width }}<span class="text-(--fg-subtle)"> × </span>{{ size.height }}
+          </div>
+          <div class="mt-1 text-xs text-(--fg-subtle)">drag the bottom-right corner</div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ size.width }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">width px</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ size.height }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">height px</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ callbacks }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">callbacks</div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="isActive ? pause() : resume()"
+      >
+        {{ isActive ? 'Pause observer' : 'Resume observer' }}
+      </button>
+      <p class="text-xs text-(--fg-subtle)">
+        While paused, resizing won't update the readout until you resume.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue b/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
new file mode 100644
index 0000000..8424b7f
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowFocus/demo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useWindowFocus } from './index';
+
+// useWindowFocus returns a single ShallowRef<boolean> — bind it directly.
+const focused = useWindowFocus();
+
+const blurCount = ref(0);
+
+watch(focused, (isFocused) => {
+  if (!isFocused)
+    blurCount.value++;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Window focus</span>
+
+    <div
+      class="rounded-xl border p-6 text-center transition"
+      :class="focused
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-(--border) bg-(--bg-inset)'"
+    >
+      <div
+        class="mx-auto flex size-14 items-center justify-center rounded-full transition"
+        :class="focused
+          ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+          : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+      >
+        <span class="size-3 rounded-full transition" :class="focused ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'" />
+      </div>
+      <div class="mt-3 text-lg font-semibold text-(--fg)">
+        {{ focused ? 'Window focused' : 'Window blurred' }}
+      </div>
+      <p class="mt-1 text-sm text-(--fg-muted)">
+        {{ focused ? 'Click outside or switch apps to blur.' : 'Click back into this window to refocus.' }}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ focused ? 'on' : 'off' }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">focused</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ blurCount }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">times blurred</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue b/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
new file mode 100644
index 0000000..7f022dd
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowScroll/demo.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useWindowScroll } from './index';
+
+const { x, y, isScrolling, arrivedState, directions, measure } = useWindowScroll({
+  behavior: 'smooth',
+});
+
+const verticalDirection = computed(() => {
+  if (directions.bottom)
+    return 'down';
+  if (directions.top)
+    return 'up';
+  return 'idle';
+});
+
+function scrollToTop() {
+  y.value = 0;
+}
+
+function scrollToBottom() {
+  // Writing past the max is clamped by the browser, taking us to the bottom.
+  y.value = 1_000_000;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Window scroll</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        <span class="size-1.5 rounded-full transition" :class="isScrolling ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'" />
+        {{ isScrolling ? 'Scrolling' : 'Idle' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ Math.round(x) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">scroll x</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <div class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ Math.round(y) }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">scroll y</div>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Direction</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ verticalDirection }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between text-sm">
+          <span class="text-(--fg-muted)">Arrived at top</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+            :class="arrivedState.top
+              ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+          >
+            {{ arrivedState.top ? 'yes' : 'no' }}
+          </span>
+        </div>
+        <div class="flex items-center justify-between text-sm">
+          <span class="text-(--fg-muted)">Arrived at bottom</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+            :class="arrivedState.bottom
+              ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'bg-(--bg-inset) text-(--fg-subtle)'"
+          >
+            {{ arrivedState.bottom ? 'yes' : 'no' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.top"
+        @click="scrollToTop"
+      >
+        Scroll to top
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.bottom"
+        @click="scrollToBottom"
+      >
+        Scroll to bottom
+      </button>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="measure"
+    >
+      Re-measure
+    </button>
+    <p class="text-xs text-(--fg-subtle)">
+      Scroll the documentation page to watch the position and arrived edges update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/elements/useWindowSize/demo.vue b/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
new file mode 100644
index 0000000..47574ec
--- /dev/null
+++ b/vue/toolkit/src/composables/elements/useWindowSize/demo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useWindowSize } from './index';
+
+const { width, height } = useWindowSize();
+
+const orientation = computed(() => (width.value >= height.value ? 'landscape' : 'portrait'));
+const aspect = computed(() => (height.value === 0 ? '–' : (width.value / height.value).toFixed(2)));
+const ratioPercent = computed(() => {
+  const total = width.value + height.value;
+  return total === 0 ? 50 : Math.round((width.value / total) * 100);
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Width
+        </p>
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ width }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          px
+        </p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Height
+        </p>
+        <p class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ height }}
+        </p>
+        <p class="text-xs text-(--fg-subtle)">
+          px
+        </p>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div
+        class="relative flex items-center justify-center overflow-hidden rounded-lg border border-(--border-strong) bg-(--bg-inset) transition-all"
+        :style="{ aspectRatio: `${Math.max(width, 1)} / ${Math.max(height, 1)}` }"
+      >
+        <div
+          class="absolute inset-y-0 left-0 bg-(--accent-subtle) transition-all"
+          :style="{ width: `${ratioPercent}%` }"
+        />
+        <span class="relative font-mono text-xs text-(--fg-muted) tabular-nums">
+          {{ width }} × {{ height }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-center gap-2">
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ orientation }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        ratio {{ aspect }}
+      </span>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Resize your browser window to watch the values update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useField/demo.vue b/vue/toolkit/src/composables/forms/useField/demo.vue
new file mode 100644
index 0000000..7b8c44c
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useField/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useField } from './index';
+
+// Standalone mode: no useForm() ancestor, so the field owns its own value,
+// errors, touched state, and validation.
+const {
+  value,
+  errorMessage,
+  meta,
+  attrs,
+  validate,
+  reset,
+} = useField<string>('email', {
+  initialValue: 'ada@example',
+  validateOn: 'value',
+  validate: (input) => {
+    if (!input)
+      return 'Email is required';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input))
+      return 'Enter a valid email address';
+    return true;
+  },
+});
+
+const inputClass = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label
+        class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)"
+        :for="attrs.name"
+      >
+        Email address
+      </label>
+      <input
+        :id="attrs.name"
+        v-model="value"
+        v-bind="attrs"
+        type="email"
+        placeholder="you@example.com"
+        :class="[
+          inputClass,
+          meta.touched.value && errorMessage
+            ? 'border-red-500/60 focus:border-red-500'
+            : 'border-(--border) focus:border-(--accent)',
+        ]"
+      >
+      <p
+        v-if="meta.touched.value && errorMessage"
+        class="text-xs text-red-600 dark:text-red-400"
+      >
+        {{ errorMessage }}
+      </p>
+      <p
+        v-else
+        class="text-xs text-(--fg-subtle)"
+      >
+        Validates on every keystroke.
+      </p>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="meta.valid.value
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        {{ meta.valid.value ? 'valid' : 'invalid' }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        dirty: {{ meta.dirty.value }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        touched: {{ meta.touched.value }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="validate()"
+      >
+        Validate
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset()"
+      >
+        Reset
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      value: "{{ value }}"
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useFieldArray/demo.vue b/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
new file mode 100644
index 0000000..2b84ecf
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFieldArray/demo.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useForm } from '../useForm';
+import { useFieldArray } from './index';
+
+interface Task {
+  title: string;
+  done: boolean;
+}
+
+// useFieldArray needs a form. We pass it explicitly via the `form` option so
+// the demo works as a single self-contained component.
+const form = useForm<{ tasks: Task[] }>({
+  initialValues: {
+    tasks: [
+      { title: 'Sketch wireframes', done: true },
+      { title: 'Wire up the API', done: false },
+      { title: 'Write release notes', done: false },
+    ],
+  },
+});
+
+const { fields, push, remove, move, swap } = useFieldArray<Task>('tasks', { form });
+
+function addTask(): void {
+  push({ title: '', done: false });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tasks ({{ fields.length }})
+      </p>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="addTask"
+      >
+        + Add task
+      </button>
+    </div>
+
+    <TransitionGroup
+      tag="ul"
+      class="flex flex-col gap-2"
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      leave-active-class="transition duration-150 ease-in absolute"
+      leave-to-class="opacity-0 translate-x-2"
+    >
+      <li
+        v-for="(field, index) in fields"
+        :key="field.key"
+        class="flex items-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+      >
+        <input
+          v-model="field.value.value.done"
+          type="checkbox"
+          class="size-4 shrink-0 cursor-pointer accent-(--accent)"
+          aria-label="Mark done"
+        >
+        <input
+          v-model="field.value.value.title"
+          type="text"
+          placeholder="Describe the task…"
+          class="min-w-0 flex-1 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          :class="field.value.value.done ? 'line-through text-(--fg-subtle)' : ''"
+        >
+        <div class="flex shrink-0 items-center gap-1">
+          <button
+            type="button"
+            :disabled="field.isFirst"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            aria-label="Move up"
+            @click="move(index, index - 1)"
+          >
+            ↑
+          </button>
+          <button
+            type="button"
+            :disabled="field.isLast"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.95] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            aria-label="Move down"
+            @click="move(index, index + 1)"
+          >
+            ↓
+          </button>
+          <button
+            type="button"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-red-500/30 bg-red-500/10 text-red-600 transition hover:bg-red-500/20 active:scale-[0.95] cursor-pointer dark:text-red-400"
+            aria-label="Remove"
+            @click="remove(index)"
+          >
+            ×
+          </button>
+        </div>
+      </li>
+    </TransitionGroup>
+
+    <div
+      v-if="fields.length === 0"
+      class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)"
+    >
+      No tasks yet. Add one to get started.
+    </div>
+
+    <div class="flex items-center justify-between border-t border-(--border) pt-3">
+      <span class="text-xs text-(--fg-subtle)">
+        Stable keys survive reorders
+      </span>
+      <button
+        type="button"
+        :disabled="fields.length < 2"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="swap(0, fields.length - 1)"
+      >
+        Swap first ↔ last
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useForm/demo.vue b/vue/toolkit/src/composables/forms/useForm/demo.vue
new file mode 100644
index 0000000..2628ae1
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useForm/demo.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useForm } from './index';
+import type { FormErrors } from './index';
+
+interface SignUp {
+  name: string;
+  email: string;
+  age: number;
+}
+
+const submitted = ref<SignUp | null>(null);
+
+const {
+  errors,
+  meta,
+  isSubmitting,
+  submitCount,
+  defineField,
+  handleSubmit,
+  resetForm,
+} = useForm<SignUp>({
+  initialValues: { name: '', email: '', age: 18 },
+  validateOn: 'blur',
+  revalidateOn: 'value',
+  // A custom resolver — no external schema library needed.
+  resolver: (values) => {
+    const errs: FormErrors = {};
+    if (!values.name.trim())
+      errs.name = ['Name is required'];
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email))
+      errs.email = ['Enter a valid email'];
+    if (values.age < 18)
+      errs.age = ['Must be 18 or older'];
+    return { errors: errs, values };
+  },
+});
+
+const [name, nameProps] = defineField('name');
+const [email, emailProps] = defineField('email');
+const [age, ageProps] = defineField('age');
+
+const onSubmit = handleSubmit(async (values) => {
+  await new Promise(resolve => setTimeout(resolve, 600));
+  submitted.value = { ...values };
+});
+
+const baseInput = 'w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)';
+
+function cls(path: keyof SignUp): string {
+  return errors[path]?.length
+    ? `${baseInput} border-red-500/60 focus:border-red-500`
+    : `${baseInput} border-(--border) focus:border-(--accent)`;
+}
+</script>
+
+<template>
+  <form
+    class="flex w-full max-w-sm flex-col gap-4"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <div class="flex flex-col gap-1.5">
+      <label for="uf-name" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Name</label>
+      <input
+        id="uf-name"
+        v-model="name"
+        v-bind="nameProps"
+        :class="cls('name')"
+        placeholder="Ada Lovelace"
+      >
+      <p v-if="errors.name?.length" class="text-xs text-red-600 dark:text-red-400">
+        {{ errors.name[0] }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label for="uf-email" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</label>
+      <input
+        id="uf-email"
+        v-model="email"
+        v-bind="emailProps"
+        type="email"
+        :class="cls('email')"
+        placeholder="ada@example.com"
+      >
+      <p v-if="errors.email?.length" class="text-xs text-red-600 dark:text-red-400">
+        {{ errors.email[0] }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <label for="uf-age" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Age</label>
+      <input
+        id="uf-age"
+        v-model.number="age"
+        v-bind="ageProps"
+        type="number"
+        :class="cls('age')"
+      >
+      <p v-if="errors.age?.length" class="text-xs text-red-600 dark:text-red-400">
+        {{ errors.age[0] }}
+      </p>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="meta.valid
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ meta.valid ? 'valid' : 'invalid' }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        dirty: {{ meta.dirty }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        submits: {{ submitCount }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="submit"
+        :disabled="isSubmitting"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      >
+        {{ isSubmitting ? 'Submitting…' : 'Create account' }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="resetForm(); submitted = null"
+      >
+        Reset
+      </button>
+    </div>
+
+    <div
+      v-if="submitted"
+      class="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3 font-mono text-xs text-emerald-700 dark:text-emerald-300"
+    >
+      <p class="mb-1 font-semibold not-italic">
+        Submitted
+      </p>
+      <pre class="whitespace-pre-wrap">{{ JSON.stringify(submitted, null, 2) }}</pre>
+    </div>
+    <p v-else class="text-center text-xs text-(--fg-subtle)">
+      Validates on blur, then live on every change.
+    </p>
+  </form>
+</template>
diff --git a/vue/toolkit/src/composables/forms/useFormContext/demo.vue b/vue/toolkit/src/composables/forms/useFormContext/demo.vue
new file mode 100644
index 0000000..578a743
--- /dev/null
+++ b/vue/toolkit/src/composables/forms/useFormContext/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { defineComponent, h } from 'vue';
+import { useForm } from '../useForm';
+import { useFormContext } from './index';
+
+interface Profile {
+  username: string;
+  bio: string;
+}
+
+// A descendant "field" component that reaches the form purely through context —
+// it receives no props and is never told which form it belongs to.
+const ContextField = defineComponent({
+  props: {
+    path: { type: String, required: true },
+    label: { type: String, required: true },
+    multiline: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const form = useFormContext<Profile>();
+
+    // Graceful standalone behaviour when no form ancestor is present.
+    if (!form) {
+      return () =>
+        h('p', { class: 'text-xs text-amber-600 dark:text-amber-400' }, 'No form context found.');
+    }
+
+    const tag = props.multiline ? 'textarea' : 'input';
+    const inputClass
+      = 'w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)';
+
+    return () =>
+      h('div', { class: 'flex flex-col gap-1.5' }, [
+        h(
+          'label',
+          { class: 'text-xs font-medium uppercase tracking-wide text-(--fg-subtle)' },
+          props.label,
+        ),
+        h(tag, {
+          'class': inputClass,
+          'rows': props.multiline ? 2 : undefined,
+          'value': form.getFieldValue(props.path as keyof Profile),
+          'aria-invalid': form.getErrors(props.path as keyof Profile).length > 0 || undefined,
+          'onInput': (event: Event) =>
+            form.setFieldValue(
+              props.path as keyof Profile,
+              (event.target as HTMLInputElement).value,
+              { shouldTouch: true },
+            ),
+        }),
+      ]);
+  },
+});
+
+const form = useForm<Profile>({
+  initialValues: { username: 'grace', bio: 'Compiler pioneer.' },
+});
+const { values, meta, isDirty } = form;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Profile (fields read context, not props)
+      </p>
+      <ContextField path="username" label="Username" />
+      <ContextField path="bio" label="Bio" multiline />
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        dirty: {{ isDirty }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        touched: {{ meta.touched }}
+      </span>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">
+      <p class="mb-1 text-(--fg-subtle)">
+        Shared form values:
+      </p>
+      <pre class="whitespace-pre-wrap">{{ JSON.stringify(values, null, 2) }}</pre>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Both inputs are nested children that locate the form via useFormContext().
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
new file mode 100644
index 0000000..a82fca7
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/tryOnBeforeMount/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { tryOnBeforeMount } from './index';
+
+interface LogEntry {
+  id: number;
+  label: string;
+  phase: 'before-mount' | 'setup';
+}
+
+let seq = 0;
+const log = ref<LogEntry[]>([]);
+const order = ref<string[]>([]);
+
+function push(label: string, phase: LogEntry['phase']) {
+  log.value.push({ id: ++seq, label, phase });
+  order.value.push(label);
+}
+
+// A marker we drop synchronously in setup so the relative ordering is visible.
+push('setup body ran', 'setup');
+
+// Synchronous hook: registers via onBeforeMount because we are inside a component.
+tryOnBeforeMount(() => push('sync callback (onBeforeMount)', 'before-mount'));
+
+// Async hook: deferred to the next tick.
+tryOnBeforeMount(() => push('async callback (nextTick)', 'before-mount'), { sync: false });
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnBeforeMount</span>
+      <p class="text-sm text-(--fg-muted)">
+        Registers a callback on <code class="font-mono text-(--fg)">onBeforeMount</code> when inside a component,
+        otherwise calls it directly. Watch the execution order below.
+      </p>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Execution timeline</span>
+
+      <ol class="mt-3 flex flex-col gap-2">
+        <li
+          v-for="(entry, index) in log"
+          :key="entry.id"
+          class="flex items-center gap-3"
+        >
+          <span
+            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-inset) font-mono text-xs font-medium text-(--fg-muted) tabular-nums"
+          >
+            {{ index + 1 }}
+          </span>
+          <span class="text-sm text-(--fg)">{{ entry.label }}</span>
+          <span
+            class="ml-auto inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+            :class="entry.phase === 'before-mount'
+              ? 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+          >
+            {{ entry.phase }}
+          </span>
+        </li>
+      </ol>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <span class="text-(--fg-subtle)">order:</span> [{{ order.join(' → ') }}]
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The sync callback fires during the component's before-mount phase; the async one is queued to the next tick,
+      so it always lands last.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
new file mode 100644
index 0000000..ba787d6
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/tryOnMounted/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { tryOnMounted } from './index';
+
+interface LogEntry {
+  id: number;
+  label: string;
+  at: number;
+}
+
+let seq = 0;
+const start = Date.now();
+const log = ref<LogEntry[]>([]);
+const mounted = ref(false);
+
+function push(label: string) {
+  log.value.push({ id: ++seq, label, at: Date.now() - start });
+}
+
+// Marker dropped synchronously while setup runs — before the DOM exists.
+push('setup body executed');
+
+// Sync callback: registered through onMounted because we're inside a component.
+tryOnMounted(() => {
+  mounted.value = true;
+  push('sync callback (onMounted)');
+});
+
+// Async callback: deferred to the next tick, runs after the sync one.
+tryOnMounted(() => push('async callback (nextTick)'), { sync: false });
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnMounted</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="mounted
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="mounted ? 'bg-emerald-500' : 'bg-amber-500'"
+        />
+        {{ mounted ? 'mounted' : 'pending' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Mount timeline</span>
+
+      <ol class="mt-3 flex flex-col gap-2">
+        <li
+          v-for="(entry, index) in log"
+          :key="entry.id"
+          class="flex items-center gap-3"
+        >
+          <span
+            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-inset) font-mono text-xs font-medium text-(--fg-muted) tabular-nums"
+          >
+            {{ index + 1 }}
+          </span>
+          <span class="text-sm text-(--fg)">{{ entry.label }}</span>
+          <span class="ml-auto font-mono text-xs text-(--fg-subtle) tabular-nums">+{{ entry.at }}ms</span>
+        </li>
+      </ol>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Both callbacks are safely deferred until the component is mounted. The async variant is queued one extra tick,
+      so it consistently runs after the synchronous one.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
new file mode 100644
index 0000000..8ca903c
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/tryOnScopeDispose/demo.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { effectScope, ref } from 'vue';
+import { tryOnScopeDispose } from './index';
+
+interface LogEntry {
+  id: number;
+  label: string;
+  kind: 'create' | 'dispose' | 'noop';
+}
+
+let seq = 0;
+const log = ref<LogEntry[]>([]);
+const activeScopes = ref(0);
+
+function push(label: string, kind: LogEntry['kind']) {
+  log.value.unshift({ id: ++seq, label, kind });
+}
+
+let current: ReturnType<typeof effectScope> | null = null;
+
+// Create a fresh effect scope and register a dispose hook inside it.
+function createScope() {
+  const id = activeScopes.value + 1;
+  const scope = effectScope();
+
+  scope.run(() => {
+    const registered = tryOnScopeDispose(() => {
+      activeScopes.value--;
+      push(`scope #${id} disposed → cleanup ran`, 'dispose');
+    });
+
+    push(
+      registered
+        ? `scope #${id} created → hook registered`
+        : `scope #${id} created → no active scope (skipped)`,
+      registered ? 'create' : 'noop',
+    );
+  });
+
+  // Stop any previously open scope first so only one is live at a time.
+  current?.stop();
+  current = scope;
+  activeScopes.value = 1;
+}
+
+function disposeScope() {
+  current?.stop();
+  current = null;
+}
+
+// Demonstrates the graceful fallback: outside any scope it returns false.
+function callOutsideScope() {
+  const registered = tryOnScopeDispose(() => {});
+  push(
+    registered
+      ? 'unexpected: registered outside a scope'
+      : 'called outside scope → returned false (no-op)',
+    'noop',
+  );
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">tryOnScopeDispose</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="activeScopes > 0
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="activeScopes > 0 ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ activeScopes > 0 ? 'scope active' : 'no scope' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="createScope"
+      >
+        Create scope
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="activeScopes === 0"
+        @click="disposeScope"
+      >
+        Dispose
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="callOutsideScope"
+      >
+        Outside
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Event log</span>
+
+      <ul v-if="log.length" class="mt-3 flex flex-col gap-2">
+        <li
+          v-for="entry in log"
+          :key="entry.id"
+          class="flex items-center gap-2.5 text-sm"
+        >
+          <span
+            class="h-1.5 w-1.5 shrink-0 rounded-full"
+            :class="{
+              'bg-emerald-500': entry.kind === 'create',
+              'bg-rose-500': entry.kind === 'dispose',
+              'bg-(--fg-subtle)': entry.kind === 'noop',
+            }"
+          />
+          <span class="text-(--fg)">{{ entry.label }}</span>
+        </li>
+      </ul>
+
+      <p v-else class="mt-3 text-sm text-(--fg-subtle)">
+        Create a scope to register a cleanup hook, then dispose it to watch the callback fire.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Inside an active effect scope the cleanup is registered and runs on disposal. Called with no scope present, it
+      simply returns <code class="font-mono text-(--fg)">false</code> instead of throwing.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue b/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
new file mode 100644
index 0000000..620f057
--- /dev/null
+++ b/vue/toolkit/src/composables/lifecycle/useMounted/demo.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useMounted } from './index';
+
+// A readonly ref that flips to true once the component is mounted.
+const isMounted = useMounted();
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useMounted</span>
+      <p class="text-sm text-(--fg-muted)">
+        Tracks whether the component has finished mounting — handy for SSR-safe rendering and entry animations.
+      </p>
+    </div>
+
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col gap-0.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isMounted</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ isMounted }}</span>
+      </div>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition"
+        :class="isMounted
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="isMounted ? 'bg-emerald-500' : 'bg-amber-500'"
+        />
+        {{ isMounted ? 'mounted' : 'mounting…' }}
+      </span>
+    </div>
+
+    <!-- Mount-gated reveal: only animates in once the client takes over. -->
+    <div
+      class="overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset) p-4 transition-all duration-500 ease-out"
+      :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'"
+    >
+      <p class="text-sm text-(--fg)">
+        This panel fades and slides into view the moment <code class="font-mono">isMounted</code> becomes
+        <code class="font-mono text-(--fg)">true</code>.
+      </p>
+      <p class="mt-1 text-xs text-(--fg-subtle)">
+        On the server it renders hidden, avoiding hydration flicker.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/logicAnd/demo.vue b/vue/toolkit/src/composables/math/logicAnd/demo.vue
new file mode 100644
index 0000000..e446500
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicAnd/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { logicAnd } from './index';
+
+// Realistic "ready to publish" checklist — each is a reactive boolean source.
+const hasTitle = ref(true);
+const acceptedTerms = ref(false);
+const draftSaved = ref(true);
+
+// A getter input, to show logicAnd accepts refs *and* getters.
+const wordCount = ref(180);
+const meetsLength = computed(() => wordCount.value >= 150);
+
+const conditions = [
+  { key: 'title', label: 'Title is filled in', model: hasTitle },
+  { key: 'terms', label: 'Accepted publishing terms', model: acceptedTerms },
+  { key: 'draft', label: 'Draft auto-saved', model: draftSaved },
+];
+
+// True only when every condition is truthy.
+const canPublish = logicAnd(hasTitle, acceptedTerms, draftSaved, meetsLength);
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">logicAnd</span>
+      <p class="text-sm text-(--fg-muted)">
+        Reactive logical <code class="font-mono text-(--fg)">AND</code> — the result is true only when every input
+        resolves truthy. Toggle the checklist below.
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label
+        v-for="cond in conditions"
+        :key="cond.key"
+        class="flex cursor-pointer items-center gap-3 rounded-lg px-1.5 py-1.5 transition hover:bg-(--bg-inset)"
+      >
+        <input
+          v-model="cond.model.value"
+          type="checkbox"
+          class="h-4 w-4 shrink-0 cursor-pointer accent-(--accent)"
+        >
+        <span class="text-sm text-(--fg)">{{ cond.label }}</span>
+        <span
+          class="ml-auto inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums"
+          :class="cond.model.value
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ cond.model.value }}
+        </span>
+      </label>
+
+      <!-- A getter-driven input to prove logicAnd accepts getters too. -->
+      <div class="mt-1 flex flex-col gap-2 rounded-lg bg-(--bg-inset) p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-(--fg)">Word count ≥ 150</span>
+          <span
+            class="inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium tabular-nums"
+            :class="meetsLength
+              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg-subtle)'"
+          >
+            {{ meetsLength }}
+          </span>
+        </div>
+        <input
+          v-model.number="wordCount"
+          type="range"
+          min="0"
+          max="300"
+          step="10"
+          class="w-full cursor-pointer accent-(--accent)"
+        >
+        <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">{{ wordCount }} words</span>
+      </div>
+    </div>
+
+    <div
+      class="flex items-center justify-between rounded-lg border p-4 transition"
+      :class="canPublish
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-(--border) bg-(--bg-inset)'"
+    >
+      <div class="flex flex-col gap-0.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">canPublish</span>
+        <span
+          class="font-mono text-3xl font-bold tabular-nums"
+          :class="canPublish ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'"
+        >
+          {{ canPublish }}
+        </span>
+      </div>
+      <button
+        type="button"
+        :disabled="!canPublish"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      >
+        Publish
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/logicNot/demo.vue b/vue/toolkit/src/composables/math/logicNot/demo.vue
new file mode 100644
index 0000000..6f8222a
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicNot/demo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { logicNot } from './index';
+
+const isLoading = ref(false);
+const isReady = logicNot(isLoading);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col">
+        <span class="text-sm font-medium text-(--fg)">Loading</span>
+        <span class="text-xs text-(--fg-subtle)">source value</span>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="isLoading"
+        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        :class="isLoading ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        @click="isLoading = !isLoading"
+      >
+        <span
+          class="inline-block size-4 transform rounded-full bg-white shadow transition"
+          :class="isLoading ? 'translate-x-6' : 'translate-x-1'"
+        />
+      </button>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isLoading</span>
+        <span
+          class="font-mono text-lg font-bold tabular-nums"
+          :class="isLoading ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >{{ isLoading }}</span>
+      </div>
+      <div class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">isReady = !isLoading</span>
+        <span
+          class="font-mono text-lg font-bold tabular-nums"
+          :class="isReady ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >{{ isReady }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-muted)">
+      <span v-if="isReady" class="text-emerald-600 dark:text-emerald-400">Ready to continue</span>
+      <span v-else>Please wait, loading…</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/logicOr/demo.vue b/vue/toolkit/src/composables/math/logicOr/demo.vue
new file mode 100644
index 0000000..0804144
--- /dev/null
+++ b/vue/toolkit/src/composables/math/logicOr/demo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { logicOr } from './index';
+
+const email = ref(true);
+const sms = ref(false);
+const push = ref(false);
+
+const hasChannel = logicOr(email, sms, push);
+
+const channels = [
+  { key: 'email', label: 'Email', model: email },
+  { key: 'sms', label: 'SMS', model: sms },
+  { key: 'push', label: 'Push', model: push },
+] as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Notification channels</span>
+
+    <div class="flex flex-col gap-2">
+      <label
+        v-for="ch in channels"
+        :key="ch.key"
+        class="flex cursor-pointer items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 transition hover:border-(--border-strong)"
+      >
+        <span class="text-sm font-medium text-(--fg)">{{ ch.label }}</span>
+        <input
+          v-model="ch.model.value"
+          type="checkbox"
+          class="size-4 cursor-pointer accent-(--accent)"
+        >
+      </label>
+    </div>
+
+    <div
+      class="flex items-center justify-between rounded-xl border p-4 transition"
+      :class="hasChannel
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-amber-500/30 bg-amber-500/10'"
+    >
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">logicOr(email, sms, push)</span>
+        <span
+          class="text-sm font-medium"
+          :class="hasChannel
+            ? 'text-emerald-600 dark:text-emerald-400'
+            : 'text-amber-600 dark:text-amber-400'"
+        >{{ hasChannel ? 'At least one channel is on' : 'Pick a channel to get notified' }}</span>
+      </div>
+      <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ hasChannel }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useAbs/demo.vue b/vue/toolkit/src/composables/math/useAbs/demo.vue
new file mode 100644
index 0000000..7697e17
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAbs/demo.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useAbs } from './index';
+
+const value = ref(-42);
+const abs = useAbs(value);
+
+// Map the current value (-100..100) to a 0..100% offset for the marker.
+const markerLeft = computed(() => `${(value.value + 100) / 2}%`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-5">
+    <div class="flex items-end justify-between">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">value</span>
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg-muted)">{{ value }}</span>
+      </div>
+      <div class="flex flex-col items-end">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">|value|</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ abs }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <input
+        v-model.number="value"
+        type="range"
+        min="-100"
+        max="100"
+        step="1"
+        class="w-full cursor-pointer accent-(--accent)"
+      >
+      <div class="relative h-2 rounded-full bg-(--bg-inset)">
+        <div class="absolute inset-y-0 left-1/2 w-px bg-(--border-strong)" />
+        <div
+          class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-(--bg) bg-(--accent) transition-[left] duration-75"
+          :style="{ left: markerLeft }"
+        />
+      </div>
+      <div class="flex justify-between font-mono text-xs text-(--fg-subtle) tabular-nums">
+        <span>-100</span>
+        <span>0</span>
+        <span>100</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm text-(--fg) tabular-nums">
+      Math.abs({{ value }}) = {{ abs }}
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useAverage/demo.vue b/vue/toolkit/src/composables/math/useAverage/demo.vue
new file mode 100644
index 0000000..55be5af
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useAverage/demo.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useAverage } from './index';
+
+const scores = ref([88, 92, 76, 95]);
+const average = useAverage(scores);
+
+const display = computed(() =>
+  scores.value.length === 0 ? 'NaN' : average.value.toFixed(2),
+);
+
+function addScore() {
+  scores.value.push(Math.floor(Math.random() * 41) + 60);
+}
+
+function removeScore(index: number) {
+  scores.value.splice(index, 1);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between gap-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Average score</span>
+        <span class="text-xs text-(--fg-subtle)">{{ scores.length }} value{{ scores.length === 1 ? '' : 's' }}</span>
+      </div>
+      <span
+        class="font-mono text-3xl font-bold tabular-nums"
+        :class="scores.length === 0 ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg)'"
+      >{{ display }}</span>
+    </div>
+
+    <div v-if="scores.length" class="flex flex-col gap-2">
+      <div
+        v-for="(score, i) in scores"
+        :key="i"
+        class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+      >
+        <span class="w-6 shrink-0 font-mono text-xs text-(--fg-subtle) tabular-nums">#{{ i + 1 }}</span>
+        <input
+          v-model.number="scores[i]"
+          type="number"
+          min="0"
+          max="100"
+          class="w-full rounded-md border border-(--border) bg-(--bg) px-2 py-1 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="button"
+          aria-label="Remove value"
+          class="shrink-0 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-1 text-sm text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+          @click="removeScore(i)"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+
+    <div v-else class="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-center text-sm text-amber-600 dark:text-amber-400">
+      No values — mean is NaN (0 / 0)
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="addScore"
+    >
+      + Add random score
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useCeil/demo.vue b/vue/toolkit/src/composables/math/useCeil/demo.vue
new file mode 100644
index 0000000..9424a22
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useCeil/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCeil } from './index';
+
+const value = ref(7.25);
+const ceiled = useCeil(value);
+
+// Fractional part drives a little fill bar so rounding "up" feels visual.
+const fraction = computed(() => {
+  const f = value.value - Math.floor(value.value);
+  return Math.min(Math.max(f, 0), 1);
+});
+
+function step(delta: number) {
+  value.value = Math.round((value.value + delta) * 100) / 100;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">value</span>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          aria-label="Decrement"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="step(-0.25)"
+        >−</button>
+        <input
+          v-model.number="value"
+          type="number"
+          step="0.25"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-center font-mono text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="button"
+          aria-label="Increment"
+          class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="step(0.25)"
+        >+</button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-2 flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Math.ceil</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ ceiled }}</span>
+      </div>
+      <div class="relative h-2 overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-150"
+          :style="{ width: `${fraction * 100}%` }"
+        />
+      </div>
+      <div class="mt-1.5 flex justify-between font-mono text-xs text-(--fg-subtle) tabular-nums">
+        <span>{{ Math.floor(value) }}</span>
+        <span class="text-(--accent-text)">{{ ceiled }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm text-(--fg) tabular-nums">
+      Math.ceil({{ value }}) = {{ ceiled }}
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useClamp/demo.vue b/vue/toolkit/src/composables/math/useClamp/demo.vue
new file mode 100644
index 0000000..91313b3
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useClamp/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useClamp } from './index';
+
+const min = ref(20);
+const max = ref(80);
+const raw = ref(50);
+
+// useClamp returns a WritableComputedRef when given a ref: writing through it
+// clamps the underlying value back into [min, max].
+const clamped = useClamp(raw, min, max);
+
+const presets = [-30, 0, 50, 100, 130];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-end justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Clamped</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ clamped }}</span>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <div class="flex items-center justify-between text-xs text-(--fg-muted)">
+          <span>{{ min }}</span>
+          <span>range</span>
+          <span>{{ max }}</span>
+        </div>
+        <div class="relative h-2 rounded-full bg-(--bg-inset)">
+          <div
+            class="absolute top-0 h-2 rounded-full bg-(--accent-subtle)"
+            :style="{ left: `${min}%`, width: `${Math.max(0, max - min)}%` }"
+          />
+          <div
+            class="absolute -top-1 size-4 -translate-x-1/2 rounded-full border-2 border-(--bg-elevated) bg-(--accent) shadow transition-[left]"
+            :style="{ left: `${clamped}%` }"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Input value</span>
+        <input
+          v-model.number="raw"
+          type="range"
+          min="-50"
+          max="150"
+          class="w-full accent-(--accent)"
+        >
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">raw = {{ raw }}</span>
+      </label>
+
+      <div class="grid grid-cols-2 gap-3">
+        <label class="flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Min</span>
+          <input
+            v-model.number="min"
+            type="number"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+        <label class="flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max</span>
+          <input
+            v-model.number="max"
+            type="number"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="p in presets"
+          :key="p"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="clamped = p"
+        >
+          set {{ p }}
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        The buttons write straight through the clamped ref &mdash; values outside the range snap to the nearest bound.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useFloor/demo.vue b/vue/toolkit/src/composables/math/useFloor/demo.vue
new file mode 100644
index 0000000..2d4cac1
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useFloor/demo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFloor } from './index';
+
+const value = ref(5.95);
+
+// Reactive Math.floor: recomputes whenever `value` changes.
+const floored = useFloor(value);
+
+function nudge(delta: number) {
+  value.value = Math.round((value.value + delta) * 100) / 100;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Math.floor</span>
+      <div class="flex items-baseline gap-3 font-mono tabular-nums">
+        <span class="text-2xl text-(--fg-muted)">{{ value.toFixed(2) }}</span>
+        <span class="text-(--fg-subtle)">&rarr;</span>
+        <span class="text-4xl font-bold text-(--fg)">{{ floored }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Value</span>
+        <input
+          v-model.number="value"
+          type="range"
+          min="-10"
+          max="10"
+          step="0.01"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(-0.1)"
+        >
+          &minus;0.1
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(0.1)"
+        >
+          +0.1
+        </button>
+        <input
+          v-model.number="value"
+          type="number"
+          step="0.01"
+          class="ml-auto w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        useFloor({{ value }}) === {{ floored }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useMath/demo.vue b/vue/toolkit/src/composables/math/useMath/demo.vue
new file mode 100644
index 0000000..927e89c
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMath/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMath } from './index';
+
+const a = ref(3);
+const b = ref(4);
+
+// Reactive wrappers over Math methods. Each recomputes when a or b change.
+const hypot = useMath('hypot', a, b);
+const max = useMath('max', a, b);
+const min = useMath('min', a, b);
+const pow = useMath('pow', a, b);
+
+// A single-argument method driven by a getter.
+const sqrtOfA = useMath('sqrt', () => a.value);
+
+const results = computed(() => [
+  { label: 'hypot(a, b)', expr: '√(a² + b²)', value: hypot.value },
+  { label: 'pow(a, b)', expr: 'aᵇ', value: pow.value },
+  { label: 'max(a, b)', expr: 'larger', value: max.value },
+  { label: 'min(a, b)', expr: 'smaller', value: min.value },
+  { label: 'sqrt(a)', expr: '√a', value: sqrtOfA.value },
+]);
+
+function fmt(n: number) {
+  return Number.isInteger(n) ? `${n}` : n.toFixed(3);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 grid grid-cols-2 gap-3">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">a = {{ a }}</span>
+        <input
+          v-model.number="a"
+          type="range"
+          min="0"
+          max="12"
+          step="1"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">b = {{ b }}</span>
+        <input
+          v-model.number="b"
+          type="range"
+          min="0"
+          max="12"
+          step="1"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) divide-y divide-(--border)">
+      <div
+        v-for="r in results"
+        :key="r.label"
+        class="flex items-center justify-between gap-3 px-4 py-2.5"
+      >
+        <div class="flex flex-col">
+          <span class="font-mono text-sm text-(--fg)">{{ r.label }}</span>
+          <span class="text-xs text-(--fg-subtle)">{{ r.expr }}</span>
+        </div>
+        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg)">{{ fmt(r.value) }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Every value above is a single <code class="font-mono">useMath('&lt;key&gt;', ...)</code> computed &mdash; any callable
+      <code class="font-mono">Math</code> method works, with refs, getters or plain values as arguments.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useMax/demo.vue b/vue/toolkit/src/composables/math/useMax/demo.vue
new file mode 100644
index 0000000..a500cb4
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMax/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMax } from './index';
+
+// A single reactive array — useMax resolves each item (which may itself be a
+// ref/getter) and tracks changes to the array.
+const samples = ref([42, 17, 88, 23, 64]);
+
+const max = useMax(samples);
+
+const maxIndex = computed(() => samples.value.indexOf(max.value));
+
+function randomize() {
+  const len = 3 + Math.floor(Math.random() * 4);
+  samples.value = Array.from({ length: len }, () => Math.floor(Math.random() * 100));
+}
+
+function add() {
+  samples.value.push(Math.floor(Math.random() * 100));
+}
+
+function removeAt(i: number) {
+  samples.value.splice(i, 1);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Maximum</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ Number.isFinite(max) ? max : '−∞' }}
+      </span>
+      <span v-if="!samples.length" class="text-xs text-(--fg-subtle)">empty list → −Infinity</span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Values</span>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="add"
+          >
+            + add
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+            @click="randomize"
+          >
+            shuffle
+          </button>
+        </div>
+      </div>
+
+      <div v-if="samples.length" class="flex flex-col gap-2">
+        <div
+          v-for="(n, i) in samples"
+          :key="i"
+          class="flex items-center gap-2"
+        >
+          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-(--bg-inset)">
+            <div
+              class="h-full rounded-md transition-all"
+              :class="i === maxIndex ? 'bg-(--accent)' : 'bg-(--accent-subtle)'"
+              :style="{ width: `${Math.max(4, n)}%` }"
+            />
+            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-(--fg)">
+              {{ n }}
+            </span>
+          </div>
+          <button
+            type="button"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+            aria-label="Remove value"
+            @click="removeAt(i)"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+      <p v-else class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-subtle)">
+        No values &mdash; add some to compute a maximum.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useMin/demo.vue b/vue/toolkit/src/composables/math/useMin/demo.vue
new file mode 100644
index 0000000..a4616c3
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useMin/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMin } from './index';
+
+// A single reactive array — useMin resolves each item (refs/getters allowed)
+// and recomputes whenever the array changes.
+const samples = ref([42, 17, 88, 23, 64]);
+
+const min = useMin(samples);
+
+const minIndex = computed(() => samples.value.indexOf(min.value));
+
+function randomize() {
+  const len = 3 + Math.floor(Math.random() * 4);
+  samples.value = Array.from({ length: len }, () => Math.floor(Math.random() * 100));
+}
+
+function add() {
+  samples.value.push(Math.floor(Math.random() * 100));
+}
+
+function removeAt(i: number) {
+  samples.value.splice(i, 1);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Minimum</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ Number.isFinite(min) ? min : '∞' }}
+      </span>
+      <span v-if="!samples.length" class="text-xs text-(--fg-subtle)">empty list → Infinity</span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Values</span>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="add"
+          >
+            + add
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+            @click="randomize"
+          >
+            shuffle
+          </button>
+        </div>
+      </div>
+
+      <div v-if="samples.length" class="flex flex-col gap-2">
+        <div
+          v-for="(n, i) in samples"
+          :key="i"
+          class="flex items-center gap-2"
+        >
+          <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-(--bg-inset)">
+            <div
+              class="h-full rounded-md transition-all"
+              :class="i === minIndex ? 'bg-emerald-500' : 'bg-(--accent-subtle)'"
+              :style="{ width: `${Math.max(4, n)}%` }"
+            />
+            <span class="absolute inset-y-0 left-2 flex items-center font-mono text-xs font-medium tabular-nums text-(--fg)">
+              {{ n }}
+            </span>
+          </div>
+          <button
+            type="button"
+            class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
+            aria-label="Remove value"
+            @click="removeAt(i)"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+      <p v-else class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center text-sm text-(--fg-subtle)">
+        No values &mdash; add some to compute a minimum.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/usePrecision/demo.vue b/vue/toolkit/src/composables/math/usePrecision/demo.vue
new file mode 100644
index 0000000..f5b4868
--- /dev/null
+++ b/vue/toolkit/src/composables/math/usePrecision/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { usePrecision } from './index';
+import type { UsePrecisionMath } from './index';
+
+const value = ref(3.14159);
+const digits = ref(2);
+const math = ref<UsePrecisionMath>('round');
+
+const result = usePrecision(value, digits, computed(() => ({ math: math.value })));
+
+const methods: ReadonlyArray<{ key: UsePrecisionMath; label: string }> = [
+  { key: 'round', label: 'round' },
+  { key: 'floor', label: 'floor' },
+  { key: 'ceil', label: 'ceil' },
+];
+
+const samples = [3.14159, 0.1 + 0.2, 1234.5678, 9.999, 2.71828];
+
+function pick(n: number) {
+  value.value = n;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">precision result</span>
+        <span class="font-mono text-xs text-(--fg-subtle)">{{ digits }} digit{{ digits === 1 ? '' : 's' }}</span>
+      </div>
+      <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ result }}
+      </div>
+      <div class="mt-1 font-mono text-xs text-(--fg-subtle)">
+        from {{ value }}
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Value</span>
+        <span class="font-mono text-(--fg-muted)">{{ value }}</span>
+      </label>
+      <input
+        v-model.number="value"
+        type="range"
+        min="0"
+        max="10"
+        step="0.00001"
+        class="mt-2 w-full accent-(--accent)"
+      >
+
+      <label class="mt-4 flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Digits</span>
+        <span class="font-mono text-(--fg-muted)">{{ digits }}</span>
+      </label>
+      <input
+        v-model.number="digits"
+        type="range"
+        min="0"
+        max="5"
+        step="1"
+        class="mt-2 w-full accent-(--accent)"
+      >
+    </div>
+
+    <div>
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rounding method</span>
+      <div class="mt-2 grid grid-cols-3 gap-2">
+        <button
+          v-for="m in methods"
+          :key="m.key"
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="math === m.key
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="math = m.key"
+        >
+          {{ m.label }}
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Samples</span>
+      <div class="mt-2 flex flex-wrap gap-2">
+        <button
+          v-for="(s, i) in samples"
+          :key="i"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) cursor-pointer"
+          @click="pick(s)"
+        >
+          {{ s }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useProjection/demo.vue b/vue/toolkit/src/composables/math/useProjection/demo.vue
new file mode 100644
index 0000000..d1aa575
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useProjection/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useProjection } from './index';
+
+// Source value lives in a temperature domain.
+const celsius = ref(22);
+
+const clamp = ref(false);
+const options = computed(() => ({ clamp: clamp.value }));
+
+// Same reactive source projected into several target domains at once.
+const fahrenheit = useProjection(celsius, [0, 100], [32, 212], options);
+const fraction = useProjection(celsius, [0, 40], [0, 1], options);
+const percent = useProjection(celsius, [0, 40], [0, 100], options);
+const hue = useProjection(celsius, [0, 40], [210, 0], options);
+
+const barWidth = computed(() => `${Math.max(0, Math.min(100, percent.value))}%`);
+const swatch = computed(() => `hsl(${hue.value} 80% 50%)`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source · °C</span>
+        <span class="font-mono text-sm text-(--fg-muted)">domain [0, 40]</span>
+      </div>
+      <div class="mt-1 flex items-center gap-3">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ celsius }}°</span>
+        <span
+          class="size-6 shrink-0 rounded-full border border-(--border)"
+          :style="{ backgroundColor: swatch }"
+        />
+      </div>
+      <input
+        v-model.number="celsius"
+        type="range"
+        min="-10"
+        max="50"
+        step="1"
+        class="mt-3 w-full accent-(--accent)"
+      >
+    </div>
+
+    <div class="space-y-2">
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-sm text-(--fg-muted)">→ °F <span class="font-mono text-xs text-(--fg-subtle)">[32, 212]</span></span>
+        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fahrenheit.toFixed(1) }}</span>
+      </div>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-sm text-(--fg-muted)">→ fraction <span class="font-mono text-xs text-(--fg-subtle)">[0, 1]</span></span>
+        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ fraction.toFixed(3) }}</span>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-(--fg-muted)">→ percent <span class="font-mono text-xs text-(--fg-subtle)">[0, 100]</span></span>
+          <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ percent.toFixed(0) }}%</span>
+        </div>
+        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-(--bg)">
+          <div
+            class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+            :style="{ width: barWidth }"
+          />
+        </div>
+      </div>
+    </div>
+
+    <label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="flex flex-col">
+        <span class="text-sm font-medium text-(--fg)">Clamp to domain</span>
+        <span class="text-xs text-(--fg-subtle)">prevent extrapolation past bounds</span>
+      </span>
+      <input v-model="clamp" type="checkbox" class="size-4 accent-(--accent)">
+    </label>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useRound/demo.vue b/vue/toolkit/src/composables/math/useRound/demo.vue
new file mode 100644
index 0000000..365ffc6
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useRound/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRound } from './index';
+
+const value = ref(1234.5678);
+const digits = ref(2);
+
+const rounded = useRound(value, { digits });
+
+const hint = computed(() => {
+  if (digits.value > 0)
+    return `to ${digits.value} decimal place${digits.value === 1 ? '' : 's'}`;
+  if (digits.value < 0)
+    return `to nearest ${10 ** -digits.value}`;
+  return 'to nearest integer (Math.round)';
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">rounded</span>
+        <span class="font-mono text-xs text-(--fg-subtle)">{{ hint }}</span>
+      </div>
+      <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+        {{ rounded }}
+      </div>
+      <div class="mt-1 font-mono text-xs text-(--fg-subtle)">
+        input {{ value }}
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="block text-sm font-medium text-(--fg)" for="round-value">Value</label>
+      <input
+        id="round-value"
+        v-model.number="value"
+        type="number"
+        step="0.0001"
+        class="mt-2 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+
+      <label class="mt-4 flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Digits</span>
+        <span
+          class="font-mono tabular-nums"
+          :class="digits === 0 ? 'text-(--fg-muted)' : 'text-(--accent-text)'"
+        >{{ digits > 0 ? '+' : '' }}{{ digits }}</span>
+      </label>
+      <input
+        v-model.number="digits"
+        type="range"
+        min="-3"
+        max="4"
+        step="1"
+        class="mt-2 w-full accent-(--accent)"
+      >
+      <div class="mt-1 flex justify-between font-mono text-xs text-(--fg-subtle)">
+        <span>tens</span>
+        <span>integer</span>
+        <span>decimals</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useSum/demo.vue b/vue/toolkit/src/composables/math/useSum/demo.vue
new file mode 100644
index 0000000..4921378
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useSum/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSum } from './index';
+
+interface LineItem {
+  id: number;
+  label: string;
+  amount: number;
+}
+
+let nextId = 4;
+const items = ref<LineItem[]>([
+  { id: 1, label: 'Domain renewal', amount: 12.99 },
+  { id: 2, label: 'Cloud hosting', amount: 24.5 },
+  { id: 3, label: 'Email service', amount: 6.0 },
+]);
+
+// useSum reads a reactive array of getters, recomputing as items mutate.
+const total = useSum(() => items.value.map(item => () => item.amount));
+
+function addItem() {
+  items.value.push({ id: nextId++, label: 'New item', amount: 0 });
+}
+
+function removeItem(id: number) {
+  items.value = items.value.filter(item => item.id !== id);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">monthly total</span>
+        <span class="text-xs text-(--fg-subtle)">{{ items.length }} item{{ items.length === 1 ? '' : 's' }}</span>
+      </div>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">${{ total.toFixed(2) }}</span>
+    </div>
+
+    <div class="space-y-2">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) p-2"
+      >
+        <input
+          v-model="item.label"
+          type="text"
+          class="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-1 text-sm text-(--fg) transition focus:border-(--accent) focus:bg-(--bg) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <div class="flex items-center text-sm text-(--fg-subtle)">
+          <span class="font-mono">$</span>
+          <input
+            v-model.number="item.amount"
+            type="number"
+            step="0.01"
+            class="w-20 rounded-md border border-(--border) bg-(--bg) px-2 py-1 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </div>
+        <button
+          type="button"
+          aria-label="Remove item"
+          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg-muted) transition hover:border-red-500/40 hover:text-red-600 dark:hover:text-red-400 active:scale-[0.98] cursor-pointer"
+          @click="removeItem(item.id)"
+        >
+          &times;
+        </button>
+      </div>
+
+      <p v-if="!items.length" class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-4 text-center text-sm text-(--fg-subtle)">
+        No items — total is ${{ total.toFixed(2) }}
+      </p>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="addItem"
+    >
+      + Add item
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/math/useTrunc/demo.vue b/vue/toolkit/src/composables/math/useTrunc/demo.vue
new file mode 100644
index 0000000..3585528
--- /dev/null
+++ b/vue/toolkit/src/composables/math/useTrunc/demo.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useTrunc } from './index';
+
+const value = ref(2.9);
+const truncated = useTrunc(value);
+
+// The fractional part discarded by Math.trunc, for a side-by-side comparison.
+const fractional = computed(() => value.value - truncated.value);
+
+const samples = [2.9, -3.7, 42.0001, -0.5, 99.999];
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="flex flex-col items-center gap-1 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">truncated</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ truncated }}</span>
+      </div>
+      <div class="flex flex-col items-center gap-1 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">dropped</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg-muted)">{{ fractional.toFixed(3) }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <label class="flex items-center justify-between text-sm font-medium text-(--fg)">
+        <span>Value</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ value }}</span>
+      </label>
+      <input
+        v-model.number="value"
+        type="range"
+        min="-10"
+        max="10"
+        step="0.01"
+        class="mt-2 w-full accent-(--accent)"
+      >
+    </div>
+
+    <div>
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Samples</span>
+      <div class="mt-2 flex flex-wrap gap-2">
+        <button
+          v-for="(s, i) in samples"
+          :key="i"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:border-(--border-strong) hover:text-(--fg) cursor-pointer"
+          @click="value = s"
+        >
+          {{ s }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useBluetooth/demo.vue b/vue/toolkit/src/composables/media/useBluetooth/demo.vue
new file mode 100644
index 0000000..400a889
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useBluetooth/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBluetooth } from './index';
+
+const {
+  isSupported,
+  isConnected,
+  device,
+  requestDevice,
+  connect,
+  disconnect,
+  error,
+} = useBluetooth({
+  // Surface every nearby device in the chooser so the demo works without
+  // assuming any particular peripheral is in range.
+  acceptAllDevices: true,
+  optionalServices: ['battery_service'],
+});
+
+const deviceName = computed(() => device.value?.name || 'Unnamed device');
+const deviceId = computed(() => device.value?.id ?? '');
+
+const errorMessage = computed(() => {
+  const err = error.value;
+  if (!err)
+    return '';
+  if (err instanceof Error)
+    return err.name === 'NotFoundError' ? 'No device selected (picker dismissed).' : err.message;
+  return String(err);
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      Web Bluetooth is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Web Bluetooth</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            <span class="size-1.5 rounded-full transition" :class="isConnected ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ isConnected ? 'Connected' : 'Disconnected' }}
+          </span>
+        </div>
+
+        <div v-if="device" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+          <div class="text-sm font-medium text-(--fg) truncate">{{ deviceName }}</div>
+          <div class="font-mono text-xs text-(--fg-subtle) truncate">{{ deviceId }}</div>
+        </div>
+        <div v-else class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)">
+          No device paired yet
+        </div>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="requestDevice"
+        >
+          Pair device
+        </button>
+        <button
+          type="button"
+          :disabled="!device || isConnected"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="connect"
+        >
+          Reconnect
+        </button>
+        <button
+          type="button"
+          :disabled="!isConnected"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="disconnect"
+        >
+          Disconnect
+        </button>
+      </div>
+
+      <p v-if="errorMessage" class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-600 dark:text-red-400">
+        {{ errorMessage }}
+      </p>
+      <p class="text-xs text-(--fg-subtle)">
+        Pairing prompts the browser's device chooser. A physical Bluetooth peripheral must be in range.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue b/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
new file mode 100644
index 0000000..775b594
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useDisplayMedia/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, useTemplateRef, watch } from 'vue';
+import { useDisplayMedia } from './index';
+
+const video = useTemplateRef<HTMLVideoElement>('video');
+
+const { isSupported, stream, enabled, start, stop } = useDisplayMedia({ audio: false });
+
+// Wire the live stream into the preview element whenever it changes.
+watch([video, stream], ([el, media]) => {
+  if (el)
+    el.srcObject = media ?? null;
+});
+
+const track = computed(() => stream.value?.getVideoTracks()[0]);
+const surfaceLabel = computed(() => track.value?.label || 'Shared surface');
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      Screen capture (getDisplayMedia) is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Screen share</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            <span class="size-1.5 rounded-full transition" :class="enabled ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ enabled ? 'Sharing' : 'Idle' }}
+          </span>
+        </div>
+
+        <div class="relative aspect-video overflow-hidden rounded-lg border border-(--border) bg-(--bg-inset)">
+          <video
+            ref="video"
+            autoplay
+            muted
+            playsinline
+            class="size-full object-contain"
+          />
+          <div
+            v-if="!stream"
+            class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-center text-sm text-(--fg-subtle)"
+          >
+            <span class="text-(--fg-muted)">No active capture</span>
+            <span class="text-xs">Start sharing to preview your screen</span>
+          </div>
+        </div>
+
+        <div v-if="stream" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) truncate">
+          {{ surfaceLabel }}
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <button
+          v-if="!enabled"
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="start"
+        >
+          Start sharing
+        </button>
+        <button
+          v-else
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="stop"
+        >
+          Stop sharing
+        </button>
+
+        <label class="inline-flex select-none items-center gap-2 text-sm text-(--fg-muted) cursor-pointer">
+          <input v-model="enabled" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+          enabled
+        </label>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Starting prompts the browser's screen-picker. Toggling <code class="font-mono">enabled</code> drives the same stream.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useMediaControls/demo.vue b/vue/toolkit/src/composables/media/useMediaControls/demo.vue
new file mode 100644
index 0000000..fd464b4
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMediaControls/demo.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useMediaControls } from './index';
+
+const video = useTemplateRef<HTMLVideoElement>('video');
+
+const {
+  playing,
+  currentTime,
+  duration,
+  volume,
+  muted,
+  rate,
+  waiting,
+  buffered,
+  ended,
+  supportsPictureInPicture,
+  isPictureInPicture,
+  togglePictureInPicture,
+} = useMediaControls(video, {
+  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBigBuckBunny.mp4',
+});
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds))
+    return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+// Show buffered coverage as a percentage of the total duration.
+const bufferedPercent = computed(() => {
+  if (!duration.value)
+    return 0;
+  const end = buffered.value.length ? buffered.value[buffered.value.length - 1][1] : 0;
+  return Math.min(100, (end / duration.value) * 100);
+});
+
+const progressPercent = computed(() =>
+  duration.value ? (currentTime.value / duration.value) * 100 : 0);
+
+const rates = [0.5, 1, 1.5, 2];
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="relative aspect-video overflow-hidden rounded-lg border border-(--border) bg-black">
+        <video
+          ref="video"
+          playsinline
+          class="size-full object-contain"
+        />
+        <div
+          v-if="waiting"
+          class="absolute inset-0 flex items-center justify-center bg-black/30 text-sm text-white"
+        >
+          Buffering…
+        </div>
+      </div>
+
+      <!-- Scrub bar with a buffered underlay -->
+      <div class="flex flex-col gap-1.5">
+        <div class="relative h-1.5 overflow-hidden rounded-full bg-(--bg-inset)">
+          <div class="absolute inset-y-0 left-0 bg-(--fg-subtle)/30" :style="{ width: `${bufferedPercent}%` }" />
+          <div class="absolute inset-y-0 left-0 bg-(--accent) transition-[width] duration-150" :style="{ width: `${progressPercent}%` }" />
+        </div>
+        <input
+          v-model.number="currentTime"
+          type="range"
+          min="0"
+          :max="duration || 0"
+          step="0.1"
+          class="w-full accent-(--accent) cursor-pointer"
+          aria-label="Seek"
+        >
+        <div class="flex items-center justify-between font-mono text-xs tabular-nums text-(--fg-muted)">
+          <span>{{ formatTime(currentTime) }}</span>
+          <span>{{ formatTime(duration) }}</span>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="playing = !playing"
+        >
+          {{ playing ? 'Pause' : ended ? 'Replay' : 'Play' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="muted = !muted"
+        >
+          {{ muted ? 'Unmute' : 'Mute' }}
+        </button>
+        <button
+          v-if="supportsPictureInPicture"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="togglePictureInPicture"
+        >
+          {{ isPictureInPicture ? 'Exit PiP' : 'Picture-in-Picture' }}
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 gap-4">
+        <div class="flex flex-col gap-1.5">
+          <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="vol">Volume</label>
+          <input
+            id="vol"
+            v-model.number="volume"
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            class="w-full accent-(--accent) cursor-pointer"
+          >
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Speed</span>
+          <div class="flex gap-1">
+            <button
+              v-for="r in rates"
+              :key="r"
+              type="button"
+              class="flex-1 rounded-md border px-2 py-1 text-xs font-medium tabular-nums transition cursor-pointer"
+              :class="rate === r
+                ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+                : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted) hover:bg-(--bg-inset)'"
+              @click="rate = r"
+            >
+              {{ r }}x
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Reactive controls over a real <code class="font-mono">&lt;video&gt;</code>: seek, volume, mute, playback rate, buffered ranges, and Picture-in-Picture.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useMemory/demo.vue b/vue/toolkit/src/composables/media/useMemory/demo.vue
new file mode 100644
index 0000000..30dd4a2
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useMemory/demo.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useMemory } from './index';
+
+const { isSupported, memory } = useMemory({ interval: 1000 });
+
+function formatBytes(bytes: number): string {
+  const mb = bytes / (1024 * 1024);
+  return mb >= 1024 ? `${(mb / 1024).toFixed(2)} GB` : `${mb.toFixed(1)} MB`;
+}
+
+const usedPercent = computed(() => {
+  if (!memory.value)
+    return 0;
+  return (memory.value.usedJSHeapSize / memory.value.jsHeapSizeLimit) * 100;
+});
+
+const allocatedPercent = computed(() => {
+  if (!memory.value)
+    return 0;
+  return (memory.value.totalJSHeapSize / memory.value.jsHeapSizeLimit) * 100;
+});
+
+// A button to deliberately allocate memory so the gauge visibly moves.
+const ballast = shallowRef<number[][]>([]);
+const allocations = ref(0);
+
+function allocate(): void {
+  // ~8 MB of doubles per click.
+  ballast.value = [...ballast.value, Array.from({ length: 1_000_000 }, (_, i) => i)];
+  allocations.value++;
+}
+
+function release(): void {
+  ballast.value = [];
+  allocations.value = 0;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      <code class="font-mono">performance.memory</code> is not available in this browser (Chromium only).
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">JS heap</span>
+          <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ usedPercent.toFixed(1) }}%</span>
+        </div>
+
+        <div class="flex items-baseline gap-2">
+          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">
+            {{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}
+          </span>
+          <span class="text-sm text-(--fg-subtle)">used</span>
+        </div>
+
+        <!-- Stacked gauge: allocated under used, both relative to the heap limit -->
+        <div class="relative h-2.5 overflow-hidden rounded-full bg-(--bg-inset)">
+          <div class="absolute inset-y-0 left-0 bg-(--fg-subtle)/30 transition-[width] duration-500" :style="{ width: `${allocatedPercent}%` }" />
+          <div class="absolute inset-y-0 left-0 bg-(--accent) transition-[width] duration-500" :style="{ width: `${usedPercent}%` }" />
+        </div>
+
+        <div class="grid grid-cols-3 gap-2">
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.usedJSHeapSize) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">used</div>
+          </div>
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.totalJSHeapSize) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">total</div>
+          </div>
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ memory ? formatBytes(memory.jsHeapSizeLimit) : '—' }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">limit</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="allocate"
+        >
+          Allocate ~8 MB
+        </button>
+        <button
+          type="button"
+          :disabled="allocations === 0"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="release"
+        >
+          Release
+        </button>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Sampled every second. Allocate buffers to watch usage climb; releasing lets the next GC reclaim it.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue b/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
new file mode 100644
index 0000000..417098f
--- /dev/null
+++ b/vue/toolkit/src/composables/media/usePerformanceObserver/demo.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { usePerformanceObserver } from './index';
+
+interface Entry {
+  name: string;
+  type: string;
+  startTime: number;
+  duration: number;
+}
+
+const entries = shallowRef<Entry[]>([]);
+const total = ref(0);
+
+const { isSupported, isActive, pause, resume } = usePerformanceObserver(
+  (list) => {
+    const next = list.getEntries().map(e => ({
+      name: e.name,
+      type: e.entryType,
+      startTime: e.startTime,
+      duration: e.duration,
+    }));
+    total.value += next.length;
+    // Keep the most recent entries, newest first.
+    entries.value = [...next.reverse(), ...entries.value].slice(0, 8);
+  },
+  {
+    entryTypes: ['measure', 'mark'],
+    buffered: true,
+  },
+);
+
+let counter = 0;
+
+// Emit real User Timing entries the observer will pick up.
+function measureWork(): void {
+  const id = ++counter;
+  const startMark = `task-${id}-start`;
+  const endMark = `task-${id}-end`;
+
+  performance.mark(startMark);
+  // A small synchronous workload so the measure has a non-zero duration.
+  let acc = 0;
+  for (let i = 0; i < 2_000_000; i++)
+    acc += Math.sqrt(i);
+  performance.mark(endMark);
+  performance.measure(`render-pass-${id} (${acc > 0 ? 'ok' : 'noop'})`, startMark, endMark);
+}
+
+function toggle(): void {
+  isActive.value ? pause() : resume();
+}
+
+const lastDuration = computed(() => {
+  const measure = entries.value.find(e => e.type === 'measure');
+  return measure ? measure.duration : 0;
+});
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400">
+      <code class="font-mono">PerformanceObserver</code> is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Performance entries</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            <span class="size-1.5 rounded-full transition" :class="isActive ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ isActive ? 'Observing' : 'Paused' }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-2 gap-2">
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ total }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">entries seen</div>
+          </div>
+          <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="font-mono text-lg font-bold tabular-nums text-(--fg)">{{ lastDuration.toFixed(2) }}</div>
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">last measure ms</div>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1.5">
+          <ul v-if="entries.length" class="flex flex-col gap-1.5">
+            <li
+              v-for="(entry, i) in entries"
+              :key="`${entry.name}-${i}`"
+              class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+            >
+              <span class="flex min-w-0 items-center gap-2">
+                <span
+                  class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-1.5 py-0.5 text-[10px] font-medium uppercase text-(--fg-muted)"
+                >{{ entry.type }}</span>
+                <span class="truncate font-mono text-xs text-(--fg)">{{ entry.name }}</span>
+              </span>
+              <span class="shrink-0 font-mono text-xs tabular-nums text-(--fg-muted)">{{ entry.duration.toFixed(1) }}ms</span>
+            </li>
+          </ul>
+          <div
+            v-else
+            class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center text-sm text-(--fg-subtle)"
+          >
+            No entries yet — run a measured task
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="measureWork"
+        >
+          Run measured task
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggle"
+        >
+          {{ isActive ? 'Pause' : 'Resume' }}
+        </button>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Each task emits User Timing <code class="font-mono">mark</code>/<code class="font-mono">measure</code> entries that the observer streams in live.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue b/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
new file mode 100644
index 0000000..d890ed0
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechRecognition/demo.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSpeechRecognition } from './index';
+
+const lang = ref('en-US');
+
+const languages = [
+  { value: 'en-US', label: 'English (US)' },
+  { value: 'en-GB', label: 'English (UK)' },
+  { value: 'es-ES', label: 'Spanish' },
+  { value: 'fr-FR', label: 'French' },
+  { value: 'de-DE', label: 'German' },
+  { value: 'ru-RU', label: 'Russian' },
+];
+
+const {
+  isSupported,
+  isListening,
+  isFinal,
+  result,
+  confidence,
+  error,
+  toggle,
+} = useSpeechRecognition({ lang, continuous: true, interimResults: true });
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Speech Recognition is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Language</span>
+        <select
+          v-model="lang"
+          :disabled="isListening"
+          class="rounded-lg border border-(--border) bg-(--bg) px-2.5 py-1.5 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <option v-for="l in languages" :key="l.value" :value="l.value">{{ l.label }}</option>
+        </select>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-2 rounded-lg border border-transparent px-3 py-2.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="isListening
+          ? 'bg-red-500 text-white hover:bg-red-600'
+          : 'bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'"
+        @click="toggle()"
+      >
+        <span
+          class="size-2 rounded-full"
+          :class="isListening ? 'bg-white animate-pulse' : 'bg-(--accent-fg)/60'"
+        />
+        {{ isListening ? 'Stop listening' : 'Start listening' }}
+      </button>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2 min-h-28">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Transcript</span>
+          <span
+            v-if="result"
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            {{ isFinal ? 'final' : 'interim' }}
+          </span>
+        </div>
+        <p
+          v-if="result"
+          class="text-sm leading-relaxed text-(--fg)"
+          :class="{ 'italic text-(--fg-muted)': !isFinal }"
+        >
+          {{ result }}
+        </p>
+        <p v-else class="text-sm text-(--fg-subtle)">
+          {{ isListening ? 'Listening… start speaking.' : 'Press start and say something.' }}
+        </p>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Confidence</span>
+        <div class="flex items-center gap-2">
+          <div class="h-1.5 w-24 overflow-hidden rounded-full bg-(--bg-elevated)">
+            <div
+              class="h-full rounded-full bg-(--accent) transition-all duration-300"
+              :style="{ width: `${Math.round(confidence * 100)}%` }"
+            />
+          </div>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ Math.round(confidence * 100) }}%</span>
+        </div>
+      </div>
+
+      <p
+        v-if="error"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ 'error' in error ? error.error : error.message }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue b/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
new file mode 100644
index 0000000..a82b7b0
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useSpeechSynthesis/demo.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSpeechSynthesis } from './index';
+
+const text = ref('The quick brown fox jumps over the lazy dog.');
+const pitch = ref(1);
+const rate = ref(1);
+const volume = ref(1);
+
+const {
+  isSupported,
+  isPlaying,
+  status,
+  speak,
+  stop,
+  toggle,
+} = useSpeechSynthesis(text, { pitch, rate, volume });
+
+const statusLabels: Record<string, string> = {
+  init: 'Ready',
+  play: 'Speaking',
+  pause: 'Paused',
+  end: 'Finished',
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Speech Synthesis is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-col gap-1.5">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Text to speak</label>
+        <textarea
+          v-model="text"
+          rows="2"
+          class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        />
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Rate</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ rate.toFixed(1) }}×</span>
+        </div>
+        <input v-model.number="rate" type="range" min="0.5" max="2" step="0.1" class="w-full accent-(--accent) cursor-pointer">
+
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pitch</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ pitch.toFixed(1) }}</span>
+        </div>
+        <input v-model.number="pitch" type="range" min="0" max="2" step="0.1" class="w-full accent-(--accent) cursor-pointer">
+
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ Math.round(volume * 100) }}%</span>
+        </div>
+        <input v-model.number="volume" type="range" min="0" max="1" step="0.05" class="w-full accent-(--accent) cursor-pointer">
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!text.trim()"
+          @click="speak()"
+        >
+          Speak
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!isPlaying && status !== 'pause'"
+          @click="toggle()"
+        >
+          {{ isPlaying ? 'Pause' : 'Resume' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="stop()"
+        >
+          Stop
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span class="inline-flex items-center gap-1.5 font-mono text-sm text-(--fg)">
+          <span
+            class="size-2 rounded-full transition-colors"
+            :class="isPlaying ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ statusLabels[status] }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useUserMedia/demo.vue b/vue/toolkit/src/composables/media/useUserMedia/demo.vue
new file mode 100644
index 0000000..44e6bab
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useUserMedia/demo.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, shallowRef, useTemplateRef, watch } from 'vue';
+import { useUserMedia } from './index';
+
+const facingMode = ref<'user' | 'environment'>('user');
+const lastError = shallowRef<string | undefined>();
+
+const video = useTemplateRef<HTMLVideoElement>('video');
+
+const {
+  isSupported,
+  stream,
+  enabled,
+  start,
+  stop,
+} = useUserMedia({
+  constraints: () => ({ video: { facingMode: facingMode.value }, audio: false }),
+  onError: (error) => {
+    lastError.value = error instanceof Error ? error.message : String(error);
+  },
+});
+
+// Attach the live stream to the <video> element whenever it changes.
+watch([stream, video], ([currentStream, el]) => {
+  if (el)
+    el.srcObject = currentStream ?? null;
+});
+
+async function handleStart(): Promise<void> {
+  lastError.value = undefined;
+  await start();
+}
+
+function swapCamera(): void {
+  facingMode.value = facingMode.value === 'user' ? 'environment' : 'user';
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Camera capture (getUserMedia) is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="relative aspect-video w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)">
+        <video
+          ref="video"
+          autoplay
+          playsinline
+          muted
+          class="size-full object-cover"
+          :class="{ 'opacity-0': !stream }"
+        />
+        <div
+          v-if="!stream"
+          class="absolute inset-0 flex flex-col items-center justify-center gap-1 text-(--fg-subtle)"
+        >
+          <span class="text-sm font-medium">Camera off</span>
+          <span class="text-xs">Press start to enable your webcam.</span>
+        </div>
+        <span
+          v-if="stream"
+          class="absolute left-2 top-2 inline-flex items-center gap-1.5 rounded-md bg-black/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur"
+        >
+          <span class="size-1.5 rounded-full bg-red-500 animate-pulse" />
+          LIVE
+        </span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          v-if="!enabled"
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="handleStart"
+        >
+          Start camera
+        </button>
+        <button
+          v-else
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="stop()"
+        >
+          Stop camera
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="swapCamera"
+        >
+          Flip
+        </button>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Facing</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">
+          {{ facingMode === 'user' ? 'Front (user)' : 'Back (environment)' }}
+        </span>
+      </div>
+
+      <p
+        v-if="lastError"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ lastError }}
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useWebWorker/demo.vue b/vue/toolkit/src/composables/media/useWebWorker/demo.vue
new file mode 100644
index 0000000..ac75179
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorker/demo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, shallowRef, watch } from 'vue';
+import { useWebWorker } from './index';
+
+// Build a self-contained worker from a Blob so the demo needs no external file.
+// The worker echoes back an uppercased, reversed version of the input string.
+function createWorker(): Worker {
+  const source = `
+    onmessage = (e) => {
+      const text = String(e.data ?? '');
+      const transformed = text.toUpperCase().split('').reverse().join('');
+      postMessage({ transformed, length: text.length, at: Date.now() });
+    };
+  `;
+  const blob = new Blob([source], { type: 'application/javascript' });
+  return new Worker(URL.createObjectURL(blob));
+}
+
+const input = ref('Hello from the main thread');
+const log = shallowRef<string[]>([]);
+
+const { data, post, isSupported } = useWebWorker<{ transformed: string; length: number; at: number }>(
+  () => createWorker(),
+);
+
+watch(data, (value) => {
+  if (value)
+    log.value = [`${value.length} chars → ${value.transformed}`, ...log.value].slice(0, 4);
+});
+
+function send(): void {
+  if (input.value.trim())
+    post(input.value);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Web Workers are not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex flex-col gap-1.5">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Message to worker</label>
+        <div class="flex items-center gap-2">
+          <input
+            v-model="input"
+            type="text"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+            placeholder="Type something…"
+            @keydown.enter="send"
+          >
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+            :disabled="!input.trim()"
+            @click="send"
+          >
+            Post
+          </button>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Latest reply</span>
+        <p
+          v-if="data"
+          class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) break-all"
+        >
+          {{ data.transformed }}
+        </p>
+        <p v-else class="text-sm text-(--fg-subtle)">
+          The worker runs off the main thread — post a message to see its reply.
+        </p>
+      </div>
+
+      <div v-if="log.length" class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">History</span>
+        <ul class="flex flex-col gap-1">
+          <li
+            v-for="(entry, i) in log"
+            :key="i"
+            class="rounded-md border border-(--border) bg-(--bg-inset) px-2.5 py-1.5 font-mono text-xs text-(--fg-muted) break-all"
+          >
+            {{ entry }}
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue b/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
new file mode 100644
index 0000000..e446b5a
--- /dev/null
+++ b/vue/toolkit/src/composables/media/useWebWorkerFn/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue';
+import { useWebWorkerFn } from './index';
+
+const iterations = ref(50_000_000);
+const result = shallowRef<number | undefined>();
+const elapsed = shallowRef<number | undefined>();
+
+// A deliberately heavy, self-contained computation: sum of primes' count.
+// Runs in a transient worker so the UI stays responsive while it churns.
+const { workerFn, workerStatus, workerTerminate, isSupported } = useWebWorkerFn(
+  (count: number) => {
+    let sum = 0;
+    for (let i = 0; i < count; i++)
+      sum += Math.sqrt(i) % 1;
+    return Math.round(sum);
+  },
+  { timeout: 15_000 },
+);
+
+const isRunning = computed(() => workerStatus.value === 'RUNNING');
+
+async function run(): Promise<void> {
+  result.value = undefined;
+  elapsed.value = undefined;
+  const startedAt = performance.now();
+  try {
+    result.value = await workerFn(iterations.value);
+    elapsed.value = Math.round(performance.now() - startedAt);
+  }
+  catch {
+    // Status reflects ERROR / TIMEOUT_EXPIRED; nothing else to do here.
+  }
+}
+
+const statusStyles: Record<string, string> = {
+  PENDING: 'text-(--fg-muted)',
+  RUNNING: 'text-sky-600 dark:text-sky-400',
+  SUCCESS: 'text-emerald-600 dark:text-emerald-400',
+  ERROR: 'text-red-600 dark:text-red-400',
+  TIMEOUT_EXPIRED: 'text-amber-600 dark:text-amber-400',
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-600 dark:text-amber-400"
+    >
+      Web Workers are not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Iterations</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg)">{{ iterations.toLocaleString() }}</span>
+        </div>
+        <input
+          v-model.number="iterations"
+          type="range"
+          min="10000000"
+          max="200000000"
+          step="10000000"
+          :disabled="isRunning"
+          class="w-full accent-(--accent) cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        >
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isRunning"
+          @click="run"
+        >
+          <span v-if="isRunning" class="size-2 rounded-full bg-(--accent-fg) animate-pulse" />
+          {{ isRunning ? 'Computing…' : 'Run in worker' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!isRunning"
+          @click="workerTerminate()"
+        >
+          Cancel
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Result</span>
+          <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+            {{ result?.toLocaleString() ?? '—' }}
+          </span>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Elapsed</span>
+          <span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+            {{ elapsed !== undefined ? `${elapsed}ms` : '—' }}
+          </span>
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span class="font-mono text-sm" :class="statusStyles[workerStatus]">{{ workerStatus }}</span>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        The heavy loop runs off the main thread, so this UI stays interactive while it computes.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue b/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
new file mode 100644
index 0000000..b40b510
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedAsync/demo.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computedAsync } from './index';
+
+interface User {
+  name: string;
+  role: string;
+  city: string;
+}
+
+const directory: Record<number, User> = {
+  1: { name: 'Ada Lovelace', role: 'Mathematician', city: 'London' },
+  2: { name: 'Grace Hopper', role: 'Rear Admiral', city: 'New York' },
+  3: { name: 'Alan Turing', role: 'Cryptanalyst', city: 'Cambridge' },
+  4: { name: 'Katherine Johnson', role: 'Aerospace Engineer', city: 'Hampton' },
+};
+
+const userId = ref(1);
+const evaluating = ref(false);
+const error = ref<string | null>(null);
+
+// Simulated network fetch with artificial latency.
+function fetchUser(id: number, signal: AbortSignal): Promise<User> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      const found = directory[id];
+      if (found)
+        resolve(found);
+      else
+        reject(new Error(`No user with id ${id}`));
+    }, 700);
+
+    signal.addEventListener('abort', () => {
+      clearTimeout(timer);
+      reject(new DOMException('Aborted', 'AbortError'));
+    });
+  });
+}
+
+const user = computedAsync<User | null>(
+  async (onCancel) => {
+    error.value = null;
+    const controller = new AbortController();
+    onCancel(() => controller.abort());
+    return fetchUser(userId.value, controller.signal);
+  },
+  null,
+  {
+    evaluating,
+    onError: (e) => {
+      if ((e as DOMException)?.name !== 'AbortError')
+        error.value = (e as Error).message;
+    },
+  },
+);
+
+const ids = [1, 2, 3, 4, 99];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fetch user by id</span>
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="id in ids"
+          :key="id"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="userId === id
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="userId = id"
+        >
+          #{{ id }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 min-h-32 flex flex-col justify-center">
+      <Transition name="fade" mode="out-in">
+        <div v-if="evaluating" key="loading" class="flex items-center gap-2 text-sm text-(--fg-muted)">
+          <span class="size-4 animate-spin rounded-full border-2 border-(--border) border-t-(--accent)" />
+          Resolving promise…
+        </div>
+
+        <div v-else-if="error" key="error" class="flex flex-col gap-1">
+          <span class="text-sm font-medium text-red-600 dark:text-red-400">Evaluation failed</span>
+          <span class="font-mono text-xs text-(--fg-muted)">{{ error }}</span>
+        </div>
+
+        <div v-else-if="user" key="user" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-(--fg)">{{ user.name }}</span>
+          <span class="text-sm text-(--fg-muted)">{{ user.role }}</span>
+          <span class="inline-flex w-fit items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            {{ user.city }}
+          </span>
+        </div>
+
+        <div v-else key="empty" class="text-sm text-(--fg-subtle)">
+          Awaiting first resolution…
+        </div>
+      </Transition>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">evaluating</span>
+      <span
+        class="inline-flex items-center gap-1.5 font-mono text-sm tabular-nums"
+        :class="evaluating ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'"
+      >
+        <span class="size-1.5 rounded-full" :class="evaluating ? 'bg-amber-500' : 'bg-emerald-500'" />
+        {{ evaluating }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/vue/toolkit/src/composables/reactivity/computedEager/demo.vue b/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
new file mode 100644
index 0000000..0da20c2
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedEager/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computedEager } from './index';
+
+const password = ref('hunter2');
+
+// All derived synchronously and eagerly on every keystroke — the cached
+// values are always fresh, no lazy read required.
+const length = computedEager(() => password.value.length);
+const hasUpper = computedEager(() => /[A-Z]/.test(password.value));
+const hasNumber = computedEager(() => /\d/.test(password.value));
+const hasSymbol = computedEager(() => /[^A-Z0-9]/i.test(password.value));
+
+const score = computedEager(() => {
+  const checks = [length.value >= 8, hasUpper.value, hasNumber.value, hasSymbol.value];
+  return checks.filter(Boolean).length;
+});
+
+const label = computedEager(() => ['Empty', 'Weak', 'Fair', 'Good', 'Strong'][score.value]);
+
+const rules = computedEager(() => [
+  { ok: length.value >= 8, text: 'At least 8 characters' },
+  { ok: hasUpper.value, text: 'An uppercase letter' },
+  { ok: hasNumber.value, text: 'A number' },
+  { ok: hasSymbol.value, text: 'A symbol' },
+]);
+
+const tones = [
+  'bg-(--border)',
+  'bg-red-500',
+  'bg-amber-500',
+  'bg-sky-500',
+  'bg-emerald-500',
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="pwd">Password</label>
+      <input
+        id="pwd"
+        v-model="password"
+        type="text"
+        placeholder="Type a password…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-sm text-(--fg-muted)">Strength</span>
+        <span class="font-mono text-sm font-medium tabular-nums text-(--fg)">{{ label }}</span>
+      </div>
+      <div class="flex gap-1.5">
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="h-1.5 flex-1 rounded-full transition-colors duration-300"
+          :class="i <= score ? tones[score] : 'bg-(--bg-inset)'"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <div
+        v-for="rule in rules"
+        :key="rule.text"
+        class="flex items-center gap-2 text-sm transition-colors"
+        :class="rule.ok ? 'text-(--fg)' : 'text-(--fg-subtle)'"
+      >
+        <span
+          class="grid size-4 place-items-center rounded-full text-[10px] transition-colors"
+          :class="rule.ok
+            ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+            : 'bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          {{ rule.ok ? '✓' : '○' }}
+        </span>
+        {{ rule.text }}
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex items-center justify-between">
+      <span class="text-(--fg-muted)">length</span>
+      <span>{{ length }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue b/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
new file mode 100644
index 0000000..85a6132
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/computedWithControl/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computedWithControl } from './index';
+
+// `source` controls recomputation; `tax` deliberately does NOT.
+const source = ref(100);
+const tax = ref(0);
+let recomputes = 0;
+
+const total = computedWithControl(source, () => {
+  recomputes++;
+  return Math.round(source.value * (1 + tax.value / 100));
+});
+
+const peeked = ref<number | null>(null);
+const detached = ref(false);
+
+function peek() {
+  // Read the cached value without registering tracking or recomputing.
+  peeked.value = total.peek();
+}
+
+function stop() {
+  total.stop();
+  detached.value = true;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Base price (tracked)</span>
+          <span class="font-mono text-sm tabular-nums text-(--accent-text)">{{ source }}</span>
+        </div>
+        <input
+          v-model.number="source"
+          type="range"
+          min="0"
+          max="500"
+          step="10"
+          class="w-full accent-(--accent)"
+        >
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tax % (untracked)</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ tax }}</span>
+        </div>
+        <input
+          v-model.number="tax"
+          type="range"
+          min="0"
+          max="30"
+          step="1"
+          class="w-full accent-(--fg-muted)"
+        >
+        <span class="text-xs text-(--fg-subtle)">
+          Changing tax alone won't recompute — trigger to pull it in.
+        </span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ total }}</span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-1.5">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="total.trigger()"
+      >
+        Trigger
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="peek"
+      >
+        Peek
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="detached"
+        @click="stop"
+      >
+        Stop
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-1.5 text-sm">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">Getter runs</span>
+        <span class="font-mono tabular-nums text-(--fg)">{{ recomputes }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">Last peek</span>
+        <span class="font-mono tabular-nums text-(--fg)">{{ peeked ?? '—' }}</span>
+      </div>
+      <div v-if="detached" class="text-xs text-amber-600 dark:text-amber-400">
+        Source watcher stopped — only Trigger updates the total now.
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/extendRef/demo.vue b/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
new file mode 100644
index 0000000..5f14467
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/extendRef/demo.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { extendRef } from './index';
+
+// A plain ref carrying its own derived + imperative API.
+const baseVolume = ref(40);
+
+const volume = extendRef(baseVolume, {
+  // reactive (unwrapped) — read without .value
+  percent: computed(() => `${baseVolume.value}%`),
+  isMuted: computed(() => baseVolume.value === 0),
+  // imperative helpers attached to the same ref
+  mute: () => { baseVolume.value = 0; },
+  max: () => { baseVolume.value = 100; },
+});
+
+let lastMuted = 50;
+function toggleMute() {
+  if (volume.isMuted) {
+    volume.value = lastMuted;
+  }
+  else {
+    lastMuted = volume.value || 50;
+    volume.mute();
+  }
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+        <span
+          class="font-mono text-3xl font-bold tabular-nums transition-colors"
+          :class="volume.isMuted ? 'text-(--fg-subtle)' : 'text-(--fg)'"
+        >{{ volume.percent }}</span>
+      </div>
+
+      <!-- bind the ref directly with v-model — it's still a ref -->
+      <input
+        v-model.number="volume"
+        type="range"
+        min="0"
+        max="100"
+        class="w-full accent-(--accent)"
+      >
+
+      <div class="flex gap-1.5">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggleMute"
+        >
+          {{ volume.isMuted ? 'Unmute' : 'Mute' }}
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="volume.max()"
+        >
+          Max
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">volume.value</span>
+        <span class="text-(--fg)">{{ volume.value }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">volume.percent</span>
+        <span class="text-(--fg)">{{ volume.percent }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">volume.isMuted</span>
+        <span :class="volume.isMuted ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'">
+          {{ volume.isMuted }}
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      One ref carries its value, derived properties, and methods — no destructuring of an object needed.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue b/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
new file mode 100644
index 0000000..7532ab3
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveComputed/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { reactiveComputed } from './index';
+
+const price = ref(24);
+const quantity = ref(3);
+const discount = ref(10);
+
+// One getter, exposed as a reactive object whose fields stay independently
+// reactive — and writable back through to the source refs.
+const cart = reactiveComputed(() => {
+  const subtotal = price.value * quantity.value;
+  const saved = Math.round((subtotal * discount.value) / 100);
+  return {
+    subtotal,
+    saved,
+    total: subtotal - saved,
+    discount, // a ref — unwrapped and writable through the proxy
+  };
+});
+
+const presets = [0, 10, 25, 50];
+
+function setDiscount(value: number) {
+  // Writes through the reactive proxy back to the `discount` ref.
+  cart.discount = value;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="grid grid-cols-2 gap-3">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Unit price</span>
+          <input
+            v-model.number="price"
+            type="number"
+            min="0"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Quantity</span>
+          <input
+            v-model.number="quantity"
+            type="number"
+            min="1"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Discount</span>
+        <div class="flex flex-wrap gap-1.5">
+          <button
+            v-for="p in presets"
+            :key="p"
+            type="button"
+            class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+            :class="cart.discount === p
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="setDiscount(p)"
+          >
+            {{ p }}%
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
+      <div class="flex items-center justify-between text-(--fg-muted)">
+        <span>Subtotal</span>
+        <span class="text-(--fg)">${{ cart.subtotal }}</span>
+      </div>
+      <div class="flex items-center justify-between text-(--fg-muted)">
+        <span>Saved ({{ cart.discount }}%)</span>
+        <span class="text-emerald-600 dark:text-emerald-400">-${{ cart.saved }}</span>
+      </div>
+      <div class="h-px bg-(--border)" />
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg)">Total</span>
+        <span class="text-2xl font-bold text-(--fg)">${{ cart.total }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Each field reads from a single cached getter; writing <code class="text-(--fg-muted)">cart.discount</code> flows back to the source ref.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue b/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
new file mode 100644
index 0000000..fb97877
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactiveOmit/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { reactiveOmit } from './index';
+
+const user = reactive({
+  name: 'Ada Lovelace',
+  email: 'ada@analytical.engine',
+  role: 'admin',
+  token: 'sk_live_8f2a91c3',
+  active: true,
+});
+
+// Omit listed keys — stays reactive as the source changes.
+const safeUser = reactiveOmit(user, 'token', ['email']);
+
+// Predicate form — drop every boolean field.
+const noFlags = reactiveOmit(user, value => typeof value === 'boolean');
+
+const roles = ['admin', 'editor', 'viewer'] as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Source object
+      </p>
+
+      <label class="flex flex-col gap-1">
+        <span class="text-xs font-medium text-(--fg-muted)">name</span>
+        <input
+          v-model="user.name"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium text-(--fg-muted)">role</span>
+        <div class="flex gap-1.5">
+          <button
+            v-for="r in roles"
+            :key="r"
+            type="button"
+            class="rounded-md border px-2 py-0.5 text-xs font-medium transition cursor-pointer"
+            :class="user.role === r
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg-muted) hover:border-(--border-strong)'"
+            @click="user.role = r"
+          >
+            {{ r }}
+          </button>
+        </div>
+      </div>
+
+      <label class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium text-(--fg-muted)">active</span>
+        <button
+          type="button"
+          class="relative h-5 w-9 rounded-full transition cursor-pointer"
+          :class="user.active ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          role="switch"
+          :aria-checked="user.active"
+          @click="user.active = !user.active"
+        >
+          <span
+            class="absolute top-0.5 size-4 rounded-full bg-white shadow transition-all"
+            :class="user.active ? 'left-4' : 'left-0.5'"
+          />
+        </button>
+      </label>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Omit <code class="text-(--accent-text)">token</code>, <code class="text-(--accent-text)">email</code>
+      </p>
+      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ safeUser }}</pre>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Predicate: drop booleans
+      </p>
+      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ noFlags }}</pre>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue b/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
new file mode 100644
index 0000000..72eaf78
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/reactivePick/demo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { reactivePick } from './index';
+
+const settings = reactive({
+  brightness: 60,
+  contrast: 40,
+  theme: 'midnight',
+  autosave: true,
+  syncedAt: '2026-06-08',
+});
+
+// Live two-way view limited to the picked keys — writes flow back to `settings`.
+const display = reactivePick(settings, 'brightness', 'contrast');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-4 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Picked view (two-way)
+      </p>
+
+      <label class="flex flex-col gap-1.5">
+        <span class="flex items-center justify-between text-sm text-(--fg)">
+          <span>brightness</span>
+          <span class="font-mono tabular-nums text-(--fg-muted)">{{ display.brightness }}</span>
+        </span>
+        <input
+          v-model.number="display.brightness"
+          type="range"
+          min="0"
+          max="100"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </label>
+
+      <label class="flex flex-col gap-1.5">
+        <span class="flex items-center justify-between text-sm text-(--fg)">
+          <span>contrast</span>
+          <span class="font-mono tabular-nums text-(--fg-muted)">{{ display.contrast }}</span>
+        </span>
+        <input
+          v-model.number="display.contrast"
+          type="range"
+          min="0"
+          max="100"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </label>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Full source object
+      </p>
+      <pre class="overflow-x-auto rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg)">{{ settings }}</pre>
+      <p class="mt-2 text-xs text-(--fg-subtle)">
+        Editing the picked view above writes straight back to the source.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue b/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
new file mode 100644
index 0000000..09717af
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refAutoReset/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { refAutoReset } from './index';
+
+// Reactive delay — the ref resets `delay`ms after the most recent write.
+const delay = ref(1500);
+
+// Reverts to 'Idle' once writes stop arriving.
+const status = refAutoReset('Idle', delay);
+const copied = refAutoReset(false, 1200);
+
+function flash(message: string) {
+  status.value = message;
+}
+
+async function copy() {
+  copied.value = true;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Live value
+      </p>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-lg font-semibold tabular-nums text-(--fg)">{{ status }}</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="status === 'Idle'
+            ? 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'
+            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          {{ status === 'Idle' ? 'reset' : 'active' }}
+        </span>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="flash('Saved')"
+        >
+          Save
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="flash('Synced')"
+        >
+          Sync
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="flash('Uploading…')"
+        >
+          Upload
+        </button>
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="flex items-center justify-between text-sm text-(--fg)">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">reset delay</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ delay }}ms</span>
+      </span>
+      <input
+        v-model.number="delay"
+        type="range"
+        min="500"
+        max="4000"
+        step="250"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </label>
+
+    <div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-sm text-(--fg)">Copy-to-clipboard pattern</span>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="copy"
+      >
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue b/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
new file mode 100644
index 0000000..91d886e
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDebounced/demo.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { refDebounced } from './index';
+
+const search = ref('Vue composables');
+const ms = ref(400);
+
+// Read-only mirror that only updates after `ms` of quiet, with a maxWait ceiling.
+const debounced = refDebounced(search, ms, { maxWait: 2000 });
+
+const pending = computed(() => search.value !== debounced.value);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Type to search
+      </span>
+      <input
+        v-model="search"
+        placeholder="Start typing…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="flex items-center justify-between text-sm text-(--fg)">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">debounce</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ ms }}ms</span>
+      </span>
+      <input
+        v-model.number="ms"
+        type="range"
+        min="100"
+        max="1500"
+        step="50"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </label>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Source
+        </p>
+        <p class="truncate font-mono text-sm text-(--fg)">{{ search || '—' }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <p class="mb-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Debounced
+          <span
+            v-if="pending"
+            class="size-1.5 animate-pulse rounded-full bg-amber-500"
+            aria-label="pending"
+          />
+        </p>
+        <p class="truncate font-mono text-sm text-(--accent-text)">{{ debounced || '—' }}</p>
+      </div>
+    </div>
+
+    <p
+      class="rounded-lg border px-3 py-2 text-center text-xs font-medium transition"
+      :class="pending
+        ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+        : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+    >
+      {{ pending ? 'Waiting for input to settle…' : 'Synced — debounced value caught up' }}
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refDefault/demo.vue b/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
new file mode 100644
index 0000000..2b7750f
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refDefault/demo.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { refDefault } from './index';
+
+// Source may legitimately hold null (e.g. "not set yet").
+const raw = ref<string | null>(null);
+
+// Reactive fallback — `name` reads as `fallback` whenever `raw` is null/undefined.
+const fallback = ref('Anonymous');
+const name = refDefault(raw, fallback);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Resolved value
+      </p>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-lg font-semibold text-(--fg)">{{ name }}</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="raw == null
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
+        >
+          {{ raw == null ? 'using default' : 'from source' }}
+        </span>
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Source ref (writes pass through)
+      </span>
+      <div class="flex gap-2">
+        <input
+          v-model="name"
+          placeholder="Type a name…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="button"
+          class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="raw == null"
+          @click="raw = null"
+        >
+          Clear
+        </button>
+      </div>
+      <span class="font-mono text-xs text-(--fg-subtle)">
+        raw.value = {{ raw === null ? 'null' : `"${raw}"` }}
+      </span>
+    </label>
+
+    <label class="flex flex-col gap-1.5 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Reactive fallback
+      </span>
+      <input
+        v-model="fallback"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <span class="text-xs text-(--fg-subtle)">
+        Changes here update the resolved value while the source is empty.
+      </span>
+    </label>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue b/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
new file mode 100644
index 0000000..ac0fc31
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refThrottled/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { refThrottled } from './index';
+
+const delay = ref(500);
+
+// A high-frequency source the throttled ref will rate-limit.
+const source = ref(0);
+const throttled = refThrottled(source, delay.value);
+
+// Track how often each side actually updates so the savings are visible.
+const sourceUpdates = ref(0);
+const throttledUpdates = ref(0);
+
+let lastThrottled = throttled.value;
+const lag = computed(() => source.value - throttled.value);
+
+let timer: ReturnType<typeof setInterval> | undefined;
+const running = ref(false);
+
+function tick() {
+  source.value++;
+  sourceUpdates.value++;
+  if (throttled.value !== lastThrottled) {
+    lastThrottled = throttled.value;
+    throttledUpdates.value++;
+  }
+}
+
+function start() {
+  if (running.value)
+    return;
+  running.value = true;
+  timer = setInterval(tick, 60);
+}
+
+function stop() {
+  running.value = false;
+  if (timer)
+    clearInterval(timer);
+  timer = undefined;
+}
+
+function reset() {
+  stop();
+  source.value = 0;
+  sourceUpdates.value = 0;
+  throttledUpdates.value = 0;
+  lastThrottled = throttled.value;
+}
+
+onUnmounted(stop);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-1">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ source }}</span>
+        <span class="text-xs text-(--fg-muted)">{{ sourceUpdates }} updates</span>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-1">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Throttled</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--accent-text)">{{ throttled }}</span>
+        <span class="text-xs text-(--fg-muted)">{{ throttledUpdates }} updates</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lag behind source</span>
+      <span class="font-mono text-sm tabular-nums text-(--fg)">+{{ lag }}</span>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Throttle window: {{ delay }}ms
+      </span>
+      <input
+        v-model.number="delay"
+        type="range"
+        min="100"
+        max="1500"
+        step="100"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+      <span class="text-xs text-(--fg-subtle)">Reset to apply a new window</span>
+    </label>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="running"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="start"
+      >
+        Run (60ms)
+      </button>
+      <button
+        type="button"
+        :disabled="!running"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="stop"
+      >
+        Pause
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset"
+      >
+        Reset
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue b/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
new file mode 100644
index 0000000..f829e24
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/refWithControl/demo.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { refWithControl } from './index';
+
+interface LogEntry {
+  id: number;
+  message: string;
+  vetoed: boolean;
+}
+
+const log = ref<LogEntry[]>([]);
+let logId = 0;
+
+function push(message: string, vetoed = false) {
+  log.value.unshift({ id: logId++, message, vetoed });
+  if (log.value.length > 6)
+    log.value.pop();
+}
+
+// Only values within 0..10 are accepted; anything else is vetoed.
+const volume = refWithControl(5, {
+  onBeforeChange: (value) => {
+    if (value < 0 || value > 10) {
+      push(`vetoed ${value} (out of 0..10)`, true);
+      return false;
+    }
+  },
+  onChanged: (value, old) => push(`changed ${old} -> ${value}`),
+});
+
+// Read without registering tracking — does not show up reactively.
+const peeked = ref(volume.peek());
+function peek() {
+  peeked.value = volume.peek();
+}
+
+// Write without triggering effects: the bound display stays stale until
+// a tracked read/write happens, demonstrating the silent set.
+function silentBump() {
+  volume.lay(Math.min(10, volume.peek() + 1));
+  peeked.value = volume.peek();
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume (tracked)</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+      </div>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="volume.value--"
+        >
+          - 1
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="volume.value++"
+        >
+          + 1
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="volume.value = 99"
+        >
+          Set 99
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">peek() snapshot</span>
+        <span class="text-xs text-(--fg-subtle)">untracked read; lay() writes silently</span>
+      </div>
+      <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ peeked }}</span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="peek"
+      >
+        peek()
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="silentBump"
+      >
+        lay() +1 silent
+      </button>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Hooks log</span>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 min-h-24 flex flex-col gap-1">
+        <p v-if="!log.length" class="text-xs text-(--fg-subtle)">
+          Try setting volume to 99 to see onBeforeChange veto.
+        </p>
+        <p
+          v-for="entry in log"
+          :key="entry.id"
+          class="font-mono text-xs tabular-nums"
+          :class="entry.vetoed ? 'text-red-600 dark:text-red-400' : 'text-(--fg-muted)'"
+        >
+          {{ entry.vetoed ? '✗' : '✓' }} {{ entry.message }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/syncRef/demo.vue b/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
new file mode 100644
index 0000000..539215c
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/syncRef/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { onUnmounted, ref } from 'vue';
+import { syncRef } from './index';
+
+// Two refs kept in sync with a transform: Celsius <-> Fahrenheit.
+const celsius = ref(20);
+const fahrenheit = ref(68);
+
+const { stop } = syncRef(celsius, fahrenheit, {
+  direction: 'both',
+  transform: {
+    ltr: c => Math.round((c * 9) / 5 + 32),
+    rtl: f => Math.round(((f - 32) * 5) / 9),
+  },
+});
+
+const synced = ref(true);
+function toggleSync() {
+  if (synced.value) {
+    stop();
+    synced.value = false;
+  }
+}
+
+onUnmounted(stop);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Two-way sync + transform</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="synced
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="synced ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ synced ? 'live' : 'stopped' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <label class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Celsius</span>
+        <input
+          v-model.number="celsius"
+          type="number"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-lg font-mono tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fahrenheit</span>
+        <input
+          v-model.number="fahrenheit"
+          type="number"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-lg font-mono tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      {{ celsius }}°C ⇄ {{ fahrenheit }}°F
+    </div>
+
+    <input
+      v-model.number="celsius"
+      type="range"
+      min="-20"
+      max="40"
+      step="1"
+      class="w-full accent-(--accent) cursor-pointer"
+      aria-label="Celsius slider"
+    >
+
+    <button
+      type="button"
+      :disabled="!synced"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+      @click="toggleSync"
+    >
+      Stop synchronization
+    </button>
+    <p v-if="!synced" class="text-xs text-(--fg-subtle) -mt-2">
+      Watchers torn down — the two refs now drift independently.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/toReactive/demo.vue b/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
new file mode 100644
index 0000000..1838137
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/toReactive/demo.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { toReactive } from './index';
+
+interface Profile {
+  name: string;
+  role: string;
+  level: number;
+}
+
+// A ref holding an object, exposed as a reactive proxy. Writes to the proxy
+// flow straight through to source.value, and reads survive reassignment.
+const source = ref<Profile>({ name: 'Ada Lovelace', role: 'Engineer', level: 3 });
+const profile = toReactive(source);
+
+const presets: Profile[] = [
+  { name: 'Ada Lovelace', role: 'Engineer', level: 3 },
+  { name: 'Alan Turing', role: 'Researcher', level: 5 },
+  { name: 'Grace Hopper', role: 'Architect', level: 8 },
+];
+
+// Reassign the whole underlying ref — the proxy keeps pointing at fresh data.
+function loadPreset(p: Profile) {
+  source.value = { ...p };
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Name</span>
+        <input
+          v-model="profile.name"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Role</span>
+        <input
+          v-model="profile.role"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Level: {{ profile.level }}
+        </span>
+        <input
+          v-model.number="profile.level"
+          type="range"
+          min="1"
+          max="10"
+          step="1"
+          class="w-full accent-(--accent) cursor-pointer"
+        >
+      </label>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source.value (the backing ref)</span>
+      <pre class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) overflow-x-auto">{{ JSON.stringify(source, null, 2) }}</pre>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Reassign the whole ref</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="preset in presets"
+          :key="preset.name"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="loadPreset(preset)"
+        >
+          {{ preset.name.split(' ')[0] }}
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        The proxy survives reassignment — fields above update without re-binding.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useCached/demo.vue b/vue/toolkit/src/composables/reactivity/useCached/demo.vue
new file mode 100644
index 0000000..8a22084
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useCached/demo.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useCached } from './index';
+
+// Source the user edits freely.
+const source = ref('Hello');
+
+// Default cache: updates on any strict-inequality change.
+const cachedDefault = useCached(source);
+
+// Custom cache: treats values equal when they match case-insensitively, so
+// "hello" / "HELLO" never refresh the cache once one of them is stored.
+const cachedInsensitive = useCached(
+  source,
+  (a, b) => a.toLowerCase() === b.toLowerCase(),
+);
+
+const samples = ['Hello', 'hello', 'HELLO', 'World', 'world!'];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source ref</span>
+      <input
+        v-model="source"
+        type="text"
+        placeholder="Type to change the source"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="sample in samples"
+        :key="sample"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="source = sample"
+      >
+        {{ sample }}
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex flex-col">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Default cache</span>
+          <span class="text-xs text-(--fg-subtle)">a === b</span>
+        </div>
+        <span class="font-mono text-sm tabular-nums text-(--fg) truncate">"{{ cachedDefault }}"</span>
+      </div>
+      <div class="h-px bg-(--border)" />
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex flex-col">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Case-insensitive cache</span>
+          <span class="text-xs text-(--fg-subtle)">toLowerCase() match</span>
+        </div>
+        <span class="font-mono text-sm tabular-nums text-(--accent-text) truncate">"{{ cachedInsensitive }}"</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Toggle between <span class="font-mono">Hello</span>, <span class="font-mono">hello</span> and
+      <span class="font-mono">HELLO</span>: the default cache follows every change, while the
+      case-insensitive cache keeps its first stored casing.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useCloned/demo.vue b/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
new file mode 100644
index 0000000..39ad7d0
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useCloned/demo.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useCloned } from './index';
+
+const original = reactive({
+  name: 'Ada Lovelace',
+  role: 'Maintainer',
+  tags: ['core', 'docs'],
+});
+
+const { cloned, isModified, sync } = useCloned(() => ({ ...original, tags: [...original.tags] }));
+
+const roles = ['Maintainer', 'Contributor', 'Reviewer'];
+
+function bumpOriginal() {
+  original.role = roles[(roles.indexOf(original.role) + 1) % roles.length];
+}
+
+function addTag() {
+  cloned.value.tags.push(`tag-${cloned.value.tags.length + 1}`);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useCloned</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isModified
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="isModified ? 'bg-amber-500' : 'bg-emerald-500'"
+        />
+        {{ isModified ? 'Modified' : 'In sync' }}
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</p>
+        <dl class="space-y-1.5 text-sm text-(--fg)">
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">name</dt>
+            <dd class="truncate font-medium">{{ original.name }}</dd>
+          </div>
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">role</dt>
+            <dd class="font-medium">{{ original.role }}</dd>
+          </div>
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">tags</dt>
+            <dd class="font-mono text-xs text-(--fg-muted)">{{ original.tags.length }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cloned (editable)</p>
+        <dl class="space-y-1.5 text-sm text-(--fg)">
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">name</dt>
+            <dd class="truncate font-medium">{{ cloned.name }}</dd>
+          </div>
+          <div class="flex justify-between gap-2">
+            <dt class="text-(--fg-muted)">role</dt>
+            <dd class="font-medium">{{ cloned.role }}</dd>
+          </div>
+          <div class="flex flex-wrap justify-end gap-1">
+            <span
+              v-for="tag in cloned.tags"
+              :key="tag"
+              class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--fg-muted)"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        @click="bumpOriginal"
+      >
+        Cycle source role
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        @click="addTag"
+      >
+        Edit clone
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isModified"
+        @click="sync()"
+      >
+        Re-sync from source
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Editing the source auto-resyncs the clone. Editing the clone marks it modified without touching the source.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue b/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
new file mode 100644
index 0000000..ddc4b6d
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useDebounceFn/demo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDebounceFn } from './index';
+
+const delay = ref(500);
+const query = ref('');
+const calls = ref(0);
+const lastResult = ref('');
+const log = ref<string[]>([]);
+
+const runSearch = useDebounceFn((term: string) => {
+  calls.value++;
+  const result = term.trim() ? `${term.length} matches for "${term.trim()}"` : 'idle';
+  lastResult.value = result;
+  log.value = [`#${calls.value} → ${result}`, ...log.value].slice(0, 5);
+  return result;
+}, delay, { maxWait: 2000 });
+
+function onInput(event: Event) {
+  query.value = (event.target as HTMLInputElement).value;
+  runSearch(query.value);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useDebounceFn</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="runSearch.isPending.value
+          ? 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="runSearch.isPending.value ? 'animate-pulse bg-sky-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ runSearch.isPending.value ? 'Pending' : 'Settled' }}
+      </span>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="search">
+        Type to search
+      </label>
+      <input
+        id="search"
+        :value="query"
+        type="text"
+        placeholder="Search the docs…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @input="onInput"
+      >
+    </div>
+
+    <div class="flex items-center gap-3">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="delay">
+        Delay
+      </label>
+      <input
+        id="delay"
+        v-model.number="delay"
+        type="range"
+        min="0"
+        max="1500"
+        step="100"
+        class="flex-1 accent-(--accent)"
+      >
+      <span class="w-16 text-right font-mono text-sm tabular-nums text-(--fg)">{{ delay }}ms</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Invocations</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ calls }}</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last result</p>
+        <p class="mt-1 truncate font-mono text-sm text-(--fg)">{{ lastResult || '—' }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!runSearch.isPending.value"
+        @click="runSearch.flush()"
+      >
+        Flush now
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!runSearch.isPending.value"
+        @click="runSearch.cancel()"
+      >
+        Cancel
+      </button>
+    </div>
+
+    <div v-if="log.length" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent calls</p>
+      <ul class="space-y-1 font-mono text-xs text-(--fg-muted)">
+        <li v-for="(entry, i) in log" :key="i" class="truncate">{{ entry }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue b/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
new file mode 100644
index 0000000..dbe19dc
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/usePrevious/demo.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { usePrevious } from './index';
+
+const themes = ['Light', 'Dark', 'System', 'Sepia', 'High contrast'];
+const selected = ref(themes[0]);
+const previous = usePrevious(selected, 'None');
+
+function pick(theme: string) {
+  selected.value = theme;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">usePrevious</span>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Current</p>
+        <p class="mt-1 truncate text-2xl font-bold text-(--fg)">{{ selected }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-inset) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Previous</p>
+        <p class="mt-1 truncate text-2xl font-bold text-(--fg-muted)">{{ previous }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Select a theme</p>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="theme in themes"
+          :key="theme"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="theme === selected
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:border-(--border-strong) hover:bg-(--bg-inset)'"
+          @click="pick(theme)"
+        >
+          {{ theme }}
+        </button>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Seeded with <span class="font-mono text-(--fg-muted)">"None"</span> as the initial previous value until the source first changes.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue b/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
new file mode 100644
index 0000000..2261c7f
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useSyncRefs/demo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSyncRefs } from './index';
+
+// A single source kept in lock-step with several independent target refs.
+const source = ref('#6366f1');
+
+const swatch = ref(source.value);
+const label = ref(source.value);
+const hex = ref(source.value);
+
+useSyncRefs(source, [swatch, label, hex]);
+
+const presets = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#0ea5e9'];
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useSyncRefs</span>
+
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="color">
+        Source ref
+      </label>
+      <div class="flex items-center gap-2">
+        <input
+          id="color"
+          v-model="source"
+          type="color"
+          class="h-9 w-12 shrink-0 cursor-pointer rounded-lg border border-(--border) bg-(--bg)"
+        >
+        <input
+          v-model="source"
+          type="text"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 font-mono text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">Three independent target refs stay synced to the source:</p>
+
+    <div class="grid grid-cols-3 gap-3">
+      <div class="flex flex-col items-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">swatch</span>
+        <span
+          class="size-10 rounded-lg border border-(--border-strong) shadow-sm transition"
+          :style="{ backgroundColor: swatch }"
+        />
+      </div>
+      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">label</span>
+        <span class="font-mono text-xs text-(--fg)">{{ label }}</span>
+      </div>
+      <div class="flex flex-col items-center justify-center gap-2 rounded-xl border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">hex</span>
+        <span class="font-mono text-xs uppercase text-(--fg)">{{ hex }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="preset in presets"
+        :key="preset"
+        type="button"
+        class="size-7 rounded-md border border-(--border) transition hover:scale-110 active:scale-95 cursor-pointer"
+        :style="{ backgroundColor: preset }"
+        :aria-label="`Set source to ${preset}`"
+        @click="source = preset"
+      />
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue b/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
new file mode 100644
index 0000000..392a0d0
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useThrottleFn/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useThrottleFn } from './index';
+
+const delay = ref(400);
+const moves = ref(0);
+const fires = ref(0);
+const position = ref({ x: 0, y: 0 });
+
+const onMove = useThrottleFn((x: number, y: number) => {
+  fires.value++;
+  position.value = { x, y };
+}, delay, true, true);
+
+function handlePointer(event: PointerEvent) {
+  moves.value++;
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  const x = Math.round(((event.clientX - rect.left) / rect.width) * 100);
+  const y = Math.round(((event.clientY - rect.top) / rect.height) * 100);
+  onMove(Math.max(0, Math.min(100, x)), Math.max(0, Math.min(100, y)));
+}
+
+const ratio = () => (moves.value ? Math.round((fires.value / moves.value) * 100) : 0);
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useThrottleFn</span>
+
+    <div
+      class="relative h-40 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) touch-none"
+      @pointermove="handlePointer"
+    >
+      <span
+        class="pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) shadow-md transition-all duration-150 ease-out"
+        :style="{ left: `${position.x}%`, top: `${position.y}%` }"
+      />
+      <span class="pointer-events-none absolute inset-x-0 bottom-2 text-center text-xs text-(--fg-subtle)">
+        Move your pointer over this area
+      </span>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="window">
+        Window
+      </label>
+      <input
+        id="window"
+        v-model.number="delay"
+        type="range"
+        min="0"
+        max="1000"
+        step="50"
+        class="flex-1 accent-(--accent)"
+      >
+      <span class="w-16 text-right font-mono text-sm tabular-nums text-(--fg)">{{ delay }}ms</span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Events</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ moves }}</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Fired</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--accent-text)">{{ fires }}</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ran</p>
+        <p class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ratio() }}%</p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-2">
+      <span class="rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs text-(--fg-muted)">
+        x: {{ position.x }} · y: {{ position.y }}
+      </span>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
+        @click="onMove.flush()"
+      >
+        Flush trailing
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Leading + trailing throttling caps the handler to once per window — drag faster and watch the fired count lag behind events.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue b/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
new file mode 100644
index 0000000..80591a2
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToNumber/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToNumber } from './index';
+
+// Source string the user edits — kept as a string so we can demo real parsing.
+const source = ref('42.50');
+
+// The composable reads its options once at setup, so each variant below is its
+// own instance fed the SAME reactive source. They all recompute as you type.
+const asFloat = useToNumber(() => source.value, { method: 'parseFloat' });
+const asInt = useToNumber(() => source.value, { method: 'parseInt', radix: 10 });
+const safe = useToNumber(() => source.value, { nanToZero: true });
+const clamped = useToNumber(() => source.value, { min: 0, max: 100, nanToZero: true });
+
+const variants = [
+  { label: 'parseFloat', desc: 'default', value: asFloat },
+  { label: 'parseInt', desc: 'radix 10', value: asInt },
+  { label: 'nanToZero', desc: 'NaN → 0', value: safe },
+  { label: 'clamp 0–100', desc: 'min / max', value: clamped },
+];
+
+const presets = ['42.50', '3.14159', '255.9', 'abc', '-12'];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source value</span>
+      <input
+        v-model="source"
+        type="text"
+        placeholder="Type a number…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="flex flex-wrap gap-1.5">
+      <button
+        v-for="v in presets"
+        :key="v"
+        type="button"
+        class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:bg-(--bg-elevated) hover:border-(--border-strong) cursor-pointer"
+        @click="source = v"
+      >
+        {{ v }}
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) divide-y divide-(--border)">
+      <div
+        v-for="variant in variants"
+        :key="variant.label"
+        class="flex items-center justify-between gap-3 px-4 py-2.5"
+      >
+        <div class="flex flex-col">
+          <span class="font-mono text-sm text-(--fg)">{{ variant.label }}</span>
+          <span class="text-xs text-(--fg-subtle)">{{ variant.desc }}</span>
+        </div>
+        <span
+          class="font-mono text-lg font-semibold tabular-nums"
+          :class="Number.isNaN(variant.value) ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg)'"
+        >
+          {{ Number.isNaN(variant.value) ? 'NaN' : variant.value }}
+        </span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+      One reactive source, four <span class="font-mono text-(--accent-text)">useToNumber</span>
+      instances. Try <span class="font-mono text-(--fg-muted)">abc</span> to see how
+      <span class="font-mono text-(--fg-muted)">nanToZero</span> and clamping tame invalid input.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/reactivity/useToString/demo.vue b/vue/toolkit/src/composables/reactivity/useToString/demo.vue
new file mode 100644
index 0000000..e1a3be3
--- /dev/null
+++ b/vue/toolkit/src/composables/reactivity/useToString/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useToString } from './index';
+
+// A handful of representative source types — useToString coerces each with String().
+const count = ref(7);
+const ratio = ref(0.5);
+const enabled = ref(true);
+const tags = ref(['vue', 'reactivity', 'docs']);
+const meta = computed(() => ({ id: count.value, ok: enabled.value }));
+
+// useToString returns a ComputedRef<string> — bind directly, never destructure.
+const countStr = useToString(count);
+const ratioStr = useToString(() => ratio.value.toFixed(2));
+const boolStr = useToString(enabled);
+const tagsStr = useToString(tags);
+const metaStr = useToString(meta);
+
+const rows = [
+  { type: 'number', value: countStr },
+  { type: 'getter', value: ratioStr },
+  { type: 'boolean', value: boolStr },
+  { type: 'array', value: tagsStr },
+  { type: 'object', value: metaStr },
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live source values</span>
+
+      <div class="flex items-center justify-between gap-3">
+        <label class="text-sm text-(--fg)">count</label>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="count--"
+          >−</button>
+          <span class="font-mono text-sm tabular-nums text-(--fg) w-6 text-center">{{ count }}</span>
+          <button
+            type="button"
+            class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+            @click="count++"
+          >+</button>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <label class="text-sm text-(--fg)" for="ratio">ratio</label>
+        <input id="ratio" v-model.number="ratio" type="range" min="0" max="1" step="0.01" class="accent-(--accent) cursor-pointer">
+      </div>
+
+      <label class="flex items-center justify-between gap-3 cursor-pointer">
+        <span class="text-sm text-(--fg)">enabled</span>
+        <input v-model="enabled" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+      </label>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) divide-y divide-(--border) font-mono text-sm">
+      <div
+        v-for="row in rows"
+        :key="row.type"
+        class="flex items-center gap-3 px-3 py-2"
+      >
+        <span class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) shrink-0">
+          {{ row.type }}
+        </span>
+        <span class="text-(--fg) truncate">"{{ row.value }}"</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+      <span class="font-mono text-(--accent-text)">useToString</span> is
+      <span class="font-mono text-(--fg-muted)">computed(() =&gt; String(toValue(v)))</span> —
+      it stringifies refs, getters, and reactive objects alike.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue b/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
new file mode 100644
index 0000000..58a9d0f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onKeyStroke/demo.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { onKeyStroke } from './index';
+
+// Scope the listener to a focusable capture area so the demo never hijacks the
+// page's global keyboard. onKeyStroke takes a MaybeRefOrGetter target via options.
+const capture = useTemplateRef<HTMLDivElement>('capture');
+const dedupe = ref(true);
+
+const lastKey = ref('');
+const lastCode = ref('');
+const pressCount = ref(0);
+const log = ref<string[]>([]);
+
+// Arrow keys drive a little cursor — demonstrates a string[] key filter that
+// can call preventDefault (listener is non-passive by default).
+const pos = ref({ x: 2, y: 2 });
+const GRID = 5;
+
+// Every key: record the most recent stroke for the readout.
+onKeyStroke(
+  (event) => {
+    lastKey.value = event.key;
+    lastCode.value = event.code;
+    pressCount.value++;
+    log.value = [`${event.key === ' ' ? 'Space' : event.key}`, ...log.value].slice(0, 8);
+    return true;
+  },
+  { target: capture, dedupe },
+);
+
+// Arrow filter: move within the grid, prevent page scroll.
+onKeyStroke(
+  ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'],
+  (event) => {
+    event.preventDefault();
+    if (event.key === 'ArrowUp') pos.value.y = Math.max(0, pos.value.y - 1);
+    if (event.key === 'ArrowDown') pos.value.y = Math.min(GRID - 1, pos.value.y + 1);
+    if (event.key === 'ArrowLeft') pos.value.x = Math.max(0, pos.value.x - 1);
+    if (event.key === 'ArrowRight') pos.value.x = Math.min(GRID - 1, pos.value.x + 1);
+  },
+  { target: capture },
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      ref="capture"
+      tabindex="0"
+      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-3 outline-none transition focus:border-(--accent) focus:ring-2 focus:ring-(--ring)"
+    >
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Click here, then press keys / arrows
+      </span>
+
+      <div class="grid grid-cols-5 gap-1.5">
+        <div
+          v-for="i in GRID * GRID"
+          :key="i"
+          class="size-7 rounded-md border transition-colors"
+          :class="(i - 1) % GRID === pos.x && Math.floor((i - 1) / GRID) === pos.y
+            ? 'bg-(--accent) border-transparent'
+            : 'bg-(--bg-inset) border-(--border)'"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <span class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-2.5 py-1 font-mono text-sm font-semibold text-(--fg)">
+          {{ lastKey === ' ' ? 'Space' : (lastKey || '—') }}
+        </span>
+        <span class="font-mono text-xs text-(--fg-subtle)">{{ lastCode || 'event.code' }}</span>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2">
+      <label class="flex items-center gap-2 text-sm text-(--fg) cursor-pointer">
+        <input v-model="dedupe" type="checkbox" class="size-4 accent-(--accent) cursor-pointer">
+        dedupe held keys
+      </label>
+      <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ pressCount }} strokes</span>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 min-h-12">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Recent</span>
+      <div v-if="log.length" class="mt-2 flex flex-wrap gap-1.5">
+        <span
+          v-for="(k, i) in log"
+          :key="i"
+          class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 font-mono text-xs text-(--fg-muted)"
+        >{{ k }}</span>
+      </div>
+      <p v-else class="mt-1 text-sm text-(--fg-subtle)">No keys yet — focus the area above.</p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/onLongPress/demo.vue b/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
new file mode 100644
index 0000000..6e3ef92
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onLongPress/demo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { onLongPress } from './index';
+
+// onLongPress(target, handler, options) — target is a MaybeComputedElementRef.
+const pressTarget = useTemplateRef<HTMLButtonElement>('pressTarget');
+
+const DELAY = 700;
+const longPresses = ref(0);
+const taps = ref(0);
+const lastDuration = ref(0);
+const triggered = ref(false);
+
+// Fires once the press passes `delay` (held without moving past the threshold).
+onLongPress(
+  pressTarget,
+  () => {
+    longPresses.value++;
+    triggered.value = true;
+  },
+  {
+    delay: DELAY,
+    modifiers: { prevent: true },
+    // Reports every release: duration, travel distance, and long-press status.
+    onMouseUp: (duration, _distance, isLongPress) => {
+      lastDuration.value = Math.round(duration);
+      if (!isLongPress)
+        taps.value++;
+      triggered.value = false;
+    },
+  },
+);
+
+const progress = computed(() => Math.min(100, Math.round((lastDuration.value / DELAY) * 100)));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <button
+      ref="pressTarget"
+      type="button"
+      class="select-none rounded-xl border px-4 py-8 text-center font-medium transition-colors duration-200 cursor-pointer active:scale-[0.99]"
+      :class="triggered
+        ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+        : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:border-(--border-strong)'"
+    >
+      <span class="block text-base font-semibold">
+        {{ triggered ? 'Long press detected' : 'Press & hold me' }}
+      </span>
+      <span class="mt-1 block text-xs" :class="triggered ? 'text-(--accent-fg)/80' : 'text-(--fg-subtle)'">
+        hold for {{ DELAY }}ms — a quick click counts as a tap
+      </span>
+    </button>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ longPresses }}</span>
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">long presses</span>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ taps }}</span>
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">taps</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last hold</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg)">{{ lastDuration }}ms</span>
+      </div>
+      <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-elevated)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+          :style="{ width: `${progress}%` }"
+        />
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle) leading-relaxed">
+      Moving more than ~10px while holding cancels the press. The
+      <span class="font-mono text-(--accent-text)">onMouseUp</span> callback tells taps from holds.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue b/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
new file mode 100644
index 0000000..a5257ef
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/onStartTyping/demo.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { onStartTyping } from './index';
+
+// The canonical use case: start typing anywhere on the page (while no field is
+// focused) and we auto-focus the search box — like GitHub / Slack quick search.
+const searchInput = useTemplateRef<HTMLInputElement>('searchInput');
+const query = ref('');
+const focused = ref(false);
+const lastChar = ref('');
+
+const fruits = ['Apricot', 'Blueberry', 'Cherry', 'Dragonfruit', 'Elderberry', 'Fig', 'Guava'];
+const results = ref(fruits);
+
+onStartTyping((event) => {
+  lastChar.value = event.key;
+  // Guard: only steal focus if the input isn't already active.
+  if (document.activeElement !== searchInput.value)
+    searchInput.value?.focus();
+});
+
+function filter() {
+  const q = query.value.trim().toLowerCase();
+  results.value = q ? fruits.filter(f => f.toLowerCase().includes(q)) : fruits;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div
+      class="rounded-xl border border-dashed p-5 text-center transition-colors"
+      :class="focused
+        ? 'border-(--accent) bg-(--accent-subtle)'
+        : 'border-(--border-strong) bg-(--bg-inset)'"
+    >
+      <p class="text-sm text-(--fg)">
+        Start typing
+        <span class="font-medium">anywhere</span> on the page
+      </p>
+      <p class="mt-1 text-xs text-(--fg-subtle)">
+        the search box below focuses itself automatically
+      </p>
+      <span
+        v-if="lastChar"
+        class="mt-3 inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        captured <span class="font-mono text-(--fg)">{{ lastChar === ' ' ? 'Space' : lastChar }}</span>
+      </span>
+    </div>
+
+    <input
+      ref="searchInput"
+      v-model="query"
+      type="text"
+      placeholder="Search fruit…"
+      class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      @input="filter"
+      @focus="focused = true"
+      @blur="focused = false"
+    >
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 min-h-12">
+      <ul v-if="results.length" class="flex flex-col">
+        <li
+          v-for="fruit in results"
+          :key="fruit"
+          class="rounded-md px-2 py-1.5 text-sm text-(--fg) transition-colors hover:bg-(--bg-elevated)"
+        >
+          {{ fruit }}
+        </li>
+      </ul>
+      <p v-else class="px-2 py-3 text-center text-sm text-(--fg-subtle)">
+        No fruit matches "{{ query }}"
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useBattery/demo.vue b/vue/toolkit/src/composables/sensors/useBattery/demo.vue
new file mode 100644
index 0000000..d2242d5
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBattery/demo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBattery } from './index';
+
+const { isSupported, charging, level, chargingTime, dischargingTime } = useBattery();
+
+const percent = computed(() => Math.round(level.value * 100));
+
+const statusLabel = computed(() => {
+  if (charging.value) return percent.value >= 100 ? 'Fully charged' : 'Charging';
+  return percent.value <= 20 ? 'Low battery' : 'On battery';
+});
+
+// Color-code the fill the way an OS status bar would.
+const fillClass = computed(() => {
+  if (charging.value) return 'bg-emerald-500';
+  if (percent.value <= 20) return 'bg-red-500';
+  if (percent.value <= 50) return 'bg-amber-500';
+  return 'bg-(--accent)';
+});
+
+function formatDuration(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds <= 0) return '—';
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+const chargingTimeLabel = computed(() => formatDuration(chargingTime.value));
+const dischargingTimeLabel = computed(() => formatDuration(dischargingTime.value));
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
+      Battery Status API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Battery Status</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            <span class="size-1.5 rounded-full transition" :class="charging ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ statusLabel }}
+          </span>
+        </div>
+
+        <!-- Battery silhouette: body + terminal cap, fill scales with level -->
+        <div class="flex items-center gap-2">
+          <div class="relative h-14 flex-1 rounded-lg border-2 border-(--border-strong) bg-(--bg-inset) p-1">
+            <div
+              class="h-full rounded-sm transition-all duration-500"
+              :class="fillClass"
+              :style="{ width: `${Math.max(percent, 2)}%` }"
+            />
+            <span class="absolute inset-0 flex items-center justify-center font-mono text-lg font-bold tabular-nums text-(--fg)">
+              {{ percent }}%
+            </span>
+          </div>
+          <div class="h-6 w-1.5 rounded-r-sm bg-(--border-strong)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Time to full</div>
+          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ chargingTimeLabel }}</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Time to empty</div>
+          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ dischargingTimeLabel }}</div>
+        </div>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Plug in or unplug your charger to watch the charging state, level, and remaining time update live.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue b/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
new file mode 100644
index 0000000..8859740
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useBodyScrollLock/demo.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { useBodyScrollLock } from './index';
+
+// We acquire the lock imperatively on open and call the returned release on close,
+// so the demo never holds the page scroll captive after the dialog dismisses.
+const open = ref(false);
+let release: VoidFunction | null = null;
+
+function openModal(): void {
+  if (open.value) return;
+  open.value = true;
+  release = useBodyScrollLock();
+}
+
+function closeModal(): void {
+  if (!open.value) return;
+  open.value = false;
+  release?.();
+  release = null;
+}
+
+const items = [
+  'Inbox', 'Drafts', 'Sent', 'Archive', 'Spam',
+  'Trash', 'Starred', 'Important', 'Snoozed', 'All mail',
+];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Body scroll lock</span>
+      <p class="text-sm text-(--fg-muted)">
+        Open the dialog and try scrolling the page — the body is locked while it is open,
+        scrollbar width compensated so nothing shifts.
+      </p>
+      <span
+        class="inline-flex w-fit items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+      >
+        <span class="size-1.5 rounded-full transition" :class="open ? 'bg-amber-500' : 'bg-emerald-500'" />
+        {{ open ? 'Scroll locked' : 'Scroll free' }}
+      </span>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+      @click="openModal"
+    >
+      Open dialog
+    </button>
+
+    <!-- Overlay rendered inline; lock acquired in openModal, released in closeModal -->
+    <Transition
+      enter-active-class="transition duration-150"
+      enter-from-class="opacity-0"
+      leave-active-class="transition duration-150"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+        @click.self="closeModal"
+      >
+        <div class="w-full max-w-sm rounded-xl border border-(--border) bg-(--bg-elevated) p-5 shadow-xl flex flex-col gap-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold text-(--fg)">Mailboxes</h3>
+            <button
+              type="button"
+              class="rounded-md px-2 py-0.5 text-sm text-(--fg-muted) transition hover:bg-(--bg-inset) cursor-pointer"
+              @click="closeModal"
+            >
+              Close
+            </button>
+          </div>
+          <ul class="flex flex-col gap-1 max-h-48 overflow-y-auto">
+            <li
+              v-for="item in items"
+              :key="item"
+              class="rounded-md px-3 py-2 text-sm text-(--fg) transition hover:bg-(--bg-inset)"
+            >
+              {{ item }}
+            </li>
+          </ul>
+          <p class="text-xs text-(--fg-subtle)">The list scrolls, the page behind it does not.</p>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue b/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
new file mode 100644
index 0000000..a475cca
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useClickOutside/demo.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useClickOutside } from './index';
+
+const open = ref(false);
+const dismissals = ref(0);
+
+const menu = useTemplateRef<HTMLElement>('menu');
+
+// Close the menu whenever a pointer-down lands outside it.
+useClickOutside(menu, () => {
+  if (open.value) {
+    open.value = false;
+    dismissals.value++;
+  }
+});
+
+const options = ['Rename', 'Duplicate', 'Move to…', 'Archive'];
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Click outside to dismiss</span>
+      <p class="text-sm text-(--fg-muted)">
+        Open the menu, then click anywhere outside it to close. Clicks inside keep it open.
+      </p>
+    </div>
+
+    <div class="relative">
+      <button
+        ref="menu"
+        type="button"
+        class="inline-flex w-full items-center justify-between gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
+        @click="open = !open"
+      >
+        Document actions
+        <span class="text-(--fg-subtle) transition" :class="{ 'rotate-180': open }">▾</span>
+
+        <!-- The menu lives inside `target`, so clicks on its items count as inside -->
+        <Transition
+          enter-active-class="transition duration-100"
+          enter-from-class="opacity-0 -translate-y-1"
+          leave-active-class="transition duration-100"
+          leave-to-class="opacity-0 -translate-y-1"
+        >
+          <div
+            v-if="open"
+            class="absolute left-0 right-0 top-full z-10 mt-1 overflow-hidden rounded-lg border border-(--border) bg-(--bg-elevated) shadow-lg"
+          >
+            <div
+              v-for="option in options"
+              :key="option"
+              class="px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset)"
+            >
+              {{ option }}
+            </div>
+          </div>
+        </Transition>
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between font-mono text-sm text-(--fg) tabular-nums">
+      <span class="text-(--fg-subtle)">outside dismissals</span>
+      <span class="font-bold">{{ dismissals }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue b/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
new file mode 100644
index 0000000..1be6faa
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceMotion/demo.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDeviceMotion } from './index';
+
+const {
+  isSupported,
+  requirePermissions,
+  permissionGranted,
+  acceleration,
+  accelerationIncludingGravity,
+  rotationRate,
+  interval,
+  ensurePermissions,
+} = useDeviceMotion();
+
+function fmt(value: number | null | undefined): string {
+  return value == null ? '—' : value.toFixed(2);
+}
+
+// Magnitude of acceleration including gravity — a quick "how much is it moving" gauge.
+const magnitude = computed(() => {
+  const a = accelerationIncludingGravity.value;
+  if (!a) return 0;
+  const { x = 0, y = 0, z = 0 } = a;
+  return Math.sqrt((x ?? 0) ** 2 + (y ?? 0) ** 2 + (z ?? 0) ** 2);
+});
+
+const axes = computed(() => [
+  { key: 'x', label: 'X', value: acceleration.value?.x },
+  { key: 'y', label: 'Y', value: acceleration.value?.y },
+  { key: 'z', label: 'Z', value: acceleration.value?.z },
+]);
+
+const rotation = computed(() => [
+  { key: 'alpha', label: 'α', value: rotationRate.value?.alpha },
+  { key: 'beta', label: 'β', value: rotationRate.value?.beta },
+  { key: 'gamma', label: 'γ', value: rotationRate.value?.gamma },
+]);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
+      DeviceMotionEvent is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device motion</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            <span class="size-1.5 rounded-full transition" :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+            {{ permissionGranted ? 'Listening' : 'Idle' }}
+          </span>
+        </div>
+
+        <!-- Live magnitude gauge from acceleration incl. gravity (m/s²) -->
+        <div class="flex flex-col gap-1.5">
+          <div class="flex items-baseline justify-between">
+            <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">|a| incl. gravity</span>
+            <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ magnitude.toFixed(2) }} m/s²</span>
+          </div>
+          <div class="h-2 overflow-hidden rounded-full bg-(--bg-inset)">
+            <div
+              class="h-full rounded-full bg-(--accent) transition-all duration-150"
+              :style="{ width: `${Math.min(magnitude / 20 * 100, 100)}%` }"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Acceleration (m/s²)</span>
+        <div class="grid grid-cols-3 gap-2">
+          <div v-for="axis in axes" :key="axis.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ axis.label }}</div>
+            <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(axis.value) }}</div>
+          </div>
+        </div>
+
+        <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">Rotation rate (deg/s)</span>
+        <div class="grid grid-cols-3 gap-2">
+          <div v-for="r in rotation" :key="r.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+            <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ r.label }}</div>
+            <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(r.value) }}</div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between text-xs">
+          <span class="text-(--fg-subtle)">Sampling interval</span>
+          <span class="font-mono tabular-nums text-(--fg-muted)">{{ interval ? `${interval} ms` : '—' }}</span>
+        </div>
+      </div>
+
+      <!-- iOS 13+ gates motion behind an explicit, gesture-triggered grant -->
+      <button
+        v-if="requirePermissions && !permissionGranted"
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="ensurePermissions"
+      >
+        Enable motion access
+      </button>
+      <p v-else class="text-xs text-(--fg-subtle)">
+        Move or tilt your device to see acceleration and rotation update in real time.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue b/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
new file mode 100644
index 0000000..5fad36d
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDeviceOrientation/demo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDeviceOrientation } from './index';
+
+const { isSupported, isAbsolute, alpha, beta, gamma } = useDeviceOrientation();
+
+function fmt(value: number | null): string {
+  return value == null ? '—' : `${value.toFixed(1)}°`;
+}
+
+// Drive a compass needle from alpha (rotation around the z axis).
+const compassRotation = computed(() => (alpha.value == null ? 0 : -alpha.value));
+
+// Tilt a card in 3D using beta (front-back) and gamma (left-right).
+const tiltStyle = computed(() => ({
+  transform: `perspective(600px) rotateX(${(beta.value ?? 0) * 0.4}deg) rotateY(${(gamma.value ?? 0) * 0.4}deg)`,
+}));
+
+const angles = computed(() => [
+  { key: 'alpha', label: 'α · z-axis', value: alpha.value },
+  { key: 'beta', label: 'β · x-axis', value: beta.value },
+  { key: 'gamma', label: 'γ · y-axis', value: gamma.value },
+]);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div v-if="!isSupported" class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
+      DeviceOrientationEvent is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-4">
+        <div class="flex w-full items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device orientation</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+          >
+            <span class="size-1.5 rounded-full transition" :class="isAbsolute ? 'bg-emerald-500' : 'bg-sky-500'" />
+            {{ isAbsolute ? 'Absolute' : 'Relative' }}
+          </span>
+        </div>
+
+        <!-- Compass face + needle driven by alpha; card tilts via beta/gamma -->
+        <div
+          class="relative flex size-40 items-center justify-center rounded-full border-2 border-(--border-strong) bg-(--bg-inset)"
+          :style="tiltStyle"
+        >
+          <span class="absolute top-1 text-[10px] font-bold text-(--fg-muted)">N</span>
+          <span class="absolute bottom-1 text-[10px] text-(--fg-subtle)">S</span>
+          <span class="absolute left-1.5 text-[10px] text-(--fg-subtle)">W</span>
+          <span class="absolute right-1.5 text-[10px] text-(--fg-subtle)">E</span>
+          <div
+            class="h-16 w-1 origin-bottom rounded-full bg-(--accent) transition-transform duration-150"
+            :style="{ transform: `rotate(${compassRotation}deg)` }"
+          />
+          <div class="absolute size-2 rounded-full bg-(--border-strong)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <div v-for="angle in angles" :key="angle.key" class="rounded-lg border border-(--border) bg-(--bg-inset) p-2 text-center">
+          <div class="font-mono text-base font-bold tabular-nums text-(--fg)">{{ fmt(angle.value) }}</div>
+          <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">{{ angle.label }}</div>
+        </div>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Tilt and rotate your device to move the compass needle and tilt the dial. Best viewed on a phone.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
new file mode 100644
index 0000000..eb2612d
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicePixelRatio/demo.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDevicePixelRatio } from './index';
+
+const { pixelRatio } = useDevicePixelRatio();
+
+// A DPR > 1 means the display packs more physical pixels per CSS pixel
+// (Retina / HiDPI), which also flips on browser zoom.
+const classification = computed(() => {
+  if (pixelRatio.value >= 3) return 'Ultra HiDPI';
+  if (pixelRatio.value >= 2) return 'Retina / HiDPI';
+  if (pixelRatio.value > 1) return 'Scaled';
+  return 'Standard';
+});
+
+// One CSS pixel maps to dpr² physical pixels across both axes.
+const physicalPerCss = computed(() => (pixelRatio.value ** 2).toFixed(2));
+const ratioLabel = computed(() => `${pixelRatio.value} dppx`);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Device Pixel Ratio</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="size-1.5 rounded-full bg-(--accent)" />
+          {{ classification }}
+        </span>
+      </div>
+
+      <div class="flex items-end gap-2">
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ pixelRatio }}</span>
+        <span class="pb-1 text-sm text-(--fg-subtle)">{{ ratioLabel }}</span>
+      </div>
+
+      <!-- Visualise how a single CSS pixel maps onto a grid of physical pixels -->
+      <div class="flex items-center gap-3">
+        <div
+          class="grid flex-shrink-0 gap-px rounded-md border border-(--border-strong) bg-(--bg-inset) p-1 transition-all"
+          :style="{
+            gridTemplateColumns: `repeat(${Math.max(1, Math.round(pixelRatio))}, 0.75rem)`,
+            gridTemplateRows: `repeat(${Math.max(1, Math.round(pixelRatio))}, 0.75rem)`,
+          }"
+        >
+          <span
+            v-for="n in Math.max(1, Math.round(pixelRatio)) ** 2"
+            :key="n"
+            class="size-3 rounded-[3px] bg-(--accent)/80"
+          />
+        </div>
+        <p class="text-xs text-(--fg-muted)">
+          1 CSS pixel is rendered with about
+          <span class="font-mono font-semibold text-(--fg)">{{ physicalPerCss }}</span>
+          physical pixels.
+        </p>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Zoom the page (Cmd/Ctrl + and -) or drag this window to a monitor with a different scale to watch the ratio update live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue b/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
new file mode 100644
index 0000000..929495e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useDevicesList/demo.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useDevicesList } from './index';
+
+const {
+  isSupported,
+  videoInputs,
+  audioInputs,
+  audioOutputs,
+  permissionGranted,
+  ensurePermissions,
+} = useDevicesList();
+
+const requesting = ref(false);
+
+async function grant(): Promise<void> {
+  requesting.value = true;
+  try {
+    await ensurePermissions();
+  }
+  finally {
+    requesting.value = false;
+  }
+}
+
+interface Group {
+  key: string;
+  label: string;
+  icon: string;
+  devices: typeof videoInputs.value;
+}
+
+const groups = computed<Group[]>(() => [
+  { key: 'video', label: 'Cameras', icon: 'M', devices: videoInputs.value },
+  { key: 'audioin', label: 'Microphones', icon: 'A', devices: audioInputs.value },
+  { key: 'audioout', label: 'Speakers', icon: 'S', devices: audioOutputs.value },
+]);
+
+const total = computed(() =>
+  videoInputs.value.length + audioInputs.value.length + audioOutputs.value.length);
+
+function deviceLabel(device: MediaDeviceInfo, index: number, kind: string): string {
+  return device.label || `${kind} ${index + 1}`;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      The MediaDevices API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Media Devices</span>
+          <span
+            class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
+            :class="permissionGranted ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+          >
+            <span
+              class="size-1.5 rounded-full"
+              :class="permissionGranted ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+            />
+            {{ permissionGranted ? 'Labels unlocked' : `${total} found` }}
+          </span>
+        </div>
+
+        <div class="flex flex-col gap-3">
+          <div v-for="group in groups" :key="group.key" class="flex flex-col gap-1.5">
+            <div class="flex items-center justify-between">
+              <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">{{ group.label }}</span>
+              <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ group.devices.length }}</span>
+            </div>
+
+            <p v-if="group.devices.length === 0" class="px-1 py-1 text-xs text-(--fg-subtle)">
+              None detected
+            </p>
+
+            <ul v-else class="flex flex-col gap-1">
+              <li
+                v-for="(device, index) in group.devices"
+                :key="device.deviceId || index"
+                class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm text-(--fg)"
+              >
+                <span class="grid size-6 flex-shrink-0 place-items-center rounded-md bg-(--accent-subtle) font-mono text-xs font-bold text-(--accent-text)">
+                  {{ group.icon }}
+                </span>
+                <span class="truncate">{{ deviceLabel(device, index, group.label) }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="permissionGranted || requesting"
+        @click="grant"
+      >
+        {{ permissionGranted ? 'Permission granted' : requesting ? 'Requesting…' : 'Grant access to reveal names' }}
+      </button>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Without permission, device names are hidden. Plug in or remove a device to watch the list re-enumerate automatically.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue b/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
new file mode 100644
index 0000000..f6caec0
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementByPoint/demo.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useElementByPoint } from './index';
+
+// Viewport coordinates to probe — driven by the user moving the cursor over
+// the playground area below.
+const x = ref(0);
+const y = ref(0);
+const tracking = ref(false);
+
+const { element, isSupported, toggle } = useElementByPoint({ x, y });
+
+const active = ref(true);
+
+function onToggle(): void {
+  toggle();
+  active.value = !active.value;
+}
+
+function onMove(event: MouseEvent): void {
+  x.value = event.clientX;
+  y.value = event.clientY;
+  tracking.value = true;
+}
+
+function onLeave(): void {
+  tracking.value = false;
+}
+
+// Build a friendly description of whatever the probe currently sits on.
+const elementInfo = computed(() => {
+  const el = element.value as Element | null;
+  if (!el) return null;
+
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : '';
+  const cls = el.className && typeof el.className === 'string'
+    ? `.${el.className.trim().split(/\s+/).slice(0, 2).join('.')}`
+    : '';
+
+  return { tag, selector: `${tag}${id}${cls}`, text: el.textContent?.trim().slice(0, 40) ?? '' };
+});
+
+const coords = computed(() => `${Math.round(x.value)}, ${Math.round(y.value)}`);
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300"
+    >
+      elementFromPoint is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <!-- Probe surface: hover anywhere inside to feed live viewport coordinates -->
+      <div
+        class="relative grid h-40 place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset)"
+        @mousemove="onMove"
+        @mouseleave="onLeave"
+      >
+        <div class="pointer-events-none absolute inset-0 grid grid-cols-3 grid-rows-2 gap-2 p-3 opacity-70">
+          <div
+            v-for="cell in ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']"
+            :key="cell"
+            :data-cell="cell"
+            class="grid place-items-center rounded-lg border border-(--border) bg-(--bg-elevated) text-xs font-medium text-(--fg-muted)"
+          >
+            {{ cell }}
+          </div>
+        </div>
+        <span class="pointer-events-none relative rounded-md bg-(--bg)/70 px-2 py-1 text-xs text-(--fg-subtle) backdrop-blur">
+          {{ tracking ? 'Probing…' : 'Move your cursor here' }}
+        </span>
+      </div>
+
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex flex-col gap-1.5">
+        <div class="flex items-center justify-between">
+          <span class="text-(--fg-subtle)">point</span>
+          <span>{{ coords }}</span>
+        </div>
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-(--fg-subtle)">element</span>
+          <span class="truncate text-(--accent-text)">{{ elementInfo?.selector ?? '—' }}</span>
+        </div>
+        <div v-if="elementInfo?.text" class="flex items-center justify-between gap-3">
+          <span class="text-(--fg-subtle)">text</span>
+          <span class="truncate text-(--fg-muted)">{{ elementInfo.text }}</span>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="onToggle"
+        >
+          <span class="size-1.5 rounded-full" :class="active ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ active ? 'Pause sampling' : 'Resume sampling' }}
+        </button>
+        <span class="text-xs text-(--fg-subtle)">Sampled every animation frame</span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useElementHover/demo.vue b/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
new file mode 100644
index 0000000..0b0aa6a
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useElementHover/demo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useElementHover } from './index';
+
+// Instant hover state.
+const instant = useTemplateRef<HTMLElement>('instant');
+const isInstantHovered = useElementHover(instant);
+
+// Delayed hover state — debounces flicker on quick passes.
+const delayEnter = ref(150);
+const delayLeave = ref(400);
+const delayed = useTemplateRef<HTMLElement>('delayed');
+const isDelayedHovered = useElementHover(delayed, {
+  delayEnter: delayEnter.value,
+  delayLeave: delayLeave.value,
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <!-- Instant: state flips the moment the pointer enters / leaves -->
+    <div
+      ref="instant"
+      class="flex flex-col gap-1 rounded-xl border bg-(--bg-elevated) p-4 transition-all duration-200"
+      :class="isInstantHovered
+        ? 'border-(--accent) ring-2 ring-(--ring) -translate-y-0.5'
+        : 'border-(--border)'"
+    >
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Instant</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
+          :class="isInstantHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >
+          <span class="size-1.5 rounded-full" :class="isInstantHovered ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isInstantHovered ? 'hovered' : 'idle' }}
+        </span>
+      </div>
+      <p class="text-sm text-(--fg-muted)">Hover this card to flip the state immediately.</p>
+    </div>
+
+    <!-- Delayed: enter/leave delays smooth out flicker -->
+    <div
+      ref="delayed"
+      class="flex flex-col gap-2 rounded-xl border bg-(--bg-elevated) p-4 transition-all duration-200"
+      :class="isDelayedHovered
+        ? 'border-(--accent) ring-2 ring-(--ring) -translate-y-0.5'
+        : 'border-(--border)'"
+    >
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Delayed</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium"
+          :class="isDelayedHovered ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >
+          <span class="size-1.5 rounded-full" :class="isDelayedHovered ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isDelayedHovered ? 'hovered' : 'idle' }}
+        </span>
+      </div>
+      <p class="text-sm text-(--fg-muted)">
+        Waits <span class="font-mono text-(--fg)">{{ delayEnter }}ms</span> to enter,
+        <span class="font-mono text-(--fg)">{{ delayLeave }}ms</span> to leave.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Enter/leave delays debounce hover flicker — useful for tooltips and submenus that should not vanish the instant you cross a gap.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue b/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
new file mode 100644
index 0000000..6fc1d04
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useEscapeKey/demo.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useEscapeKey } from './index';
+
+// Stack of open layers — useEscapeKey only fires the topmost handler, so
+// Escape peels them off one at a time (outer panel, then inner dialog).
+const panelOpen = ref(false);
+const dialogOpen = ref(false);
+
+const lastDismissed = ref<string | null>(null);
+
+let stopPanel: (() => void) | undefined;
+let stopDialog: (() => void) | undefined;
+
+// Only register a handler while the layer is actually open. The most recently
+// registered (topmost) one wins for a given Escape press.
+watch(panelOpen, (open) => {
+  if (open) {
+    stopPanel = useEscapeKey(() => {
+      panelOpen.value = false;
+      lastDismissed.value = 'panel';
+    });
+  }
+  else {
+    stopPanel?.();
+    stopPanel = undefined;
+  }
+});
+
+watch(dialogOpen, (open) => {
+  if (open) {
+    stopDialog = useEscapeKey(() => {
+      dialogOpen.value = false;
+      lastDismissed.value = 'dialog';
+    });
+  }
+  else {
+    stopDialog?.();
+    stopDialog = undefined;
+  }
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Escape Stack</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ (panelOpen ? 1 : 0) + (dialogOpen ? 1 : 0) }} open
+        </span>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="panelOpen = true"
+      >
+        Open panel
+      </button>
+
+      <!-- Outer layer -->
+      <div
+        v-if="panelOpen"
+        class="flex flex-col gap-3 rounded-lg border border-(--border-strong) bg-(--bg-inset) p-3"
+      >
+        <p class="text-sm text-(--fg)">
+          Panel open. Press <kbd class="rounded border border-(--border) bg-(--bg-elevated) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd> to dismiss, or open a nested dialog on top.
+        </p>
+
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="dialogOpen = true"
+        >
+          Open nested dialog
+        </button>
+
+        <!-- Inner layer: topmost, so Escape closes this first -->
+        <div
+          v-if="dialogOpen"
+          class="flex items-center justify-between gap-2 rounded-lg border border-(--accent) bg-(--accent-subtle) p-3"
+        >
+          <p class="text-sm text-(--accent-text)">
+            Nested dialog — Esc closes me before the panel.
+          </p>
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            top
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
+      <span class="text-(--fg-subtle)">last dismissed via Esc</span>
+      <span class="text-(--accent-text)">{{ lastDismissed ?? '—' }}</span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Only the topmost layer responds to a single Escape press, so nested dismissables close in the right order.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useFocus/demo.vue b/vue/toolkit/src/composables/sensors/useFocus/demo.vue
new file mode 100644
index 0000000..56ee3ce
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocus/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useFocus } from './index';
+
+const input = useTemplateRef<HTMLInputElement>('input');
+const { focused } = useFocus(input);
+
+const email = ref('ada@example.com');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="space-y-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Newsletter email
+      </label>
+      <input
+        ref="input"
+        v-model="email"
+        type="email"
+        placeholder="you@example.com"
+        class="w-full rounded-lg border bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        :class="focused ? 'border-(--accent)' : 'border-(--border)'"
+      >
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)">Focus state</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="focused
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="focused ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ focused ? 'Focused' : 'Blurred' }}
+      </span>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        :disabled="focused"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="focused = true"
+      >
+        Focus input
+      </button>
+      <button
+        type="button"
+        :disabled="!focused"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="focused = false"
+      >
+        Blur input
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      <code class="font-mono">focused</code> is writable &mdash; click the buttons or use Tab to drive it.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue b/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
new file mode 100644
index 0000000..5ecaefe
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFocusWithin/demo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useFocusWithin } from './index';
+
+const form = useTemplateRef<HTMLFormElement>('form');
+const { focused } = useFocusWithin(form);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Shipping address
+      </span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="focused
+          ? 'bg-sky-500/10 text-sky-600 dark:text-sky-400'
+          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="focused ? 'bg-sky-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ focused ? 'Editing' : 'Idle' }}
+      </span>
+    </div>
+
+    <form
+      ref="form"
+      class="space-y-3 rounded-xl border bg-(--bg-elevated) p-4 transition"
+      :class="focused ? 'border-(--accent) ring-2 ring-(--ring)' : 'border-(--border)'"
+      @submit.prevent
+    >
+      <input
+        type="text"
+        placeholder="Full name"
+        value="Grace Hopper"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <input
+        type="text"
+        placeholder="Street address"
+        value="1701 Enterprise Ave"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <div class="flex gap-3">
+        <input
+          type="text"
+          placeholder="City"
+          value="Arlington"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <input
+          type="text"
+          placeholder="ZIP"
+          value="22202"
+          class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </div>
+    </form>
+
+    <p class="text-xs text-(--fg-subtle)">
+      The whole panel highlights while focus lives in <em>any</em> descendant field &mdash; tabbing between inputs stays "Editing".
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useFps/demo.vue b/vue/toolkit/src/composables/sensors/useFps/demo.vue
new file mode 100644
index 0000000..11aaa63
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useFps/demo.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref } from 'vue';
+import { useFps } from './index';
+
+const { fps, min, max, isActive, reset, pause, resume } = useFps({ every: 10 });
+
+// Optional artificial load so the FPS reading visibly reacts.
+const stress = ref(0);
+let raf = 0;
+
+function burn() {
+  if (stress.value > 0) {
+    const end = performance.now() + stress.value;
+    // Busy-wait to simulate a heavy frame and depress FPS.
+    while (performance.now() < end) { /* spin */ }
+  }
+  raf = requestAnimationFrame(burn);
+}
+// Client-only: requestAnimationFrame is undefined during SSR/prerender.
+onMounted(() => { raf = requestAnimationFrame(burn); });
+onScopeDispose(() => cancelAnimationFrame(raf));
+
+const health = computed(() => {
+  if (fps.value >= 55)
+    return { label: 'Smooth', cls: 'text-emerald-600 dark:text-emerald-400', dot: 'bg-emerald-500' };
+  if (fps.value >= 30)
+    return { label: 'Choppy', cls: 'text-amber-600 dark:text-amber-400', dot: 'bg-amber-500' };
+  return { label: 'Janky', cls: 'text-red-600 dark:text-red-400', dot: 'bg-red-500' };
+});
+
+const barWidth = computed(() => `${Math.min(100, (fps.value / 60) * 100)}%`);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Frames / second
+        </span>
+        <span class="inline-flex items-center gap-1.5 text-xs font-medium" :class="health.cls">
+          <span class="size-1.5 rounded-full" :class="health.dot" />
+          {{ health.label }}
+        </span>
+      </div>
+
+      <div class="mt-1 flex items-baseline gap-2">
+        <span class="font-mono text-4xl font-bold tabular-nums text-(--fg)">{{ fps }}</span>
+        <span class="text-sm text-(--fg-subtle)">fps</span>
+      </div>
+
+      <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full transition-[width] duration-150"
+          :class="health.dot"
+          :style="{ width: barWidth }"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Min</div>
+        <div class="font-mono text-xl font-bold tabular-nums text-(--fg)">
+          {{ Number.isFinite(min) ? min : '—' }}
+        </div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max</div>
+        <div class="font-mono text-xl font-bold tabular-nums text-(--fg)">{{ max }}</div>
+      </div>
+    </div>
+
+    <div class="space-y-1.5">
+      <div class="flex items-center justify-between text-xs">
+        <span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Simulated load</span>
+        <span class="font-mono tabular-nums text-(--fg-muted)">{{ stress }} ms/frame</span>
+      </div>
+      <input
+        v-model.number="stress"
+        type="range"
+        min="0"
+        max="40"
+        step="2"
+        class="w-full accent-(--accent)"
+      >
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="isActive ? pause() : resume()"
+      >
+        {{ isActive ? 'Pause' : 'Resume' }}
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset"
+      >
+        Reset min / max
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useGamepad/demo.vue b/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
new file mode 100644
index 0000000..6b706ca
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGamepad/demo.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { mapGamepadToXbox360Controller, useGamepad } from './index';
+
+const { gamepads, isSupported } = useGamepad();
+
+const gamepad = computed(() => gamepads.value[0]);
+const hasPad = computed(() => Boolean(gamepad.value));
+const controller = mapGamepadToXbox360Controller(gamepad);
+
+function pct(value: number): string {
+  // Map a -1..1 axis to a 0..100 position for the stick dots.
+  return `${((value + 1) / 2) * 100}%`;
+}
+
+const faceButtons = computed(() => {
+  const c = controller.value;
+  if (!c)
+    return [];
+  return [
+    { key: 'A', pressed: c.buttons.a.pressed, color: 'text-emerald-500' },
+    { key: 'B', pressed: c.buttons.b.pressed, color: 'text-red-500' },
+    { key: 'X', pressed: c.buttons.x.pressed, color: 'text-sky-500' },
+    { key: 'Y', pressed: c.buttons.y.pressed, color: 'text-amber-500' },
+  ];
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
+    >
+      The Gamepad API is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Gamepad
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="hasPad
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="hasPad ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ hasPad ? 'Connected' : 'Waiting' }}
+        </span>
+      </div>
+
+      <div
+        v-if="!hasPad"
+        class="rounded-xl border border-dashed border-(--border) bg-(--bg-inset) p-6 text-center"
+      >
+        <p class="text-sm font-medium text-(--fg)">No controller detected</p>
+        <p class="mt-1 text-xs text-(--fg-subtle)">
+          Connect a gamepad and press any button to wake it.
+        </p>
+      </div>
+
+      <template v-else-if="controller">
+        <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+          <div class="truncate text-xs text-(--fg-subtle)" :title="gamepad?.id">
+            {{ gamepad?.id }}
+          </div>
+
+          <div class="mt-3 grid grid-cols-2 gap-4">
+            <div class="space-y-2">
+              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+                Buttons
+              </div>
+              <div class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="b in faceButtons"
+                  :key="b.key"
+                  class="inline-flex size-7 items-center justify-center rounded-md border text-xs font-bold tabular-nums transition"
+                  :class="b.pressed
+                    ? `border-(--accent) bg-(--accent-subtle) ${b.color}`
+                    : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+                >
+                  {{ b.key }}
+                </span>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+                Triggers
+              </div>
+              <div class="space-y-1.5">
+                <div
+                  v-for="(t, side) in { LT: controller.triggers.left, RT: controller.triggers.right }"
+                  :key="side"
+                  class="flex items-center gap-2"
+                >
+                  <span class="w-6 font-mono text-xs text-(--fg-muted)">{{ side }}</span>
+                  <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-(--bg-inset)">
+                    <div
+                      class="h-full rounded-full bg-(--accent) transition-[width]"
+                      :style="{ width: `${t.value * 100}%` }"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-4 grid grid-cols-2 gap-4">
+            <div
+              v-for="(stick, side) in { Left: controller.stick.left, Right: controller.stick.right }"
+              :key="side"
+              class="space-y-2"
+            >
+              <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+                {{ side }} stick
+              </div>
+              <div class="relative aspect-square w-full rounded-lg border border-(--border) bg-(--bg-inset)">
+                <div
+                  class="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full transition-all"
+                  :class="stick.button.pressed ? 'bg-(--accent)' : 'bg-(--fg-muted)'"
+                  :style="{ left: pct(stick.horizontal), top: pct(stick.vertical) }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+
+    <p class="text-xs text-(--fg-subtle)">
+      State polls every animation frame and stays paused while no pad is connected.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue b/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
new file mode 100644
index 0000000..4f7d46b
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useGeolocation/demo.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useGeolocation } from './index';
+
+// Don't auto-request location on mount — wait for a user gesture.
+const {
+  coords,
+  locatedAt,
+  error,
+  ready,
+  isActive,
+  isSupported,
+  resume,
+  pause,
+} = useGeolocation({ immediate: false, enableHighAccuracy: true });
+
+const located = computed(() => locatedAt.value
+  ? new Date(locatedAt.value).toLocaleTimeString()
+  : '—');
+
+function fmt(value: number | null, digits = 5): string {
+  return value == null || !Number.isFinite(value) ? '—' : value.toFixed(digits);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      v-if="!isSupported"
+      class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-700 dark:text-amber-300"
+    >
+      Geolocation is not supported in this browser.
+    </div>
+
+    <template v-else>
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Geolocation
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="isActive
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="isActive ? 'bg-emerald-500 animate-pulse' : 'bg-(--fg-subtle)'"
+          />
+          {{ isActive ? 'Watching' : 'Idle' }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Latitude</div>
+          <div class="mt-0.5 font-mono text-lg font-bold tabular-nums text-(--fg)">
+            {{ ready ? fmt(coords.latitude) : '—' }}
+          </div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Longitude</div>
+          <div class="mt-0.5 font-mono text-lg font-bold tabular-nums text-(--fg)">
+            {{ ready ? fmt(coords.longitude) : '—' }}
+          </div>
+        </div>
+      </div>
+
+      <dl class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+        <div class="flex items-center justify-between py-0.5">
+          <dt class="text-(--fg-muted)">Accuracy</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">
+            {{ ready ? `± ${Math.round(coords.accuracy)} m` : '—' }}
+          </dd>
+        </div>
+        <div class="flex items-center justify-between py-0.5">
+          <dt class="text-(--fg-muted)">Heading</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">
+            {{ ready ? `${fmt(coords.heading, 0)}°` : '—' }}
+          </dd>
+        </div>
+        <div class="flex items-center justify-between py-0.5">
+          <dt class="text-(--fg-muted)">Located at</dt>
+          <dd class="font-mono tabular-nums text-(--fg)">{{ located }}</dd>
+        </div>
+      </dl>
+
+      <p
+        v-if="error"
+        class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ error.message || 'Unable to retrieve your location.' }}
+      </p>
+
+      <div class="flex gap-2">
+        <button
+          v-if="!isActive"
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="resume"
+        >
+          {{ ready ? 'Resume watching' : 'Find my location' }}
+        </button>
+        <button
+          v-else
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="pause"
+        >
+          Stop watching
+        </button>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        Requires permission &mdash; nothing is requested until you press the button.
+      </p>
+    </template>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useIdle/demo.vue b/vue/toolkit/src/composables/sensors/useIdle/demo.vue
new file mode 100644
index 0000000..f85d468
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useIdle/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useIdle } from './index';
+
+// A short 3s threshold makes the idle transition easy to observe in the demo.
+const timeout = ref(3000);
+
+const { idle, lastActive, isPending, reset, start, stop } = useIdle(timeout.value);
+
+// lastActive is a ms timestamp; tick a clock so the "seconds since" readout is live.
+const now = ref(Date.now());
+let clockId: ReturnType<typeof setInterval> | undefined;
+onMounted(() => {
+  clockId = setInterval(() => { now.value = Date.now(); }, 250);
+});
+onUnmounted(() => {
+  if (clockId !== undefined)
+    clearInterval(clockId);
+});
+
+const secondsSinceActive = computed(() =>
+  Math.max(0, (now.value - lastActive.value) / 1000).toFixed(1),
+);
+
+const lastActiveLabel = computed(() =>
+  new Date(lastActive.value).toLocaleTimeString(undefined, { hour12: false }),
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Status</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="idle
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="idle ? 'bg-amber-500' : 'bg-emerald-500'"
+          />
+          {{ idle ? 'Idle' : 'Active' }}
+        </span>
+      </div>
+
+      <p class="mt-3 text-sm text-(--fg-muted)">
+        Move your mouse, type, or scroll to stay active. After
+        <span class="font-medium text-(--fg)">{{ (timeout / 1000).toFixed(0) }}s</span>
+        without activity you go idle.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Inactive for</div>
+        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ secondsSinceActive }}<span class="text-base text-(--fg-subtle)">s</span>
+        </div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last active</div>
+        <div class="mt-1 font-mono text-2xl font-bold tabular-nums text-(--fg)">
+          {{ lastActiveLabel }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="reset()"
+      >
+        Reset timer
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!isPending"
+        @click="stop()"
+      >
+        Stop
+      </button>
+      <button
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isPending"
+        @click="start()"
+      >
+        Start
+      </button>
+
+      <span class="ml-auto inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        tracking: {{ isPending ? 'on' : 'off' }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue b/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
new file mode 100644
index 0000000..89b6a86
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useInfiniteScroll/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useInfiniteScroll } from './index';
+
+interface Repo {
+  id: number;
+  name: string;
+  stars: number;
+}
+
+const ADJECTIVES = ['swift', 'lunar', 'crisp', 'nimbus', 'atlas', 'echo', 'quartz', 'vivid'];
+const NOUNS = ['kit', 'forge', 'studio', 'engine', 'router', 'store', 'lab', 'core'];
+const PAGE_SIZE = 12;
+const MAX_ITEMS = 80;
+
+const scrollEl = useTemplateRef<HTMLDivElement>('scrollEl');
+const items = ref<Repo[]>([]);
+let nextId = 0;
+
+function makePage(): Repo[] {
+  return Array.from({ length: PAGE_SIZE }, () => {
+    const id = nextId++;
+    const name = `${ADJECTIVES[id % ADJECTIVES.length]}-${NOUNS[(id * 3) % NOUNS.length]}`;
+    return { id, name, stars: 200 + ((id * 137) % 9000) };
+  });
+}
+
+const canLoadMore = () => items.value.length < MAX_ITEMS;
+
+const { isLoading } = useInfiniteScroll(
+  scrollEl,
+  // Simulate a paged network fetch with latency.
+  () => new Promise<void>((resolve) => {
+    setTimeout(() => {
+      items.value.push(...makePage().slice(0, MAX_ITEMS - items.value.length));
+      resolve();
+    }, 600);
+  }),
+  { distance: 24, canLoadMore },
+);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Repositories</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+        {{ items.length }} / {{ MAX_ITEMS }} loaded
+      </span>
+    </div>
+
+    <div
+      ref="scrollEl"
+      class="h-72 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+    >
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="repo in items"
+          :key="repo.id"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg) px-3 py-2"
+        >
+          <span class="truncate font-mono text-sm text-(--fg)">{{ repo.name }}</span>
+          <span class="inline-flex items-center gap-1 text-xs font-medium tabular-nums text-(--fg-muted)">
+            <span class="text-amber-500">★</span>{{ repo.stars.toLocaleString() }}
+          </span>
+        </li>
+      </ul>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center gap-2 py-4 text-sm text-(--fg-subtle)"
+      >
+        <span class="size-3.5 animate-spin rounded-full border-2 border-(--border-strong) border-t-transparent" />
+        Loading more…
+      </div>
+
+      <div
+        v-else-if="!canLoadMore()"
+        class="py-4 text-center text-sm text-(--fg-subtle)"
+      >
+        You've reached the end.
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Scroll to within <span class="font-medium text-(--fg-muted)">24px</span> of the bottom to fetch the next page.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue b/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
new file mode 100644
index 0000000..8c445b2
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useKeyModifier/demo.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useKeyModifier } from './index';
+
+// Each call returns a single ShallowRef — bind it directly, do not destructure.
+const capsLock = useKeyModifier('CapsLock');
+const numLock = useKeyModifier('NumLock');
+const shift = useKeyModifier('Shift', { initial: false });
+const control = useKeyModifier('Control', { initial: false });
+const meta = useKeyModifier('Meta', { initial: false });
+const alt = useKeyModifier('Alt', { initial: false });
+
+const lockKeys = computed(() => [
+  { label: 'Caps Lock', state: capsLock.value },
+  { label: 'Num Lock', state: numLock.value },
+]);
+
+const heldKeys = computed(() => [
+  { label: 'Shift', state: shift.value },
+  { label: 'Control', state: control.value },
+  { label: 'Meta', state: meta.value },
+  { label: 'Alt', state: alt.value },
+]);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <p class="text-sm text-(--fg-muted)">
+      Toggle <span class="font-medium text-(--fg)">Caps Lock</span> / <span class="font-medium text-(--fg)">Num Lock</span>,
+      or hold a modifier key, then press any key (or click here) to refresh state.
+    </p>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lock keys</span>
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="key in lockKeys"
+          :key="key.label"
+          class="flex items-center justify-between gap-2 rounded-lg border px-3 py-2 transition"
+          :class="key.state
+            ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span class="text-sm font-medium">{{ key.label }}</span>
+          <span class="font-mono text-xs tabular-nums">
+            {{ key.state === null ? 'null' : key.state ? 'ON' : 'off' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Held modifiers</span>
+      <div class="grid grid-cols-4 gap-2">
+        <div
+          v-for="key in heldKeys"
+          :key="key.label"
+          class="flex flex-col items-center gap-1 rounded-lg border px-2 py-2.5 text-center transition"
+          :class="key.state
+            ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'"
+        >
+          <span class="text-xs font-medium">{{ key.label }}</span>
+          <span
+            class="size-2 rounded-full transition"
+            :class="key.state ? 'bg-emerald-500' : 'bg-(--border-strong)'"
+          />
+        </div>
+      </div>
+    </div>
+
+    <p class="rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-xs text-(--fg-subtle)">
+      Modifier state is read from <span class="font-mono text-(--fg-muted)">getModifierState</span>, so it stays
+      <span class="font-mono text-(--fg-muted)">null</span> until the first matching event arrives.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue b/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
new file mode 100644
index 0000000..8ac46f1
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMagicKeys/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useMagicKeys } from './index';
+
+// Prevent the browser's own save/find dialogs from stealing the chord.
+const keys = useMagicKeys({
+  onEventFired(e) {
+    if ((e.ctrlKey || e.metaKey) && ['s', 'k'].includes(e.key.toLowerCase()) && e.type === 'keydown')
+      e.preventDefault();
+  },
+});
+
+const { current, reset } = keys;
+
+// Combos are accessed as proxy properties returning ComputedRef<boolean>.
+const save = keys['ctrl+s'];
+const search = keys['cmd+k'];
+const selectAll = keys['ctrl+a'];
+
+const log = ref<string[]>([]);
+function fire(action: string) {
+  log.value = [`${new Date().toLocaleTimeString(undefined, { hour12: false })} · ${action}`, ...log.value].slice(0, 4);
+}
+
+// Each combo computed flips true exactly when the chord completes.
+watch(save, v => v && fire('Save (Ctrl+S)'));
+watch(search, v => v && fire('Search (Cmd+K)'));
+watch(selectAll, v => v && fire('Select all (Ctrl+A)'));
+
+const pressed = computed(() => [...current]);
+
+const combos = computed(() => [
+  { label: 'Ctrl + S', active: save.value },
+  { label: 'Cmd + K', active: search.value },
+  { label: 'Ctrl + A', active: selectAll.value },
+]);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <p class="text-sm text-(--fg-muted)">
+      Press keys or try a combo — <span class="font-medium text-(--fg)">Ctrl + S</span>,
+      <span class="font-medium text-(--fg)">Cmd + K</span>, or
+      <span class="font-medium text-(--fg)">Ctrl + A</span>.
+    </p>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Currently pressed</span>
+        <button
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-2.5 py-1 text-xs font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="!pressed.length"
+          @click="reset()"
+        >
+          Reset
+        </button>
+      </div>
+
+      <div class="mt-3 flex min-h-9 flex-wrap items-center gap-1.5">
+        <kbd
+          v-for="key in pressed"
+          :key="key"
+          class="inline-flex min-w-7 items-center justify-center rounded-md border border-(--border-strong) bg-(--bg-inset) px-2 py-1 font-mono text-xs font-semibold text-(--fg) shadow-sm"
+        >
+          {{ key === ' ' ? 'Space' : key }}
+        </kbd>
+        <span v-if="!pressed.length" class="text-sm text-(--fg-subtle)">No keys held</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div
+        v-for="combo in combos"
+        :key="combo.label"
+        class="flex flex-col items-center gap-1 rounded-lg border px-2 py-2.5 text-center text-xs font-medium transition"
+        :class="combo.active
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ combo.label }}
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) tabular-nums">
+      <div class="mb-1.5 text-(--fg-subtle)">Triggered actions</div>
+      <ul v-if="log.length" class="flex flex-col gap-0.5">
+        <li v-for="entry in log" :key="entry" class="text-(--fg-muted)">{{ entry }}</li>
+      </ul>
+      <span v-else class="text-(--fg-subtle)">Waiting for a chord…</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMouse/demo.vue b/vue/toolkit/src/composables/sensors/useMouse/demo.vue
new file mode 100644
index 0000000..a7d39a4
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouse/demo.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useMouse } from './index';
+
+// Global page coordinates (and whether the input came from mouse or touch).
+const { x, y, sourceType } = useMouse();
+
+// Element-relative coordinates via a custom extractor that subtracts the
+// target's bounding box, clamped to the box so the dot stays inside.
+const area = useTemplateRef<HTMLDivElement>('area');
+const { x: relX, y: relY } = useMouse({
+  target: area,
+  type: (event) => {
+    const el = area.value;
+    if (!el || !('clientX' in event))
+      return null;
+    const rect = el.getBoundingClientRect();
+    const px = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+    const py = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
+    return [px, py];
+  },
+});
+
+const inside = computed(() => relX.value > 0 || relY.value > 0);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="grid grid-cols-3 gap-3">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">page x</div>
+        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ Math.round(x) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">page y</div>
+        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ Math.round(y) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">source</div>
+        <div class="mt-1 font-mono text-xl font-bold tabular-nums text-(--fg)">{{ sourceType ?? '—' }}</div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Move inside this area</span>
+      <div
+        ref="area"
+        class="relative h-40 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated)"
+        style="background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 16px 16px;"
+      >
+        <div
+          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent) bg-(--accent-subtle) transition-opacity"
+          :class="inside ? 'opacity-100' : 'opacity-0'"
+          :style="{ left: `${relX}px`, top: `${relY}px` }"
+        />
+        <div
+          v-if="inside"
+          class="pointer-events-none absolute bottom-2 right-2 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 font-mono text-xs tabular-nums text-(--fg-muted)"
+        >
+          {{ Math.round(relX) }}, {{ Math.round(relY) }}
+        </div>
+        <span
+          v-else
+          class="absolute inset-0 flex items-center justify-center text-sm text-(--fg-subtle)"
+        >
+          Hover to track relative position
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue b/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
new file mode 100644
index 0000000..772823e
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMouseInElement/demo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { useMouseInElement } from './index';
+
+const area = useTemplateRef<HTMLElement>('area');
+
+const {
+  elementX,
+  elementY,
+  elementWidth,
+  elementHeight,
+  isOutside,
+} = useMouseInElement(area);
+
+// Clamp to the element so the readout/spotlight stay sane at the edges.
+const clampedX = computed(() => Math.max(0, Math.min(elementX.value, elementWidth.value)));
+const clampedY = computed(() => Math.max(0, Math.min(elementY.value, elementHeight.value)));
+
+const percentX = computed(() => elementWidth.value ? Math.round((clampedX.value / elementWidth.value) * 100) : 0);
+const percentY = computed(() => elementHeight.value ? Math.round((clampedY.value / elementHeight.value) * 100) : 0);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="area"
+      class="relative h-44 w-full overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) transition-colors"
+      :class="isOutside ? 'border-(--border)' : 'border-(--accent)'"
+    >
+      <!-- Spotlight that follows the cursor -->
+      <div
+        class="pointer-events-none absolute size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--accent)/15 blur-xl transition-opacity duration-200"
+        :class="isOutside ? 'opacity-0' : 'opacity-100'"
+        :style="{ left: `${clampedX}px`, top: `${clampedY}px` }"
+      />
+
+      <!-- Crosshair dot -->
+      <div
+        class="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) transition-opacity duration-150"
+        :class="isOutside ? 'opacity-0' : 'opacity-100'"
+        :style="{ left: `${clampedX}px`, top: `${clampedY}px` }"
+      />
+
+      <span
+        class="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-(--fg-subtle) transition-opacity"
+        :class="isOutside ? 'opacity-100' : 'opacity-0'"
+      >
+        Move your cursor here
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">elementX</p>
+        <p class="mt-1 font-mono text-lg font-bold tabular-nums text-(--fg)">{{ Math.round(clampedX) }}<span class="text-sm font-normal text-(--fg-subtle)">px</span></p>
+        <p class="mt-0.5 text-xs text-(--fg-muted) tabular-nums">{{ percentX }}%</p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">elementY</p>
+        <p class="mt-1 font-mono text-lg font-bold tabular-nums text-(--fg)">{{ Math.round(clampedY) }}<span class="text-sm font-normal text-(--fg-subtle)">px</span></p>
+        <p class="mt-0.5 text-xs text-(--fg-muted) tabular-nums">{{ percentY }}%</p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)">Cursor</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="isOutside
+          ? 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'
+          : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+      >
+        <span class="size-1.5 rounded-full" :class="isOutside ? 'bg-(--fg-subtle)' : 'bg-emerald-500'" />
+        {{ isOutside ? 'Outside' : 'Inside' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Coordinates are relative to the box's top-left corner &mdash; observed via <code class="font-mono">useElementBounding</code>, so they stay correct as it moves or resizes.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue b/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
new file mode 100644
index 0000000..2fd2ec5
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useMousePressed/demo.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { useMousePressed } from './index';
+
+const pad = useTemplateRef<HTMLElement>('pad');
+
+const pressCount = ref(0);
+
+// Only track presses that begin on the pad, with press/release callbacks.
+const { pressed, sourceType } = useMousePressed({
+  target: pad,
+  onPressed: () => { pressCount.value += 1; },
+});
+
+const sourceLabel = {
+  mouse: 'Mouse',
+  touch: 'Touch',
+} as const;
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="pad"
+      class="flex h-40 w-full cursor-pointer select-none items-center justify-center rounded-xl border-2 text-center transition-all duration-150"
+      :class="pressed
+        ? 'scale-[0.98] border-(--accent) bg-(--accent)/10'
+        : 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
+    >
+      <div class="flex flex-col items-center gap-2">
+        <span
+          class="flex size-12 items-center justify-center rounded-full transition-all duration-150"
+          :class="pressed ? 'scale-110 bg-(--accent) text-(--accent-fg)' : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+        >
+          <span class="size-3 rounded-full bg-current" />
+        </span>
+        <span class="text-sm font-medium" :class="pressed ? 'text-(--accent-text)' : 'text-(--fg-muted)'">
+          {{ pressed ? 'Holding…' : 'Press and hold' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pressed</p>
+        <p class="mt-1 text-sm font-semibold" :class="pressed ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'">
+          {{ pressed ? 'true' : 'false' }}
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</p>
+        <p class="mt-1 font-mono text-sm font-semibold text-(--fg)">
+          {{ sourceType ? sourceLabel[sourceType] : '—' }}
+        </p>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Presses</p>
+        <p class="mt-1 font-mono text-sm font-bold tabular-nums text-(--fg)">{{ pressCount }}</p>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Tracking is scoped to the pad via <code class="font-mono">target</code>, but release is global &mdash; let go anywhere and <code class="font-mono">pressed</code> flips back.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useNetwork/demo.vue b/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
new file mode 100644
index 0000000..39523da
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useNetwork/demo.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useNetwork } from './index';
+
+const {
+  isSupported,
+  isOnline,
+  offlineAt,
+  onlineAt,
+  downlink,
+  downlinkMax,
+  effectiveType,
+  rtt,
+  saveData,
+  type,
+} = useNetwork();
+
+const lastTransition = computed(() => {
+  const ts = isOnline.value ? onlineAt.value : offlineAt.value;
+  if (!ts)
+    return '—';
+  return new Date(ts).toLocaleTimeString();
+});
+
+const speedTiers: Record<string, number> = { 'slow-2g': 1, '2g': 2, '3g': 3, '4g': 4 };
+const speedLevel = computed(() => effectiveType.value ? speedTiers[effectiveType.value] ?? 0 : 0);
+
+function fmt(value: number | undefined, unit: string): string {
+  return value === undefined ? '—' : `${value}${unit}`;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="flex items-center justify-between rounded-xl border p-4 transition-colors"
+      :class="isOnline
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-red-500/30 bg-red-500/10'"
+    >
+      <div class="flex items-center gap-3">
+        <span
+          class="flex size-9 items-center justify-center rounded-full"
+          :class="isOnline ? 'bg-emerald-500/20' : 'bg-red-500/20'"
+        >
+          <span
+            class="size-2.5 rounded-full"
+            :class="isOnline ? 'animate-pulse bg-emerald-500' : 'bg-red-500'"
+          />
+        </span>
+        <div>
+          <p class="text-sm font-semibold" :class="isOnline ? 'text-emerald-700 dark:text-emerald-300' : 'text-red-700 dark:text-red-300'">
+            {{ isOnline ? 'Online' : 'Offline' }}
+          </p>
+          <p class="text-xs text-(--fg-muted)">
+            {{ isOnline ? 'since' : 'at' }} {{ lastTransition }}
+          </p>
+        </div>
+      </div>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ type }}
+      </span>
+    </div>
+
+    <div v-if="isSupported" class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-3 flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Effective type</span>
+        <span class="font-mono text-sm font-semibold text-(--accent-text)">{{ effectiveType ?? 'unknown' }}</span>
+      </div>
+      <div class="flex gap-1">
+        <span
+          v-for="tier in 4"
+          :key="tier"
+          class="h-1.5 flex-1 rounded-full transition-colors"
+          :class="tier <= speedLevel ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+        />
+      </div>
+
+      <dl class="mt-4 grid grid-cols-2 gap-3">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Downlink</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(downlink, ' Mbps') }}</dd>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">RTT</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(rtt, ' ms') }}</dd>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Max downlink</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold tabular-nums text-(--fg)">{{ fmt(downlinkMax, ' Mbps') }}</dd>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <dt class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Save data</dt>
+          <dd class="mt-1 font-mono text-sm font-semibold text-(--fg)">{{ saveData === undefined ? '—' : (saveData ? 'on' : 'off') }}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div v-else class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center">
+      <p class="text-sm font-medium text-amber-700 dark:text-amber-400">
+        Network Information API not supported
+      </p>
+      <p class="mt-1 text-xs text-(--fg-muted)">
+        Online status still works; connection details are unavailable in this browser.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Toggle your device's connection (or DevTools network conditions) to watch the state react live.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useOnline/demo.vue b/vue/toolkit/src/composables/sensors/useOnline/demo.vue
new file mode 100644
index 0000000..f700f6d
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useOnline/demo.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useOnline } from './index';
+
+// Returns a single readonly ref — bind it directly, do not destructure.
+const online = useOnline();
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="flex flex-col items-center gap-3 rounded-xl border p-8 transition-colors duration-300"
+      :class="online
+        ? 'border-emerald-500/30 bg-emerald-500/10'
+        : 'border-red-500/30 bg-red-500/10'"
+    >
+      <span
+        class="flex size-16 items-center justify-center rounded-full transition-colors duration-300"
+        :class="online ? 'bg-emerald-500/20' : 'bg-red-500/20'"
+      >
+        <span
+          class="size-4 rounded-full transition-colors duration-300"
+          :class="online ? 'animate-pulse bg-emerald-500' : 'bg-red-500'"
+        />
+      </span>
+      <div class="text-center">
+        <p
+          class="text-lg font-bold transition-colors duration-300"
+          :class="online ? 'text-emerald-700 dark:text-emerald-300' : 'text-red-700 dark:text-red-300'"
+        >
+          {{ online ? 'You are online' : 'You are offline' }}
+        </p>
+        <p class="mt-0.5 text-xs text-(--fg-muted)">
+          Reflects <code class="font-mono">navigator.onLine</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)"><code class="font-mono">online.value</code></span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+        :class="online
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'bg-red-500/10 text-red-600 dark:text-red-400'"
+      >
+        <span class="size-1.5 rounded-full" :class="online ? 'bg-emerald-500' : 'bg-red-500'" />
+        {{ online ? 'true' : 'false' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Disable Wi-Fi or flip DevTools to <span class="font-medium text-(--fg-muted)">Offline</span> and the banner updates instantly.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue b/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
new file mode 100644
index 0000000..0859c7f
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePageLeave/demo.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { usePageLeave } from './index';
+
+const leaveCount = ref(0);
+
+// Single readonly ref — bind directly. onChange fires when the flag flips.
+const hasLeft = usePageLeave({
+  onChange: (isLeft) => {
+    if (isLeft)
+      leaveCount.value += 1;
+  },
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      class="flex flex-col items-center gap-3 rounded-xl border p-8 transition-colors duration-300"
+      :class="hasLeft
+        ? 'border-(--accent) bg-(--accent)/10'
+        : 'border-(--border) bg-(--bg-inset)'"
+    >
+      <span
+        class="flex size-16 items-center justify-center rounded-full text-2xl transition-all duration-300"
+        :class="hasLeft ? 'scale-110 bg-(--accent) text-(--accent-fg)' : 'bg-(--bg-elevated) text-(--fg-subtle)'"
+      >
+        {{ hasLeft ? '👋' : '👀' }}
+      </span>
+      <p
+        class="text-base font-semibold transition-colors duration-300"
+        :class="hasLeft ? 'text-(--accent-text)' : 'text-(--fg)'"
+      >
+        {{ hasLeft ? 'Come back!' : 'Pointer is on the page' }}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <span class="text-sm text-(--fg-muted)">State</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="hasLeft
+            ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          <span class="size-1.5 rounded-full" :class="hasLeft ? 'bg-amber-500' : 'bg-emerald-500'" />
+          {{ hasLeft ? 'Left' : 'Inside' }}
+        </span>
+      </div>
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <span class="text-sm text-(--fg-muted)">Exits</span>
+        <span class="font-mono text-sm font-bold tabular-nums text-(--fg)">{{ leaveCount }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Move your cursor out of the browser viewport &mdash; the classic <span class="font-medium text-(--fg-muted)">exit-intent</span> signal for save-cart prompts and the like.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useParallax/demo.vue b/vue/toolkit/src/composables/sensors/useParallax/demo.vue
new file mode 100644
index 0000000..67d1264
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useParallax/demo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { useParallax } from './index';
+
+const container = useTemplateRef<HTMLElement>('container');
+const { roll, tilt, source } = useParallax(container);
+
+// How aggressively the card reacts (degrees at the edges).
+const intensity = ref(20);
+
+const cardStyle = computed(() => ({
+  transform: `perspective(800px) rotateX(${roll.value * intensity.value}deg) rotateY(${tilt.value * intensity.value}deg)`,
+}));
+
+const layer = (depth: number) => ({
+  transform: `translateX(${tilt.value * depth}px) translateY(${-roll.value * depth}px)`,
+});
+
+const fmt = (n: number) => (n >= 0 ? '+' : '') + n.toFixed(3);
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="container"
+      class="relative grid place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-8"
+    >
+      <div
+        class="relative aspect-[4/3] w-full max-w-[16rem] rounded-xl border border-(--border-strong) bg-(--bg-elevated) shadow-xl transition-transform duration-75 ease-out will-change-transform"
+        :style="cardStyle"
+      >
+        <div class="absolute inset-0 grid place-items-center" :style="layer(8)">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            depth 8
+          </span>
+        </div>
+        <div class="absolute inset-0 grid place-items-center" :style="layer(24)">
+          <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">
+            Parallax
+          </span>
+        </div>
+        <div class="absolute bottom-3 right-3" :style="layer(40)">
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+            depth 40
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-center text-xs text-(--fg-subtle)">
+      Move your pointer over the panel &mdash; layers shift by depth.
+    </p>
+
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Intensity
+        </label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ intensity }}&deg;</span>
+      </div>
+      <input
+        v-model.number="intensity"
+        type="range"
+        min="0"
+        max="45"
+        step="1"
+        class="w-full accent-(--accent)"
+      >
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Roll</div>
+        <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">{{ fmt(roll) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tilt</div>
+        <div class="mt-1 font-mono text-sm tabular-nums text-(--fg)">{{ fmt(tilt) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Source</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ source }}</div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePointer/demo.vue b/vue/toolkit/src/composables/sensors/usePointer/demo.vue
new file mode 100644
index 0000000..ac04c30
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointer/demo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import { usePointer } from './index';
+
+const area = useTemplateRef<HTMLElement>('area');
+const { x, y, pressure, tiltX, tiltY, pointerType, isInside } = usePointer({ target: area });
+
+// Position the crosshair relative to the tracked element.
+const dotStyle = computed(() => ({
+  left: `${x.value}px`,
+  top: `${y.value}px`,
+}));
+
+const typeLabel = computed(() => pointerType.value ?? 'none');
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="area"
+      class="relative h-44 touch-none overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) [background-image:radial-gradient(var(--border)_1px,transparent_1px)] [background-size:16px_16px]"
+    >
+      <div
+        v-if="isInside"
+        class="pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-1/2 transition-transform duration-75 ease-out"
+        :style="dotStyle"
+      >
+        <div
+          class="rounded-full bg-(--accent) opacity-80"
+          :style="{ width: `${12 + pressure * 40}px`, height: `${12 + pressure * 40}px` }"
+        />
+      </div>
+      <div class="pointer-events-none absolute inset-0 grid place-items-center">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          {{ isInside ? 'Tracking' : 'Move your pointer here' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Position</div>
+        <div class="mt-1">{{ Math.round(x) }}, {{ Math.round(y) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Pressure</div>
+        <div class="mt-1">{{ pressure.toFixed(2) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tilt X / Y</div>
+        <div class="mt-1">{{ tiltX }} / {{ tiltY }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Type</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ typeLabel }}</div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-sm text-(--fg-muted)">Pointer inside</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+        :class="isInside
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full transition" :class="isInside ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+        {{ isInside ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Pressure scales the dot. Pen tilt &amp; pressure show real values on supporting hardware.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue b/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
new file mode 100644
index 0000000..48970f9
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerLock/demo.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, reactive, useTemplateRef } from 'vue';
+import { usePointerLock } from './index';
+
+const stage = useTemplateRef<HTMLElement>('stage');
+const { isSupported, element, lock, unlock } = usePointerLock(stage);
+
+const isLocked = computed(() => !!element.value);
+
+// Accumulate relative movement deltas while the pointer is locked.
+const pos = reactive({ x: 50, y: 50 });
+
+function onMove(event: PointerEvent) {
+  if (!isLocked.value)
+    return;
+
+  pos.x = clamp(pos.x + event.movementX * 0.25);
+  pos.y = clamp(pos.y + event.movementY * 0.25);
+}
+
+function clamp(value: number) {
+  return Math.min(100, Math.max(0, value));
+}
+
+async function toggle() {
+  if (isLocked.value)
+    await unlock();
+  else
+    await lock(stage);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <template v-if="isSupported">
+      <div
+        ref="stage"
+        class="relative h-44 cursor-pointer select-none overflow-hidden rounded-xl border bg-(--bg-inset) transition"
+        :class="isLocked ? 'border-(--accent)' : 'border-(--border)'"
+        @click="toggle"
+        @pointermove="onMove"
+      >
+        <div
+          class="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-(--accent-fg) bg-(--accent) shadow-lg transition-[box-shadow]"
+          :style="{ left: `${pos.x}%`, top: `${pos.y}%` }"
+        />
+        <div class="pointer-events-none absolute inset-0 grid place-items-center">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+            {{ isLocked ? 'Locked — move your mouse' : 'Click to lock pointer' }}
+          </span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+        :class="isLocked
+          ? 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'
+          : 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'"
+        @click="toggle"
+      >
+        {{ isLocked ? 'Release pointer (Esc)' : 'Lock pointer' }}
+      </button>
+
+      <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+        <span class="text-sm text-(--fg-muted)">Lock state</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition"
+          :class="isLocked
+            ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span class="size-1.5 rounded-full transition" :class="isLocked ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
+          {{ isLocked ? 'Locked' : 'Unlocked' }}
+        </span>
+      </div>
+
+      <p class="text-xs text-(--fg-subtle)">
+        While locked, the cursor is hidden and only relative
+        <code class="font-mono">movementX/Y</code> drives the dot. Press
+        <kbd class="rounded border border-(--border) bg-(--bg-elevated) px-1 font-mono text-[0.7rem]">Esc</kbd>
+        to release.
+      </p>
+    </template>
+
+    <div
+      v-else
+      class="flex flex-col items-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-6 text-center"
+    >
+      <span class="text-sm font-medium text-amber-600 dark:text-amber-400">
+        Pointer Lock API not supported
+      </span>
+      <span class="text-xs text-(--fg-subtle)">
+        This browser cannot lock the pointer to an element.
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue b/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
new file mode 100644
index 0000000..cb13864
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/usePointerSwipe/demo.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { usePointerSwipe } from './index';
+
+const surface = useTemplateRef<HTMLElement>('surface');
+
+const lastDirection = ref<string>('—');
+const swipeCount = ref(0);
+
+const { isSwiping, direction, distanceX, distanceY } = usePointerSwipe(surface, {
+  threshold: 40,
+  onSwipeEnd(_event, dir) {
+    if (dir !== 'none') {
+      lastDirection.value = dir;
+      swipeCount.value++;
+    }
+  },
+});
+
+const arrows: Record<string, string> = {
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+  none: '·',
+};
+
+// Follow the live drag while swiping, then snap back.
+const cardStyle = computed(() => {
+  if (!isSwiping.value)
+    return { transform: 'translate(0, 0)' };
+
+  return { transform: `translate(${-distanceX.value}px, ${-distanceY.value}px)` };
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div
+      ref="surface"
+      class="relative grid h-44 touch-none place-items-center overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) select-none"
+    >
+      <div
+        class="grid size-24 place-items-center rounded-xl border border-(--border-strong) bg-(--bg-elevated) shadow-lg"
+        :class="isSwiping ? 'transition-none' : 'transition-transform duration-300 ease-out'"
+        :style="cardStyle"
+      >
+        <span class="font-mono text-3xl text-(--fg)">{{ arrows[direction] }}</span>
+      </div>
+      <span class="pointer-events-none absolute bottom-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Drag in any direction
+      </span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Direction</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">{{ direction }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Swiping</div>
+        <div
+          class="mt-1 font-mono text-sm"
+          :class="isSwiping ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'"
+        >
+          {{ isSwiping ? 'active' : 'idle' }}
+        </div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+        <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Distance X / Y</div>
+        <div class="mt-1">{{ Math.round(distanceX) }} / {{ Math.round(distanceY) }}</div>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last swipe</div>
+        <div class="mt-1 font-mono text-sm capitalize text-(--fg)">
+          {{ lastDirection }}
+          <span v-if="swipeCount" class="text-(--fg-subtle)">&times;{{ swipeCount }}</span>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Threshold is <code class="font-mono">40px</code> &mdash; shorter drags resolve to
+      <code class="font-mono">none</code>.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue b/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
new file mode 100644
index 0000000..7245ebe
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScreenOrientation/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useScreenOrientation } from './index';
+import type { OrientationLockType } from './index';
+
+const { isSupported, orientation, angle, lockOrientation, unlockOrientation } = useScreenOrientation();
+
+const error = ref<string | null>(null);
+const locked = ref<OrientationLockType | null>(null);
+
+const locks: OrientationLockType[] = ['portrait', 'landscape', 'any'];
+
+const isLandscape = computed(() => orientation.value?.startsWith('landscape') ?? false);
+
+async function applyLock(type: OrientationLockType) {
+  error.value = null;
+  try {
+    await lockOrientation(type);
+    locked.value = type;
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err.message : 'Lock failed';
+  }
+}
+
+function release() {
+  unlockOrientation();
+  locked.value = null;
+  error.value = null;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <template v-if="isSupported">
+      <div class="grid place-items-center rounded-xl border border-(--border) bg-(--bg-inset) p-6">
+        <div
+          class="flex items-center justify-center rounded-lg border-2 border-(--border-strong) bg-(--bg-elevated) text-(--fg-subtle) transition-all duration-300"
+          :class="isLandscape ? 'h-16 w-28' : 'h-28 w-16'"
+        >
+          <div class="size-2 rounded-full bg-(--accent)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+          <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Orientation</div>
+          <div class="mt-1 font-mono text-sm text-(--fg)">{{ orientation ?? '—' }}</div>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums text-(--fg)">
+          <div class="font-sans text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Angle</div>
+          <div class="mt-1">{{ angle }}&deg;</div>
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Lock to</div>
+        <div class="flex gap-2">
+          <button
+            v-for="type in locks"
+            :key="type"
+            type="button"
+            class="inline-flex flex-1 items-center justify-center rounded-lg border px-3 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
+            :class="locked === type
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="applyLock(type)"
+          >
+            {{ type }}
+          </button>
+        </div>
+        <button
+          type="button"
+          :disabled="!locked"
+          class="inline-flex w-full items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="release"
+        >
+          Unlock
+        </button>
+      </div>
+
+      <p v-if="error" class="rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-600 dark:text-amber-400">
+        {{ error }}
+      </p>
+      <p v-else class="text-xs text-(--fg-subtle)">
+        Locking requires fullscreen on most devices and is typically a no-op on desktop.
+      </p>
+    </template>
+
+    <div
+      v-else
+      class="flex flex-col items-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-6 text-center"
+    >
+      <span class="text-sm font-medium text-amber-600 dark:text-amber-400">
+        Screen Orientation API not supported
+      </span>
+      <span class="text-xs text-(--fg-subtle)">
+        This browser does not expose <code class="font-mono">screen.orientation</code>.
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useScroll/demo.vue b/vue/toolkit/src/composables/sensors/useScroll/demo.vue
new file mode 100644
index 0000000..07626c6
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScroll/demo.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useScroll } from './index';
+
+const el = useTemplateRef<HTMLElement>('el');
+
+const { x, y, isScrolling, arrivedState, directions } = useScroll(el, {
+  throttle: 16,
+  offset: { top: 8, bottom: 8 },
+});
+
+const items = Array.from({ length: 28 }, (_, i) => ({
+  id: i + 1,
+  label: [
+    'Aurora', 'Basalt', 'Cobalt', 'Driftwood', 'Ember', 'Fjord',
+    'Glacier', 'Harbor', 'Indigo', 'Juniper', 'Kelp', 'Lichen',
+  ][i % 12],
+}));
+
+function scrollToTop() {
+  y.value = 0;
+}
+
+function scrollToBottom() {
+  if (el.value)
+    y.value = el.value.scrollHeight;
+}
+
+const edges = ['top', 'bottom'] as const;
+
+function arrowFor() {
+  if (directions.bottom)
+    return '↓';
+  if (directions.top)
+    return '↑';
+  return '·';
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll container</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isScrolling
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="size-1.5 rounded-full transition"
+          :class="isScrolling ? 'bg-emerald-500' : 'bg-(--fg-subtle)'"
+        />
+        {{ isScrolling ? 'scrolling' : 'idle' }}
+      </span>
+    </div>
+
+    <div
+      ref="el"
+      class="h-48 overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-2"
+    >
+      <ul class="flex flex-col gap-1">
+        <li
+          v-for="item in items"
+          :key="item.id"
+          class="flex items-center justify-between rounded-lg bg-(--bg-inset) px-3 py-2 text-sm text-(--fg)"
+        >
+          <span class="font-medium">{{ item.label }}</span>
+          <span class="font-mono text-xs text-(--fg-subtle)">#{{ item.id }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+      <div class="flex items-center justify-between">
+        <span class="text-(--fg-muted)">offset</span>
+        <span>x {{ Math.round(x) }} · y {{ Math.round(y) }} {{ arrowFor() }}</span>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <div
+        v-for="edge in edges"
+        :key="edge"
+        class="flex flex-1 flex-col items-center gap-1 rounded-lg border p-2 text-xs transition"
+        :class="arrivedState[edge]
+          ? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
+          : 'border-(--border) bg-(--bg-elevated) text-(--fg-subtle)'"
+      >
+        <span class="font-medium uppercase tracking-wide">{{ edge }}</span>
+        <span class="font-mono">{{ arrivedState[edge] ? 'arrived' : '—' }}</span>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.top"
+        @click="scrollToTop"
+      >
+        Scroll to top
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="arrivedState.bottom"
+        @click="scrollToBottom"
+      >
+        Scroll to bottom
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue b/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
new file mode 100644
index 0000000..b857a99
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useScrollLock/demo.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useScrollLock } from './index';
+
+const el = useTemplateRef<HTMLElement>('el');
+const isLocked = useScrollLock(el);
+
+const lines = [
+  'The kingfisher dives where the river bends.',
+  'Reeds lean low over the slow green water.',
+  'A heron stands knee-deep in the shallows.',
+  'Dragonflies stitch the air above the lilies.',
+  'Sunlight breaks across the rippling surface.',
+  'Trout shadows drift beneath the willow roots.',
+  'The current folds and unfolds the weeds.',
+  'Far off, a mill wheel turns and turns.',
+];
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Scroll lock</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isLocked
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ isLocked ? 'locked' : 'free' }}
+      </span>
+    </div>
+
+    <div
+      ref="el"
+      class="h-44 overflow-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-4"
+    >
+      <p
+        v-for="(line, i) in lines"
+        :key="i"
+        class="py-1.5 text-sm leading-relaxed text-(--fg)"
+      >
+        {{ line }}
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      {{ isLocked ? 'Overflow is hidden — the panel above will not scroll.' : 'Try scrolling the panel, then lock it.' }}
+    </p>
+
+    <div class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="isLocked"
+        class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition cursor-pointer focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        :class="isLocked ? 'bg-(--accent)' : 'bg-(--bg-elevated)'"
+        @click="isLocked = !isLocked"
+      >
+        <span
+          class="inline-block size-4 rounded-full bg-(--bg) shadow transition"
+          :class="isLocked ? 'translate-x-6' : 'translate-x-1'"
+        />
+      </button>
+      <span class="text-sm font-medium text-(--fg)">Lock scrolling</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useSwipe/demo.vue b/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
new file mode 100644
index 0000000..c311607
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useSwipe/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue';
+import { useSwipe } from './index';
+
+const el = useTemplateRef<HTMLElement>('el');
+
+const lastDirection = ref<'up' | 'down' | 'left' | 'right' | 'none'>('none');
+
+const { isSwiping, direction, lengthX, lengthY, coordsStart, coordsEnd } = useSwipe(el, {
+  passive: false,
+  threshold: 40,
+  onSwipeEnd(_event, dir) {
+    lastDirection.value = dir;
+  },
+});
+
+// Live drag offset while actively swiping, clamped so the card stays in view.
+const offsetX = computed(() => (isSwiping.value ? Math.max(-80, Math.min(80, lengthX.value)) : 0));
+const offsetY = computed(() => (isSwiping.value ? Math.max(-40, Math.min(40, lengthY.value)) : 0));
+
+const arrows: Record<string, string> = {
+  up: '↑',
+  down: '↓',
+  left: '←',
+  right: '→',
+  none: '·',
+};
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Swipe area (touch / drag)</span>
+
+    <div
+      ref="el"
+      class="relative flex h-40 touch-none select-none items-center justify-center overflow-hidden rounded-xl border border-(--border-strong) bg-(--bg-inset)"
+    >
+      <div
+        class="flex flex-col items-center gap-1 rounded-lg border border-(--border) bg-(--bg-elevated) px-6 py-4 shadow-sm"
+        :class="isSwiping ? 'transition-none' : 'transition-transform duration-300'"
+        :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
+      >
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ arrows[direction] }}</span>
+        <span class="text-xs text-(--fg-subtle)">{{ isSwiping ? 'swiping…' : 'swipe me' }}</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        <div class="flex items-center justify-between">
+          <span class="text-(--fg-muted)">Δx</span>
+          <span>{{ Math.round(lengthX) }}px</span>
+        </div>
+        <div class="mt-1 flex items-center justify-between">
+          <span class="text-(--fg-muted)">Δy</span>
+          <span>{{ Math.round(lengthY) }}px</span>
+        </div>
+      </div>
+      <div class="flex flex-col justify-center gap-1 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last swipe</span>
+        <span class="font-mono text-sm font-medium capitalize text-(--accent-text)">{{ lastDirection }}</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted) tabular-nums">
+      start ({{ Math.round(coordsStart.x) }}, {{ Math.round(coordsStart.y) }})
+      → end ({{ Math.round(coordsEnd.x) }}, {{ Math.round(coordsEnd.y) }})
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      On a desktop, click and drag with touch emulation; on touch devices, swipe in any direction.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue b/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
new file mode 100644
index 0000000..14eb2ec
--- /dev/null
+++ b/vue/toolkit/src/composables/sensors/useTextSelection/demo.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTextSelection } from './index';
+
+const { text, ranges, rects } = useTextSelection();
+
+const charCount = computed(() => text.value.length);
+const wordCount = computed(() => {
+  const trimmed = text.value.trim();
+  return trimmed ? trimmed.split(/\s+/).length : 0;
+});
+
+const sample = 'Select any part of this paragraph with your cursor. '
+  + 'The composable tracks the live selection through Window.getSelection, '
+  + 'exposing the selected text, its bounding rectangles, and the underlying '
+  + 'Range objects — all fully reactive.';
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Select some text</span>
+
+    <p class="select-text rounded-xl border border-(--border) bg-(--bg-elevated) p-4 text-sm leading-relaxed text-(--fg) selection:bg-(--accent) selection:text-(--accent-fg)">
+      {{ sample }}
+    </p>
+
+    <div class="grid grid-cols-3 gap-2">
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ charCount }}</span>
+        <span class="text-xs text-(--fg-subtle)">chars</span>
+      </div>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ wordCount }}</span>
+        <span class="text-xs text-(--fg-subtle)">words</span>
+      </div>
+      <div class="flex flex-col items-center gap-0.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ranges.length }}</span>
+        <span class="text-xs text-(--fg-subtle)">ranges</span>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Selected text</span>
+      <p v-if="text" class="mt-1.5 break-words font-mono text-sm text-(--accent-text)">
+        “{{ text }}”
+      </p>
+      <p v-else class="mt-1.5 font-mono text-sm text-(--fg-subtle)">
+        Nothing selected yet.
+      </p>
+    </div>
+
+    <div v-if="rects.length" class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg-muted) tabular-nums">
+      first rect · {{ Math.round(rects[0]!.width) }} × {{ Math.round(rects[0]!.height) }} px
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/createSharedComposable/demo.vue b/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
new file mode 100644
index 0000000..c94f87d
--- /dev/null
+++ b/vue/toolkit/src/composables/state/createSharedComposable/demo.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { defineComponent, h, onScopeDispose, ref, shallowRef } from 'vue';
+import { createSharedComposable } from './index';
+
+// A tiny composable that holds a counter plus a per-instance setup id, so we can
+// observe how many independent instances actually get created behind the scenes.
+let instanceCounter = 0;
+
+function useLiveCounter() {
+  const setupId = ++instanceCounter;
+  const count = shallowRef(0);
+
+  // Demos render client-only, so the timer API is always available here.
+  const id = setInterval(() => {
+    count.value += 1;
+  }, 1000);
+
+  onScopeDispose(() => clearInterval(id));
+
+  return { count, setupId };
+}
+
+// Shared variant: every consumer reuses the SAME instance + ticking interval.
+const useSharedCounter = createSharedComposable(useLiveCounter);
+
+// A subscriber widget that consumes the shared composable on mount and releases
+// it on unmount (ref-counting drives scope creation / disposal).
+const Subscriber = defineComponent({
+  props: { label: { type: String, required: true } },
+  setup(props) {
+    const { count, setupId } = useSharedCounter();
+    return () =>
+      h('div', { class: 'flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2' }, [
+        h('span', { class: 'text-sm font-medium text-(--fg)' }, props.label),
+        h('span', { class: 'font-mono text-sm tabular-nums text-(--accent-text)' }, `count ${count.value} · #${setupId}`),
+      ]);
+  },
+});
+
+const subscribers = ref<string[]>(['Consumer A', 'Consumer B']);
+const names = ['A', 'B', 'C', 'D', 'E'];
+
+function addSubscriber() {
+  const next = names[subscribers.value.length];
+  if (next)
+    subscribers.value.push(`Consumer ${next}`);
+}
+
+function removeSubscriber() {
+  subscribers.value.pop();
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared composable</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        {{ subscribers.length }} active
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <div v-if="subscribers.length" class="flex flex-col gap-2">
+        <Subscriber
+          v-for="name in subscribers"
+          :key="name"
+          :label="name"
+        />
+      </div>
+      <p v-else class="px-3 py-6 text-center text-sm text-(--fg-subtle)">
+        No consumers — the shared scope is disposed and its interval cleared.
+      </p>
+    </div>
+
+    <p class="text-xs leading-relaxed text-(--fg-subtle)">
+      Every consumer reads the same count and the same setup id (<span class="font-mono">#</span>),
+      proving a single instance and one interval back all of them. Remove every
+      consumer to dispose the scope; adding one again creates a fresh instance.
+    </p>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="subscribers.length >= names.length"
+        @click="addSubscriber"
+      >
+        Add consumer
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!subscribers.length"
+        @click="removeSubscriber"
+      >
+        Remove consumer
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useAppSharedState/demo.vue b/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
new file mode 100644
index 0000000..f014e3d
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useAppSharedState/demo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useAppSharedState } from './index';
+
+// Build one shared store; every consumer that calls useStore() gets the SAME
+// reactive object back, so edits in one panel are reflected in the other.
+const useStore = useAppSharedState(() => {
+  const state = reactive({ likes: 0, lastBy: '—' });
+  const like = (by: string) => {
+    state.likes++;
+    state.lastBy = by;
+  };
+  return { state, like };
+});
+
+// Two independent "components" subscribing to the same shared state.
+const alice = useStore();
+const bob = useStore();
+
+const total = computed(() => alice.state.likes);
+</script>
+
+<template>
+  <div class="w-full max-w-md flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col items-center gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Shared likes</span>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ total }}</span>
+      <span class="text-xs text-(--fg-subtle)">last reaction by {{ alice.state.lastBy }}</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <!-- Consumer A -->
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <span class="flex size-7 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">A</span>
+          <span class="text-sm font-medium text-(--fg)">Alice’s panel</span>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm tabular-nums text-(--fg)">
+          reads {{ alice.state.likes }}
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="alice.like('Alice')"
+        >
+          ♥ Like
+        </button>
+      </div>
+
+      <!-- Consumer B -->
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <span class="flex size-7 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">B</span>
+          <span class="text-sm font-medium text-(--fg)">Bob’s panel</span>
+        </div>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-center font-mono text-sm tabular-nums text-(--fg)">
+          reads {{ bob.state.likes }}
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="bob.like('Bob')"
+        >
+          ♥ Like
+        </button>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Both panels call <span class="font-mono text-(--fg-muted)">useStore()</span> independently yet share one
+      reactive instance — like in either column updates the other instantly.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useAsyncState/demo.vue b/vue/toolkit/src/composables/state/useAsyncState/demo.vue
new file mode 100644
index 0000000..074d657
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useAsyncState/demo.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useAsyncState } from './index';
+
+interface Profile {
+  name: string;
+  role: string;
+  commits: number;
+}
+
+const roster: Profile[] = [
+  { name: 'Ada Lovelace', role: 'Staff Engineer', commits: 1843 },
+  { name: 'Grace Hopper', role: 'Compiler Lead', commits: 2056 },
+  { name: 'Alan Turing', role: 'Research', commits: 974 },
+];
+
+// Simulated request: succeeds with a roster entry, or rejects to show error UI.
+function fetchProfile(id: number): Promise<Profile> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (id < 0) {
+        reject(new Error('Profile not found (404)'));
+        return;
+      }
+      resolve(roster[id % roster.length]!);
+    }, 800);
+  });
+}
+
+const id = ref(0);
+
+const { state, isLoading, isReady, error, execute } = useAsyncState<Profile | null, [number]>(
+  args => fetchProfile(args),
+  null,
+  { immediate: false, resetOnExecute: true },
+);
+
+const errorMessage = computed(() => (error.value instanceof Error ? error.value.message : String(error.value)));
+
+function load() {
+  // Re-trigger with no delay, passing the current id as a param.
+  execute(0, id.value);
+}
+
+function loadMissing() {
+  execute(0, -1);
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4 min-h-40">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Profile</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          <span
+            class="size-1.5 rounded-full transition"
+            :class="isLoading ? 'bg-amber-500 animate-pulse' : isReady ? 'bg-emerald-500' : error ? 'bg-red-500' : 'bg-(--fg-subtle)'"
+          />
+          {{ isLoading ? 'Loading' : isReady ? 'Ready' : error ? 'Error' : 'Idle' }}
+        </span>
+      </div>
+
+      <!-- Loading skeleton -->
+      <div v-if="isLoading" class="flex items-center gap-3">
+        <div class="size-12 shrink-0 rounded-full bg-(--bg-inset) animate-pulse" />
+        <div class="flex flex-1 flex-col gap-2">
+          <div class="h-3.5 w-2/3 rounded bg-(--bg-inset) animate-pulse" />
+          <div class="h-3 w-1/2 rounded bg-(--bg-inset) animate-pulse" />
+        </div>
+      </div>
+
+      <!-- Error state -->
+      <div
+        v-else-if="error"
+        class="flex items-center gap-3 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-400"
+      >
+        {{ errorMessage }}
+      </div>
+
+      <!-- Loaded data -->
+      <div v-else-if="state" class="flex items-center gap-3">
+        <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-(--accent-subtle) text-lg font-semibold text-(--accent-text)">
+          {{ state.name.charAt(0) }}
+        </div>
+        <div class="flex flex-1 flex-col">
+          <span class="font-semibold text-(--fg)">{{ state.name }}</span>
+          <span class="text-sm text-(--fg-muted)">{{ state.role }}</span>
+          <span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ state.commits.toLocaleString() }} commits</span>
+        </div>
+      </div>
+
+      <!-- Idle / empty -->
+      <div v-else class="flex flex-1 items-center justify-center text-sm text-(--fg-subtle)">
+        Press “Load” to fetch a profile.
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="profile-id">Profile id</label>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">#{{ id }}</span>
+      </div>
+      <input
+        id="profile-id"
+        v-model.number="id"
+        type="range"
+        min="0"
+        max="5"
+        step="1"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        type="button"
+        :disabled="isLoading"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="load"
+      >
+        {{ isLoading ? 'Loading…' : 'Load' }}
+      </button>
+      <button
+        type="button"
+        :disabled="isLoading"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="loadMissing"
+      >
+        Trigger error
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useContextFactory/demo.vue b/vue/toolkit/src/composables/state/useContextFactory/demo.vue
new file mode 100644
index 0000000..2f3ede4
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useContextFactory/demo.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, defineComponent, h, reactive } from 'vue';
+import { useContextFactory } from './index';
+
+interface ThemeContext {
+  accent: string;
+  density: 'cozy' | 'compact';
+}
+
+// Create a typed, uniquely-keyed context once. `provide` is used by the parent,
+// `inject` by any descendant — no string-key collisions, fully type-safe.
+const ThemeCtx = useContextFactory<ThemeContext>('DemoTheme');
+
+// Parent owns the source of truth and provides it down the tree.
+const theme = reactive<ThemeContext>({ accent: '#6366f1', density: 'cozy' });
+ThemeCtx.provide(theme);
+
+const accents = ['#6366f1', '#10b981', '#f43f5e', '#0ea5e9'];
+
+// A descendant component that reads context via inject() — no props drilling.
+const ThemedCard = defineComponent({
+  name: 'ThemedCard',
+  setup() {
+    const ctx = ThemeCtx.inject();
+    const pad = computed(() => (ctx.density === 'cozy' ? '16px' : '8px'));
+    return () =>
+      h(
+        'div',
+        {
+          class: 'rounded-lg border border-(--border) bg-(--bg-inset)',
+          style: { padding: pad.value, borderLeft: `3px solid ${ctx.accent}` },
+        },
+        [
+          h('div', { class: 'text-sm font-medium text-(--fg)' }, 'Injected child'),
+          h(
+            'div',
+            { class: 'font-mono text-xs tabular-nums text-(--fg-muted)' },
+            `accent ${ctx.accent} · ${ctx.density}`,
+          ),
+        ],
+      );
+  },
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Provider (parent)</span>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs text-(--fg-muted)">Accent</span>
+        <div class="flex gap-2">
+          <button
+            v-for="color in accents"
+            :key="color"
+            type="button"
+            :aria-pressed="theme.accent === color"
+            class="size-8 rounded-lg border-2 transition active:scale-[0.95] cursor-pointer"
+            :class="theme.accent === color ? 'border-(--accent) scale-110' : 'border-(--border) hover:border-(--border-strong)'"
+            :style="{ backgroundColor: color }"
+            @click="theme.accent = color"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs text-(--fg-muted)">Density</span>
+        <div class="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+            :class="theme.density === 'cozy'
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="theme.density = 'cozy'"
+          >
+            Cozy
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+            :class="theme.density === 'compact'
+              ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+              : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+            @click="theme.density = 'compact'"
+          >
+            Compact
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Descendant resolves the value through inject(), no props passed in -->
+    <ThemedCard />
+
+    <p class="text-xs text-(--fg-subtle)">
+      The card reads context with <span class="font-mono text-(--fg-muted)">inject()</span> — change the controls above
+      and it updates without a single prop.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useCounter/demo.vue b/vue/toolkit/src/composables/state/useCounter/demo.vue
index fe65768..01d7de8 100644
--- a/vue/toolkit/src/composables/state/useCounter/demo.vue
+++ b/vue/toolkit/src/composables/state/useCounter/demo.vue
@@ -1,6 +1,94 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCounter } from './index';
+
+// Bounded counter: a quantity selector that never escapes 0..12.
+const MIN = 0;
+const MAX = 12;
+
+const { count, increment, decrement, set, reset } = useCounter(3, { min: MIN, max: MAX });
+
+const atMin = computed(() => count.value <= MIN);
+const atMax = computed(() => count.value >= MAX);
+const fillPercent = computed(() => ((count.value - MIN) / (MAX - MIN)) * 100);
+</script>
 
 <template>
-    <div>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tickets</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ MIN }} – {{ MAX }}
+        </span>
+      </div>
+
+      <!-- Big live readout with stepper controls -->
+      <div class="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          :disabled="atMin"
+          aria-label="Decrement"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) size-11 text-lg font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="decrement()"
+        >
+          −
+        </button>
+
+        <div class="flex flex-col items-center">
+          <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</span>
+          <span class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">in cart</span>
+        </div>
+
+        <button
+          type="button"
+          :disabled="atMax"
+          aria-label="Increment"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) size-11 text-lg font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="increment()"
+        >
+          +
+        </button>
+      </div>
+
+      <!-- Visual clamp feedback -->
+      <div class="h-2 overflow-hidden rounded-full border border-(--border) bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-all duration-200"
+          :style="{ width: `${fillPercent}%` }"
+        />
+      </div>
     </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Step actions</span>
+      <div class="grid grid-cols-3 gap-2">
+        <button
+          type="button"
+          :disabled="atMax"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="increment(5)"
+        >
+          +5
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="set(MAX)"
+        >
+          Max
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="reset()"
+        >
+          Reset
+        </button>
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        Values are clamped to <span class="font-mono text-(--fg-muted)">{{ MIN }}–{{ MAX }}</span> — try +5 near the top.
+      </p>
+    </div>
+  </div>
 </template>
diff --git a/vue/toolkit/src/composables/state/useCycleList/demo.vue b/vue/toolkit/src/composables/state/useCycleList/demo.vue
new file mode 100644
index 0000000..b3a77c3
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useCycleList/demo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCycleList } from './index';
+
+// Cycle through a small palette of theme accents.
+interface Swatch {
+  name: string;
+  hex: string;
+}
+
+const palette: Swatch[] = [
+  { name: 'Indigo', hex: '#6366f1' },
+  { name: 'Emerald', hex: '#10b981' },
+  { name: 'Amber', hex: '#f59e0b' },
+  { name: 'Rose', hex: '#f43f5e' },
+  { name: 'Sky', hex: '#0ea5e9' },
+];
+
+const { state, index, next, prev, go } = useCycleList(palette, {
+  getIndexOf: (value, list) => list.findIndex(item => item.hex === value.hex),
+});
+
+const position = computed(() => `${index.value + 1} / ${palette.length}`);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Accent</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          {{ position }}
+        </span>
+      </div>
+
+      <!-- Live preview of the currently selected swatch -->
+      <div class="flex items-center gap-4">
+        <div
+          class="size-16 shrink-0 rounded-xl border border-(--border-strong) shadow-inner transition-colors duration-300"
+          :style="{ backgroundColor: state.hex }"
+        />
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-(--fg)">{{ state.name }}</span>
+          <span class="font-mono text-sm uppercase tabular-nums text-(--fg-muted)">{{ state.hex }}</span>
+        </div>
+      </div>
+
+      <!-- prev / next controls -->
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="prev()"
+        >
+          ← Prev
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="next()"
+        >
+          Next →
+        </button>
+      </div>
+    </div>
+
+    <!-- index.value is writable: tap any swatch to jump straight to it -->
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Jump to</span>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="(swatch, i) in palette"
+          :key="swatch.hex"
+          type="button"
+          :aria-pressed="i === index"
+          :title="swatch.name"
+          class="size-9 rounded-lg border-2 transition active:scale-[0.95] cursor-pointer"
+          :class="i === index ? 'border-(--accent) scale-110' : 'border-(--border) hover:border-(--border-strong)'"
+          :style="{ backgroundColor: swatch.hex }"
+          @click="go(i)"
+        />
+      </div>
+      <p class="text-xs text-(--fg-subtle)">
+        Tabs call <span class="font-mono text-(--fg-muted)">go(i)</span>; arrows wrap around with
+        <span class="font-mono text-(--fg-muted)">next/prev</span>.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue b/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
new file mode 100644
index 0000000..24285c0
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useDebouncedRefHistory/demo.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDebouncedRefHistory } from './index';
+
+// A draft message the user types into. Rapid keystrokes collapse into a single
+// history record once typing pauses for `debounce` ms.
+const message = ref('The quick brown fox');
+
+const debounce = ref(400);
+
+const { history, undo, redo, canUndo, canRedo, clear } = useDebouncedRefHistory(message, {
+  debounce,
+  maxWait: 2000,
+  capacity: 8,
+});
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tracked draft</span>
+      <textarea
+        v-model="message"
+        rows="2"
+        placeholder="Type fast — bursts collapse into one record"
+        class="w-full resize-none rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </label>
+
+    <label class="flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Debounce delay</span>
+        <span class="font-mono text-xs tabular-nums text-(--fg-muted)">{{ debounce }}ms</span>
+      </div>
+      <input
+        v-model.number="debounce"
+        type="range"
+        min="0"
+        max="1200"
+        step="100"
+        class="w-full accent-(--accent)"
+      >
+    </label>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        :disabled="!canUndo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="undo"
+      >
+        Undo
+      </button>
+      <button
+        type="button"
+        :disabled="!canRedo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="redo"
+      >
+        Redo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">History</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          {{ history.length }} records
+        </span>
+      </div>
+      <ol class="flex flex-col gap-1.5">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+        >
+          <span class="truncate font-mono text-sm text-(--fg)">"{{ record.snapshot }}"</span>
+          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+            {{ i === 0 ? 'now' : formatTime(record.timestamp) }}
+          </span>
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useId/demo.vue b/vue/toolkit/src/composables/state/useId/demo.vue
new file mode 100644
index 0000000..c5ff319
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useId/demo.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useId } from './index';
+
+// An auto-generated, SSR-safe id — ideal for wiring <label for> to an input.
+const fieldId = useId('email-field');
+
+// A second id using a custom prefix, demonstrating how primitives namespace ids.
+const helpId = useId(undefined, 'dialog');
+
+// A "deterministic" id: when the caller supplies a value, it wins over the
+// generated one — exactly how a component would respect a user-provided `id` prop.
+const userProvided = ref('');
+const resolvedId = useId(() => userProvided.value || undefined, 'panel');
+
+const email = ref('');
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2.5">
+      <label :for="fieldId" class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Email
+      </label>
+      <input
+        :id="fieldId"
+        v-model="email"
+        type="email"
+        :aria-describedby="helpId"
+        placeholder="ada@example.com"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <p :id="helpId" class="text-xs text-(--fg-subtle)">
+        The <span class="font-mono">label</span>, <span class="font-mono">input</span> and this hint are
+        linked by generated ids — no hard-coded strings, no collisions.
+      </p>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums flex flex-col gap-1.5">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">field</span>
+        <span class="truncate">{{ fieldId }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-(--fg-subtle)">help</span>
+        <span class="truncate">{{ helpId }}</span>
+      </div>
+    </div>
+
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Deterministic override</span>
+      <input
+        v-model="userProvided"
+        type="text"
+        placeholder="Leave blank to auto-generate"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Resolved</span>
+      <span class="truncate font-mono text-sm text-(--accent-text) tabular-nums">{{ resolvedId }}</span>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useInjectionStore/demo.vue b/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
new file mode 100644
index 0000000..a6f3bed
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useInjectionStore/demo.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { useInjectionStore } from './index';
+
+// Define a store once: a shared cart state with a derived total.
+const { useProvidingState, useInjectedState } = useInjectionStore(() => {
+  const items = ref<Array<{ name: string; price: number }>>([
+    { name: 'Mechanical keyboard', price: 89 },
+    { name: 'USB-C hub', price: 35 },
+  ]);
+
+  const total = computed(() => items.value.reduce((sum, i) => sum + i.price, 0));
+
+  function add(name: string, price: number) {
+    items.value.push({ name, price });
+  }
+
+  function remove(index: number) {
+    items.value.splice(index, 1);
+  }
+
+  return { items, total, add, remove };
+});
+
+// The parent provides the state for its subtree.
+const cart = useProvidingState();
+
+const draftName = ref('Wrist rest');
+const draftPrice = ref(19);
+
+function addDraft() {
+  const name = draftName.value.trim();
+  if (name)
+    cart.add(name, Number(draftPrice.value) || 0);
+}
+
+// A nested child component injects the SAME store instance — no props drilled.
+const Summary = defineComponent({
+  setup() {
+    const injected = useInjectedState();
+    return { injected };
+  },
+  template: `
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex items-center justify-between">
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Injected in child</span>
+        <span class="text-xs text-(--fg-subtle)">{{ injected.items.length }} items</span>
+      </div>
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">\${{ injected.total }}</span>
+    </div>
+  `,
+});
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart (provided here)</span>
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="(item, i) in cart.items"
+          :key="i"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+        >
+          <span class="truncate text-sm text-(--fg)">{{ item.name }}</span>
+          <div class="flex shrink-0 items-center gap-2">
+            <span class="font-mono text-sm tabular-nums text-(--fg-muted)">${{ item.price }}</span>
+            <button
+              type="button"
+              aria-label="Remove item"
+              class="rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+              @click="cart.remove(i)"
+            >
+              ✕
+            </button>
+          </div>
+        </li>
+        <li v-if="!cart.items.length" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
+          Cart is empty
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex gap-2">
+      <input
+        v-model="draftName"
+        type="text"
+        placeholder="Item name"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @keydown.enter="addDraft"
+      >
+      <input
+        v-model.number="draftPrice"
+        type="number"
+        min="0"
+        aria-label="Price"
+        class="w-20 shrink-0 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) tabular-nums transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @keydown.enter="addDraft"
+      >
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="addDraft"
+      >
+        Add
+      </button>
+    </div>
+
+    <Summary />
+
+    <p class="text-xs text-(--fg-subtle)">
+      The parent calls <span class="font-mono">useProvidingState()</span>; the nested summary calls
+      <span class="font-mono">useInjectedState()</span> and reads the very same reactive cart.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useLastChanged/demo.vue b/vue/toolkit/src/composables/state/useLastChanged/demo.vue
new file mode 100644
index 0000000..bda5dc7
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useLastChanged/demo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import { useLastChanged } from './index';
+
+// A document title the user edits. `useLastChanged` records the timestamp of
+// every change so we can render a live "edited N seconds ago" indicator.
+const title = ref('Untitled document');
+
+const lastChanged = useLastChanged(title);
+
+// Tick once a second so the relative time stays fresh without re-triggering it.
+const now = ref(Date.now());
+const interval = setInterval(() => (now.value = Date.now()), 1000);
+onUnmounted(() => clearInterval(interval));
+
+const relative = computed(() => {
+  if (lastChanged.value === null)
+    return 'No changes yet';
+
+  const seconds = Math.max(0, Math.round((now.value - lastChanged.value) / 1000));
+  if (seconds < 1)
+    return 'just now';
+  if (seconds < 60)
+    return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}m ${seconds % 60}s ago`;
+});
+
+const exactTime = computed(() =>
+  lastChanged.value === null
+    ? '—'
+    : new Date(lastChanged.value).toLocaleTimeString(undefined, { hour12: false }),
+);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <label class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Document title</span>
+      <input
+        v-model="title"
+        type="text"
+        placeholder="Edit to update the timestamp"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </label>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last edited</span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+          :class="lastChanged === null
+            ? 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'
+            : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
+        >
+          <span class="h-1.5 w-1.5 rounded-full" :class="lastChanged === null ? 'bg-(--fg-subtle)' : 'bg-emerald-500'" />
+          {{ lastChanged === null ? 'untouched' : 'edited' }}
+        </span>
+      </div>
+
+      <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ relative }}</span>
+
+      <div class="h-px bg-(--border)" />
+
+      <div class="flex items-center justify-between">
+        <span class="text-xs text-(--fg-subtle)">Timestamp</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ exactTime }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue b/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
new file mode 100644
index 0000000..e0807f7
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useManualRefHistory/demo.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useManualRefHistory } from './index';
+
+// A pannable, hue-shiftable color value. Snapshots are only recorded when the
+// user explicitly commits — perfect for a "save state" / checkpoint workflow.
+const hue = ref(210);
+
+const { history, undo, redo, commit, reset, clear, canUndo, canRedo } = useManualRefHistory(hue, {
+  capacity: 6,
+});
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Working value</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">hue {{ hue }}°</span>
+      </div>
+
+      <div
+        class="h-16 w-full rounded-lg border border-(--border)"
+        :style="{ backgroundColor: `hsl(${hue} 72% 56%)` }"
+      />
+
+      <input
+        v-model.number="hue"
+        type="range"
+        min="0"
+        max="360"
+        class="w-full accent-(--accent)"
+      >
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="commit"
+      >
+        Commit snapshot
+      </button>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        :disabled="!canUndo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="undo"
+      >
+        Undo
+      </button>
+      <button
+        type="button"
+        :disabled="!canRedo"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="redo"
+      >
+        Redo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="reset"
+      >
+        Reset
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Committed snapshots</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted) tabular-nums">
+          {{ history.length }}
+        </span>
+      </div>
+      <ol class="flex flex-col gap-1.5">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp"
+          class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-1.5"
+        >
+          <span class="flex items-center gap-2">
+            <span
+              class="h-4 w-4 shrink-0 rounded-full border border-(--border)"
+              :style="{ backgroundColor: `hsl(${record.snapshot} 72% 56%)` }"
+            />
+            <span class="font-mono text-sm tabular-nums text-(--fg)">{{ record.snapshot }}°</span>
+          </span>
+          <span class="shrink-0 font-mono text-xs tabular-nums" :class="i === 0 ? 'text-(--accent-text)' : 'text-(--fg-subtle)'">
+            {{ i === 0 ? 'current' : formatTime(record.timestamp) }}
+          </span>
+        </li>
+      </ol>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Unlike automatic history, nothing is recorded until you press
+      <span class="font-mono">Commit snapshot</span>.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue b/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
new file mode 100644
index 0000000..1f41534
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useOffsetPagination/demo.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useOffsetPagination } from './index';
+
+interface User {
+  id: number;
+  name: string;
+  role: string;
+}
+
+const ROLES = ['Engineer', 'Designer', 'Manager', 'Analyst', 'Support'];
+const FIRST = ['Ada', 'Linus', 'Grace', 'Alan', 'Margaret', 'Dennis', 'Barbara', 'Ken'];
+const LAST = ['Lovelace', 'Torvalds', 'Hopper', 'Turing', 'Hamilton', 'Ritchie', 'Liskov', 'Thompson'];
+
+// Realistic dataset of 47 users
+const all = ref<User[]>(
+  Array.from({ length: 47 }, (_, i) => ({
+    id: i + 1,
+    name: `${FIRST[i % FIRST.length]} ${LAST[(i * 3) % LAST.length]}`,
+    role: ROLES[i % ROLES.length],
+  })),
+);
+
+const total = computed(() => all.value.length);
+
+const {
+  currentPage,
+  currentPageSize,
+  totalPages,
+  isFirstPage,
+  isLastPage,
+  next,
+  previous,
+  select,
+} = useOffsetPagination({ total, pageSize: 5, page: 1 });
+
+const pageItems = computed(() => {
+  const start = (currentPage.value - 1) * currentPageSize.value;
+  return all.value.slice(start, start + currentPageSize.value);
+});
+
+const rangeStart = computed(() => (currentPage.value - 1) * currentPageSize.value + 1);
+const rangeEnd = computed(() => Math.min(currentPage.value * currentPageSize.value, total.value));
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <!-- Page size control -->
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Per page
+      </span>
+      <div class="flex gap-1.5">
+        <button
+          v-for="size in [5, 10, 20]"
+          :key="size"
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border px-2.5 py-1 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="currentPageSize === size
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="currentPageSize = size"
+        >
+          {{ size }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Records -->
+    <ul class="overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated)">
+      <li
+        v-for="user in pageItems"
+        :key="user.id"
+        class="flex items-center gap-3 border-b border-(--border) px-4 py-2.5 last:border-b-0"
+      >
+        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-(--accent-subtle) text-xs font-semibold text-(--accent-text)">
+          {{ user.id }}
+        </span>
+        <span class="flex-1 truncate text-sm font-medium text-(--fg)">{{ user.name }}</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ user.role }}
+        </span>
+      </li>
+    </ul>
+
+    <!-- Footer + pager -->
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <p class="text-sm text-(--fg-muted) tabular-nums">
+        {{ rangeStart }}–{{ rangeEnd }} of {{ total }}
+      </p>
+
+      <div class="flex flex-wrap items-center justify-center gap-1.5">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isFirstPage"
+          @click="previous"
+        >
+          ‹ Prev
+        </button>
+
+        <button
+          v-for="page in totalPages"
+          :key="page"
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+          :class="page === currentPage
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          :aria-current="page === currentPage ? 'page' : undefined"
+          @click="select(page)"
+        >
+          {{ page }}
+        </button>
+
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="isLastPage"
+          @click="next"
+        >
+          Next ›
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useRefHistory/demo.vue b/vue/toolkit/src/composables/state/useRefHistory/demo.vue
new file mode 100644
index 0000000..2961035
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useRefHistory/demo.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRefHistory } from './index';
+
+const text = ref('The quick brown fox');
+
+const {
+  history,
+  canUndo,
+  canRedo,
+  isTracking,
+  undo,
+  redo,
+  clear,
+  pause,
+  resume,
+} = useRefHistory(text, { capacity: 10 });
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <!-- Source editor -->
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Tracked value
+      </label>
+      <input
+        v-model="text"
+        type="text"
+        placeholder="Type to record history…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+    </div>
+
+    <!-- Controls -->
+    <div class="flex flex-wrap items-center gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canUndo"
+        @click="undo"
+      >
+        ↶ Undo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canRedo"
+        @click="redo"
+      >
+        ↷ Redo
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="isTracking ? pause() : resume()"
+      >
+        {{ isTracking ? '❚❚ Pause' : '▶ Resume' }}
+      </button>
+
+      <button
+        type="button"
+        class="ml-auto inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <!-- Tracking status -->
+    <div class="flex items-center gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="isTracking
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span class="h-1.5 w-1.5 rounded-full" :class="isTracking ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ isTracking ? 'Tracking' : 'Paused' }}
+      </span>
+      <span class="text-xs text-(--fg-subtle) tabular-nums">
+        {{ history.length }} record{{ history.length === 1 ? '' : 's' }}
+      </span>
+    </div>
+
+    <!-- History timeline -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+      <ul class="flex max-h-48 flex-col gap-1 overflow-y-auto">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp + '-' + i"
+          class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm"
+          :class="i === 0 ? 'bg-(--accent-subtle)' : ''"
+        >
+          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">
+            {{ formatTime(record.timestamp) }}
+          </span>
+          <span class="flex-1 truncate" :class="i === 0 ? 'font-medium text-(--accent-text)' : 'text-(--fg-muted)'">
+            {{ record.snapshot || '(empty)' }}
+          </span>
+          <span
+            v-if="i === 0"
+            class="text-xs font-medium text-(--accent-text)"
+          >current</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useStepper/demo.vue b/vue/toolkit/src/composables/state/useStepper/demo.vue
new file mode 100644
index 0000000..4dd9781
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useStepper/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useStepper } from './index';
+
+// A record-based wizard: keys are step names, values carry per-step metadata
+const {
+  index,
+  current,
+  stepNames,
+  isFirst,
+  isLast,
+  goToNext,
+  goToPrevious,
+  goTo,
+  isBefore,
+  isCurrent,
+} = useStepper({
+  account: { title: 'Account', hint: 'Pick a username and email' },
+  profile: { title: 'Profile', hint: 'Tell us about yourself' },
+  billing: { title: 'Billing', hint: 'Add a payment method' },
+  review: { title: 'Review', hint: 'Confirm and finish' },
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-5">
+    <!-- Step indicator -->
+    <ol class="flex items-center justify-between">
+      <li
+        v-for="(name, i) in stepNames"
+        :key="name"
+        class="flex flex-1 items-center"
+      >
+        <button
+          type="button"
+          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition active:scale-[0.98] cursor-pointer"
+          :class="[
+            isCurrent(name)
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : isBefore(name)
+                ? 'border-transparent bg-(--bg-elevated) text-(--fg-muted)'
+                : 'border-transparent bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
+          ]"
+          :aria-current="isCurrent(name) ? 'step' : undefined"
+          @click="goTo(name)"
+        >
+          <span v-if="!isBefore(name) && !isCurrent(name)">✓</span>
+          <span v-else>{{ i + 1 }}</span>
+        </button>
+
+        <span
+          v-if="i < stepNames.length - 1"
+          class="mx-2 h-px flex-1 transition-colors"
+          :class="isBefore(name) ? 'bg-(--border)' : 'bg-(--accent)'"
+        />
+      </li>
+    </ol>
+
+    <!-- Current step content -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Step {{ index + 1 }} of {{ stepNames.length }}
+      </p>
+      <h3 class="mt-1 text-lg font-semibold text-(--fg)">
+        {{ current.title }}
+      </h3>
+      <p class="mt-1 text-sm text-(--fg-muted)">
+        {{ current.hint }}
+      </p>
+    </div>
+
+    <!-- Navigation -->
+    <div class="flex items-center justify-between gap-3">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isFirst"
+        @click="goToPrevious"
+      >
+        ‹ Back
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="isLast"
+        @click="goToNext"
+      >
+        {{ isLast ? 'Finished' : 'Continue ›' }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue b/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
new file mode 100644
index 0000000..fd380a2
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useThrottledRefHistory/demo.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useThrottledRefHistory } from './index';
+
+// A continuously-mutating value (a slider) — rapid changes are collapsed
+// into at most one committed snapshot per throttle interval.
+const value = ref(50);
+const throttle = ref(600);
+
+const {
+  history,
+  canUndo,
+  canRedo,
+  undo,
+  redo,
+  clear,
+} = useThrottledRefHistory(value, { throttle });
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour12: false,
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <!-- Live value -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Live value
+        </span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ value }}</span>
+      </div>
+
+      <input
+        v-model.number="value"
+        type="range"
+        min="0"
+        max="100"
+        class="mt-3 w-full cursor-pointer accent-(--accent)"
+      >
+      <p class="mt-2 text-xs text-(--fg-subtle)">
+        Drag the slider — only one snapshot is committed per {{ throttle }}ms.
+      </p>
+    </div>
+
+    <!-- Throttle interval -->
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Throttle
+      </span>
+      <div class="flex gap-1.5">
+        <button
+          v-for="ms in [200, 600, 1500]"
+          :key="ms"
+          type="button"
+          class="inline-flex items-center justify-center rounded-lg border px-2.5 py-1 text-sm font-medium tabular-nums transition active:scale-[0.98] cursor-pointer"
+          :class="throttle === ms
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="throttle = ms"
+        >
+          {{ ms }}ms
+        </button>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canUndo"
+        @click="undo"
+      >
+        ↶ Undo
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!canRedo"
+        @click="redo"
+      >
+        ↷ Redo
+      </button>
+      <button
+        type="button"
+        class="ml-auto inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+
+    <!-- Committed snapshots -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-2">
+      <ul class="flex max-h-40 flex-col gap-1 overflow-y-auto">
+        <li
+          v-for="(record, i) in history"
+          :key="record.timestamp + '-' + i"
+          class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm"
+          :class="i === 0 ? 'bg-(--accent-subtle)' : ''"
+        >
+          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">
+            {{ formatTime(record.timestamp) }}
+          </span>
+          <span
+            class="flex-1 font-mono tabular-nums"
+            :class="i === 0 ? 'font-medium text-(--accent-text)' : 'text-(--fg-muted)'"
+          >
+            {{ record.snapshot }}
+          </span>
+          <span v-if="i === 0" class="text-xs font-medium text-(--accent-text)">latest</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/state/useToggle/demo.vue b/vue/toolkit/src/composables/state/useToggle/demo.vue
new file mode 100644
index 0000000..0f8772b
--- /dev/null
+++ b/vue/toolkit/src/composables/state/useToggle/demo.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useToggle } from './index';
+
+// Basic boolean toggle
+const { value: isOn, toggle } = useToggle(false);
+
+// Custom truthy/falsy values — drives a theme label
+const { value: theme, toggle: toggleTheme } = useToggle('light', {
+  truthyValue: 'dark',
+  falsyValue: 'light',
+});
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <!-- Boolean toggle -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Boolean toggle
+      </p>
+
+      <div class="mt-3 flex items-center justify-between gap-3">
+        <span class="text-sm text-(--fg-muted)">Notifications</span>
+
+        <button
+          type="button"
+          role="switch"
+          :aria-checked="isOn"
+          class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-(--border) transition focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          :class="isOn ? 'bg-(--accent)' : 'bg-(--bg-inset)'"
+          @click="toggle()"
+        >
+          <span
+            class="inline-block h-4 w-4 transform rounded-full bg-(--bg-elevated) shadow transition"
+            :class="isOn ? 'translate-x-6' : 'translate-x-1'"
+          />
+        </button>
+      </div>
+
+      <div class="mt-3 rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm tabular-nums">
+        <span class="text-(--fg-subtle)">value: </span>
+        <span :class="isOn ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-muted)'">
+          {{ isOn }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Custom truthy/falsy values -->
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Custom values
+      </p>
+
+      <div class="mt-3 flex items-center justify-between gap-3">
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ theme === 'dark' ? '☽' : '☀' }} {{ theme }}
+        </span>
+
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="toggleTheme()"
+        >
+          Toggle theme
+        </button>
+      </div>
+
+      <div class="mt-3 flex gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="theme === 'light'"
+          @click="toggleTheme('light')"
+        >
+          Set light
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="theme === 'dark'"
+          @click="toggleTheme('dark')"
+        >
+          Set dark
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue b/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
new file mode 100644
index 0000000..334fb43
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useLocalStorage/demo.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useLocalStorage } from './index';
+
+// Persists across reloads and syncs across tabs via the `storage` event.
+const username = useLocalStorage('demo:username', 'ada-lovelace');
+const fontSize = useLocalStorage('demo:font-size', 16);
+const darkMode = useLocalStorage('demo:dark-mode', false);
+
+// Object value — serialized as JSON automatically.
+const profile = useLocalStorage('demo:profile', {
+  role: 'Engineer',
+  team: 'Platform',
+});
+
+const persistedJson = computed(() =>
+  JSON.stringify(
+    { username: username.value, fontSize: fontSize.value, darkMode: darkMode.value, profile: profile.value },
+    null,
+    2,
+  ),
+);
+
+function reset() {
+  // Assigning null removes the key; the ref falls back to its default on next read.
+  username.value = null as never;
+  fontSize.value = 16;
+  darkMode.value = false;
+  profile.value = { role: 'Engineer', team: 'Platform' };
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Persisted settings</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        localStorage
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <label class="flex flex-col gap-1.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Username</span>
+        <input
+          v-model="username"
+          type="text"
+          placeholder="your handle"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+      </label>
+
+      <label class="flex flex-col gap-1.5">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Font size</span>
+          <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ fontSize }}px</span>
+        </div>
+        <input
+          v-model.number="fontSize"
+          type="range"
+          min="12"
+          max="28"
+          step="1"
+          class="w-full accent-(--accent)"
+        >
+      </label>
+
+      <button
+        type="button"
+        :aria-pressed="darkMode"
+        class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm font-medium text-(--fg) transition hover:border-(--border-strong) cursor-pointer"
+        @click="darkMode = !darkMode"
+      >
+        <span>Dark mode</span>
+        <span
+          class="relative h-5 w-9 rounded-full transition"
+          :class="darkMode ? 'bg-(--accent)' : 'bg-(--border-strong)'"
+        >
+          <span
+            class="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all"
+            :class="darkMode ? 'left-4' : 'left-0.5'"
+          />
+        </span>
+      </button>
+    </div>
+
+    <pre
+      class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs leading-relaxed text-(--fg) overflow-auto"
+      :style="{ fontSize: `${fontSize}px` }"
+    >{{ persistedJson }}</pre>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Edit anything, then reload the page or open a second tab — values stay in sync.
+    </p>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="reset"
+    >
+      Reset to defaults
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue b/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
new file mode 100644
index 0000000..186c5f7
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useSessionStorage/demo.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSessionStorage } from './index';
+
+// sessionStorage survives reloads but is cleared when the tab closes —
+// perfect for a multi-step draft that should not leak between sessions.
+const step = useSessionStorage('demo:wizard-step', 1);
+
+const draft = useSessionStorage('demo:wizard-draft', {
+  name: '',
+  email: '',
+  newsletter: true,
+});
+
+const totalSteps = 3;
+
+const progress = computed(() => Math.round((step.value / totalSteps) * 100));
+
+function next() {
+  if (step.value < totalSteps)
+    step.value++;
+}
+
+function prev() {
+  if (step.value > 1)
+    step.value--;
+}
+
+function clearDraft() {
+  step.value = 1;
+  draft.value = { name: '', email: '', newsletter: true };
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Step {{ step }} of {{ totalSteps }}
+      </span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        sessionStorage
+      </span>
+    </div>
+
+    <div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+      <div
+        class="h-full rounded-full bg-(--accent) transition-all duration-300"
+        :style="{ width: `${progress}%` }"
+      />
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <template v-if="step === 1">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Full name</span>
+          <input
+            v-model="draft.name"
+            type="text"
+            placeholder="Grace Hopper"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </template>
+
+      <template v-else-if="step === 2">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Email</span>
+          <input
+            v-model="draft.email"
+            type="email"
+            placeholder="grace@navy.mil"
+            class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+          >
+        </label>
+      </template>
+
+      <template v-else>
+        <label class="flex items-center justify-between gap-3 cursor-pointer">
+          <span class="text-sm text-(--fg)">Subscribe to the newsletter</span>
+          <input v-model="draft.newsletter" type="checkbox" class="h-4 w-4 accent-(--accent)">
+        </label>
+        <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm text-(--fg-muted)">
+          <p><span class="text-(--fg-subtle)">Name:</span> {{ draft.name || '—' }}</p>
+          <p><span class="text-(--fg-subtle)">Email:</span> {{ draft.email || '—' }}</p>
+        </div>
+      </template>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        :disabled="step === 1"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="prev"
+      >
+        Back
+      </button>
+      <button
+        type="button"
+        :disabled="step === totalSteps"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="next"
+      >
+        Continue
+      </button>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Reload the page — your step and draft are restored. Closing the tab clears them.
+    </p>
+
+    <button
+      type="button"
+      class="self-start text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+      @click="clearDraft"
+    >
+      Discard draft
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/storage/useStorage/demo.vue b/vue/toolkit/src/composables/storage/useStorage/demo.vue
new file mode 100644
index 0000000..135f4b2
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useStorage/demo.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useStorage } from './index';
+import type { StorageLike } from './index';
+
+// useStorage is backend-agnostic: pass any object implementing StorageLike.
+// Here we use a transparent in-memory backend so the demo is fully SSR-safe
+// and we can show exactly what gets written to the store.
+const raw = reactive<Record<string, string>>({});
+
+const memoryStorage: StorageLike = {
+  getItem: (key) => (key in raw ? raw[key] : null),
+  setItem: (key, value) => { raw[key] = value; },
+  removeItem: (key) => { delete raw[key]; },
+};
+
+// A Set value — useStorage guesses the Set serializer automatically.
+const tags = useStorage('demo:tags', new Set(['vue', 'reactive']), memoryStorage);
+
+// A custom serializer: store a number as a zero-padded string.
+const ticket = useStorage('demo:ticket', 1, memoryStorage, {
+  serializer: {
+    read: (v) => Number.parseInt(v, 10),
+    write: (v) => String(v).padStart(5, '0'),
+  },
+});
+
+const newTag = reactive({ value: '' });
+
+const tagList = computed(() => [...tags.value]);
+const storeEntries = computed(() => Object.entries(raw));
+
+function addTag() {
+  const t = newTag.value.trim().toLowerCase();
+  if (!t)
+    return;
+  // Reassign so the shallowRef watcher fires and writes to storage.
+  tags.value = new Set([...tags.value, t]);
+  newTag.value = '';
+}
+
+function removeTag(tag: string) {
+  const next = new Set(tags.value);
+  next.delete(tag);
+  tags.value = next;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Custom storage backend</span>
+      <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+        in-memory
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tags (Set)</span>
+
+      <div class="flex flex-wrap gap-1.5 min-h-7">
+        <span
+          v-for="tag in tagList"
+          :key="tag"
+          class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
+        >
+          {{ tag }}
+          <button
+            type="button"
+            class="text-(--fg-subtle) transition hover:text-(--fg) cursor-pointer"
+            :aria-label="`Remove ${tag}`"
+            @click="removeTag(tag)"
+          >
+            &times;
+          </button>
+        </span>
+        <span v-if="tagList.length === 0" class="text-xs text-(--fg-subtle)">No tags yet</span>
+      </div>
+
+      <form class="flex items-center gap-2" @submit.prevent="addTag">
+        <input
+          v-model="newTag.value"
+          type="text"
+          placeholder="add a tag…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="submit"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        >
+          Add
+        </button>
+      </form>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex items-center justify-between">
+      <div class="flex flex-col gap-0.5">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Ticket #</span>
+        <span class="text-xs text-(--fg-subtle)">zero-padded serializer</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="ticket = Math.max(0, ticket - 1)"
+        >
+          &minus;
+        </button>
+        <span class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ ticket }}</span>
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--border) bg-(--bg-inset) text-(--fg) transition hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="ticket = ticket + 1"
+        >
+          +
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Raw store contents</span>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-xs text-(--fg) flex flex-col gap-1">
+        <div v-for="[key, value] in storeEntries" :key="key" class="flex gap-2">
+          <span class="text-(--fg-subtle) shrink-0">{{ key }}</span>
+          <span class="truncate">{{ value }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue b/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
new file mode 100644
index 0000000..8423aac
--- /dev/null
+++ b/vue/toolkit/src/composables/storage/useStorageAsync/demo.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useStorageAsync } from './index';
+import type { StorageLikeAsync } from './index';
+
+// useStorageAsync works with any async backend (IndexedDB, a REST cache, etc.).
+// We simulate latency with a tiny in-memory store so the demo is SSR-safe and
+// you can watch the `isReady` flag flip once the initial read resolves.
+const store = reactive<Record<string, string>>({});
+const LATENCY = 600;
+
+function delay<T>(value: T): Promise<T> {
+  return new Promise((resolve) => { setTimeout(() => resolve(value), LATENCY); });
+}
+
+const asyncStorage: StorageLikeAsync = {
+  getItem: (key) => delay(key in store ? store[key] : null),
+  setItem: async (key, value) => { await delay(null); store[key] = value; },
+  removeItem: async (key) => { await delay(null); delete store[key]; },
+};
+
+const saving = ref(false);
+
+// Returns { state, isReady } and is itself awaitable. `isReady` flips to true
+// once the initial async read resolves — the composable sets it for us.
+const { state: prefs, isReady } = useStorageAsync(
+  'demo:async-prefs',
+  { theme: 'system', density: 'comfortable' },
+  asyncStorage,
+);
+
+const themes = ['light', 'dark', 'system'] as const;
+const densities = ['compact', 'comfortable'] as const;
+
+async function update<K extends keyof typeof prefs.value>(key: K, value: (typeof prefs.value)[K]) {
+  prefs.value = { ...prefs.value, [key]: value };
+  // The watcher writes asynchronously; show a brief saving indicator.
+  saving.value = true;
+  await delay(null);
+  saving.value = false;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Async preferences</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="isReady
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span
+          class="h-1.5 w-1.5 rounded-full"
+          :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'"
+        />
+        {{ isReady ? 'ready' : 'loading…' }}
+      </span>
+    </div>
+
+    <div
+      v-if="!isReady"
+      class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3"
+    >
+      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
+      <div class="h-3 w-1/3 animate-pulse rounded bg-(--bg-inset)" />
+      <div class="h-9 w-full animate-pulse rounded-lg bg-(--bg-inset)" />
+    </div>
+
+    <div v-else class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Theme</span>
+        <div class="grid grid-cols-3 gap-1.5">
+          <button
+            v-for="t in themes"
+            :key="t"
+            type="button"
+            class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
+            :class="prefs.theme === t
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+            @click="update('theme', t)"
+          >
+            {{ t }}
+          </button>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Density</span>
+        <div class="grid grid-cols-2 gap-1.5">
+          <button
+            v-for="d in densities"
+            :key="d"
+            type="button"
+            class="rounded-lg border px-2 py-1.5 text-sm font-medium capitalize transition active:scale-[0.98] cursor-pointer"
+            :class="prefs.density === d
+              ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+              : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+            @click="update('density', d)"
+          >
+            {{ d }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) flex items-center justify-between">
+      <span class="truncate">{{ JSON.stringify(prefs) }}</span>
+      <span
+        class="ml-2 shrink-0 text-xs transition"
+        :class="saving ? 'text-sky-600 dark:text-sky-400' : 'text-(--fg-subtle)'"
+      >
+        {{ saving ? 'saving…' : 'saved' }}
+      </span>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Every change is written through the async backend with simulated latency.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/createEventHook/demo.vue b/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
new file mode 100644
index 0000000..015756a
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/createEventHook/demo.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onScopeDispose, ref } from 'vue';
+import { createEventHook } from './index';
+
+interface LogEntry {
+  id: number;
+  level: 'info' | 'warn' | 'error';
+  message: string;
+}
+
+// A typed event hook with a tuple payload: (level, message).
+const logHook = createEventHook<[LogEntry['level'], string]>();
+
+const entries = ref<LogEntry[]>([]);
+const listenerActive = ref(false);
+const draft = ref('Deployment finished');
+const level = ref<LogEntry['level']>('info');
+let nextId = 0;
+let off: (() => void) | null = null;
+
+const levels: LogEntry['level'][] = ['info', 'warn', 'error'];
+
+const badgeClass: Record<LogEntry['level'], string> = {
+  info: 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400',
+  warn: 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400',
+  error: 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400',
+};
+
+function subscribe() {
+  if (off)
+    return;
+  // `on` returns a callable off-handle; calling it removes the listener.
+  off = logHook.on((lvl, message) => {
+    entries.value = [{ id: nextId++, level: lvl, message }, ...entries.value].slice(0, 6);
+  });
+  listenerActive.value = true;
+}
+
+function unsubscribe() {
+  off?.();
+  off = null;
+  listenerActive.value = false;
+}
+
+async function emit() {
+  const message = draft.value.trim();
+  if (!message)
+    return;
+  // trigger fans out to every listener and awaits async ones.
+  await logHook.trigger(level.value, message);
+}
+
+function clearLog() {
+  entries.value = [];
+}
+
+onScopeDispose(unsubscribe);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Event hook</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="listenerActive
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        {{ listenerActive ? '1 listener' : 'no listeners' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
+      <div class="grid grid-cols-3 gap-1.5">
+        <button
+          v-for="lvl in levels"
+          :key="lvl"
+          type="button"
+          class="rounded-lg border px-2 py-1.5 text-xs font-medium uppercase tracking-wide transition active:scale-[0.98] cursor-pointer"
+          :class="level === lvl
+            ? 'border-transparent bg-(--accent) text-(--accent-fg)'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg) hover:border-(--border-strong)'"
+          @click="level = lvl"
+        >
+          {{ lvl }}
+        </button>
+      </div>
+
+      <form class="flex items-center gap-2" @submit.prevent="emit">
+        <input
+          v-model="draft"
+          type="text"
+          placeholder="log message…"
+          class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        >
+        <button
+          type="submit"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        >
+          Trigger
+        </button>
+      </form>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="listenerActive ? unsubscribe() : subscribe()"
+      >
+        {{ listenerActive ? 'Detach listener (off)' : 'Attach listener (on)' }}
+      </button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Received events</span>
+      <button
+        v-if="entries.length"
+        type="button"
+        class="text-xs font-medium text-(--fg-muted) underline-offset-2 hover:underline cursor-pointer"
+        @click="clearLog"
+      >
+        Clear
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 min-h-24">
+      <p v-if="!entries.length" class="text-sm text-(--fg-subtle)">
+        {{ listenerActive ? 'Trigger an event to see it here.' : 'Attach a listener, then trigger.' }}
+      </p>
+      <div
+        v-for="entry in entries"
+        :key="entry.id"
+        class="flex items-center gap-2 text-sm"
+      >
+        <span
+          class="inline-flex shrink-0 items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+          :class="badgeClass[entry.level]"
+        >
+          {{ entry.level }}
+        </span>
+        <span class="truncate text-(--fg)">{{ entry.message }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Detach the listener and trigger again — with no listeners the payload is dropped.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/get/demo.vue b/vue/toolkit/src/composables/utilities/get/demo.vue
new file mode 100644
index 0000000..58a66db
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/get/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { get } from './index';
+
+// A reactive user record we read from in three different ways.
+const user = reactive({
+  name: 'Ada Lovelace',
+  role: 'Mathematician',
+  followers: 1843,
+});
+
+// A plain ref, edited live by the slider below.
+const count = ref(42);
+
+// A getter — `get` resolves it via `toValue`, just like a ref or plain value.
+const doubled = (): number => count.value * 2;
+
+// Pick which property of `user` to read with the key overload.
+const keys = ['name', 'role', 'followers'] as const;
+const selectedKey = ref<typeof keys[number]>('name');
+
+// `get(ref)` unwraps the ref.
+const countValue = computed(() => get(count));
+// `get(getter)` resolves the getter function.
+const doubledValue = computed(() => get(doubled));
+// `get(reactive, key)` reads a single property off the resolved value.
+const keyedValue = computed(() => get(user, selectedKey.value));
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">unwrap a ref</span>
+      <div class="flex items-center gap-3">
+        <input
+          v-model.number="count"
+          type="range"
+          min="0"
+          max="100"
+          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-(--bg-inset) accent-(--accent)"
+        >
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ count }}</span>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">get(count)</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ countValue }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">get(getter)</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ doubledValue }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">read a single key</span>
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="k in keys"
+          :key="k"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="selectedKey === k
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="selectedKey = k"
+        >
+          {{ k }}
+        </button>
+      </div>
+      <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 font-mono text-sm text-(--fg) tabular-nums">
+        <span class="text-(--fg-subtle)">get(user, '{{ selectedKey }}')</span>
+        <span class="px-2 text-(--fg-subtle)">→</span>
+        <span class="text-(--accent-text)">{{ JSON.stringify(keyedValue) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/isDefined/demo.vue b/vue/toolkit/src/composables/utilities/isDefined/demo.vue
new file mode 100644
index 0000000..b991093
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/isDefined/demo.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { isDefined, useIsDefined } from './index';
+
+interface Profile {
+  name: string;
+  email: string;
+}
+
+// A value that toggles between a real object and `null` — the classic
+// "data not loaded yet" case `isDefined` is built to narrow.
+const profile = ref<Profile | null>({ name: 'Ada Lovelace', email: 'ada@analytical.engine' });
+
+// Reactive guard: re-evaluates automatically whenever `profile` changes.
+const ready = useIsDefined(profile);
+
+// Synchronous one-off guard, used inside a normal computed below.
+const greeting = computed(() => {
+  // After this check TypeScript narrows `profile.value` to `Profile`.
+  if (isDefined(profile))
+    return `Welcome back, ${profile.value.name}`;
+
+  return 'No profile loaded';
+});
+
+function load(): void {
+  profile.value = { name: 'Grace Hopper', email: 'grace@navy.mil' };
+}
+
+function clear(): void {
+  profile.value = null;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">useIsDefined(profile)</span>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-semibold transition"
+        :class="ready
+          ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+          : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span class="size-2 rounded-full" :class="ready ? 'bg-emerald-500' : 'bg-amber-500'" />
+        {{ ready ? 'defined' : 'nullish' }}
+      </span>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">narrowed read</p>
+      <p class="mt-1 text-base font-semibold text-(--fg)">{{ greeting }}</p>
+      <p
+        v-if="isDefined(profile)"
+        class="mt-1 font-mono text-sm text-(--fg-muted)"
+      >
+        {{ profile.email }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-(--fg-subtle)">
+        Waiting for data…
+      </p>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="ready"
+        @click="load"
+      >
+        Load profile
+      </button>
+      <button
+        type="button"
+        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!ready"
+        @click="clear"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/set/demo.vue b/vue/toolkit/src/composables/utilities/set/demo.vue
new file mode 100644
index 0000000..5a8ee86
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/set/demo.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { set } from './index';
+
+// Two-argument form: write straight to a ref.
+const volume = ref(60);
+
+function nudge(delta: number): void {
+  // set(ref, value) — equivalent to volume.value = ...
+  set(volume, Math.min(100, Math.max(0, volume.value + delta)));
+}
+
+// Three-argument form: mutate a single property of an object.
+const profile = reactive({
+  name: 'Grace Hopper',
+  status: 'online' as 'online' | 'away' | 'offline',
+});
+
+const statuses = ['online', 'away', 'offline'] as const;
+const statusDot: Record<typeof statuses[number], string> = {
+  online: 'bg-emerald-500',
+  away: 'bg-amber-500',
+  offline: 'bg-(--fg-subtle)',
+};
+
+function rename(): void {
+  const names = ['Grace Hopper', 'Ada Lovelace', 'Alan Turing', 'Katherine Johnson'];
+  const next = names[(names.indexOf(profile.name) + 1) % names.length];
+  // set(object, key, value) — equivalent to profile.name = next
+  set(profile, 'name', next);
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-5">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-baseline justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">set(volume, n)</span>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+      </div>
+      <div class="h-2 w-full overflow-hidden rounded-full bg-(--bg-inset)">
+        <div
+          class="h-full rounded-full bg-(--accent) transition-[width] duration-200"
+          :style="{ width: `${volume}%` }"
+        />
+      </div>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(-10)"
+        >
+          −10
+        </button>
+        <button
+          type="button"
+          class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="nudge(10)"
+        >
+          +10
+        </button>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">set(profile, key, value)</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          <span class="size-2 rounded-full" :class="statusDot[profile.status]" />
+          {{ profile.status }}
+        </span>
+      </div>
+      <p class="font-mono text-lg font-semibold text-(--fg)">{{ profile.name }}</p>
+      <div class="flex flex-wrap gap-1.5">
+        <button
+          v-for="s in statuses"
+          :key="s"
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
+          :class="profile.status === s
+            ? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
+            : 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
+          @click="set(profile, 'status', s)"
+        >
+          {{ s }}
+        </button>
+      </div>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="rename"
+      >
+        Set next name
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/useEventBus/demo.vue b/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
new file mode 100644
index 0000000..999823e
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useEventBus/demo.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useEventBus } from './index';
+import type { EventBusKey } from './index';
+
+interface ChatPayload {
+  from: string;
+  text: string;
+}
+
+// A typed key. In a real app this lives in a shared module so any component
+// can `useEventBus(chatKey)` and land on the same listener set.
+const chatKey: EventBusKey<'message'> = Symbol('demo:chat');
+
+// Two distinct calls — they observe the SAME bus because the key matches.
+const sender = useEventBus<'message', ChatPayload>(chatKey);
+const receiver = useEventBus<'message', ChatPayload>(chatKey);
+
+interface Entry extends ChatPayload {
+  id: number;
+  once?: boolean;
+}
+
+const log = ref<Entry[]>([]);
+const draft = ref('Hello from the bus!');
+let nextId = 0;
+
+onMounted(() => {
+  // Subscribe on the "receiver" side. tryOnScopeDispose unsubscribes for us.
+  receiver.on((_event, payload) => {
+    if (payload)
+      log.value.unshift({ ...payload, id: nextId++ });
+  });
+});
+
+function send(): void {
+  const text = draft.value.trim();
+  if (!text)
+    return;
+
+  sender.emit('message', { from: 'You', text });
+  draft.value = '';
+}
+
+function pingOnce(): void {
+  // once() fires for exactly one emit, then auto-unsubscribes.
+  receiver.once((_event, payload) => {
+    if (payload)
+      log.value.unshift({ ...payload, id: nextId++, once: true });
+  });
+  sender.emit('message', { from: 'System', text: 'one-shot listener fired' });
+}
+
+function reset(): void {
+  receiver.reset();
+  log.value = [];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <input
+        v-model="draft"
+        type="text"
+        placeholder="Type a message…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @keydown.enter="send"
+      >
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-2 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="!draft.trim()"
+        @click="send"
+      >
+        Emit
+      </button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">received via bus</span>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="pingOnce"
+        >
+          once()
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          :disabled="log.length === 0"
+          @click="reset"
+        >
+          reset()
+        </button>
+      </div>
+    </div>
+
+    <div class="flex max-h-56 flex-col gap-2 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <p v-if="log.length === 0" class="py-6 text-center text-sm italic text-(--fg-subtle)">
+        No events yet — emit one above.
+      </p>
+      <div
+        v-for="entry in log"
+        :key="entry.id"
+        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+      >
+        <span
+          class="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium"
+          :class="entry.from === 'You' ? 'text-(--accent-text)' : 'text-(--fg-muted)'"
+        >
+          {{ entry.from }}
+        </span>
+        <span class="min-w-0 flex-1 truncate text-sm text-(--fg)">{{ entry.text }}</span>
+        <span
+          v-if="entry.once"
+          class="shrink-0 rounded-md border border-sky-500/30 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-sky-600 dark:text-sky-400"
+        >
+          once
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/useMemoize/demo.vue b/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
new file mode 100644
index 0000000..d8e3a0f
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useMemoize/demo.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useMemoize } from './index';
+
+interface Result {
+  value: number;
+  computedAt: string;
+}
+
+// Track how many times the resolver actually runs, so cache hits are visible.
+const runs = ref(0);
+
+// An "expensive" computation. With useMemoize, a repeated input returns the
+// cached Result instantly and the resolver does NOT run again.
+const fib = useMemoize((n: number): Result => {
+  runs.value++;
+  let a = 0;
+  let b = 1;
+  for (let i = 0; i < n; i++)
+    [a, b] = [b, a + b];
+
+  return {
+    value: a,
+    computedAt: new Date().toLocaleTimeString(),
+  };
+}, { getKey: n => n });
+
+const input = ref(20);
+
+interface LogEntry {
+  id: number;
+  n: number;
+  value: number;
+  hit: boolean;
+  computedAt: string;
+}
+
+const history = ref<LogEntry[]>([]);
+let nextId = 0;
+
+// Reactive cache size — reads the shallowReactive cache, so it stays live.
+const cacheSize = computed(() => (fib.cache as Map<number, Result>).size);
+
+function compute(force = false): void {
+  const before = runs.value;
+  const result = force ? fib.load(input.value) : fib(input.value);
+  const hit = !force && runs.value === before;
+
+  history.value.unshift({
+    id: nextId++,
+    n: input.value,
+    value: result.value,
+    hit,
+    computedAt: result.computedAt,
+  });
+}
+
+function evictCurrent(): void {
+  fib.delete(input.value);
+}
+
+function clearAll(): void {
+  fib.clear();
+  history.value = [];
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">resolver runs</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ runs }}</p>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">cached keys</p>
+        <p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ cacheSize }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">fib(n)</span>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">key: {{ fib.generateKey(input) }}</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <input
+          v-model.number="input"
+          type="range"
+          min="0"
+          max="40"
+          class="h-2 flex-1 cursor-pointer appearance-none rounded-full bg-(--bg-inset) accent-(--accent)"
+        >
+        <span class="w-8 text-right font-mono text-sm tabular-nums text-(--fg)">{{ input }}</span>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+        @click="compute()"
+      >
+        Compute
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="compute(true)"
+      >
+        load (force)
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="evictCurrent"
+      >
+        delete(n)
+      </button>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        :disabled="cacheSize === 0 && history.length === 0"
+        @click="clearAll"
+      >
+        clear
+      </button>
+    </div>
+
+    <div class="flex max-h-44 flex-col gap-2 overflow-y-auto rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+      <p v-if="history.length === 0" class="py-5 text-center text-sm italic text-(--fg-subtle)">
+        Compute a value — repeat the same n to see a cache hit.
+      </p>
+      <div
+        v-for="entry in history"
+        :key="entry.id"
+        class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 font-mono text-sm tabular-nums text-(--fg)"
+      >
+        <span class="text-(--fg-subtle)">fib({{ entry.n }})</span>
+        <span class="text-(--fg-subtle)">=</span>
+        <span class="min-w-0 flex-1 truncate text-(--accent-text)">{{ entry.value }}</span>
+        <span class="text-xs text-(--fg-subtle)">{{ entry.computedAt }}</span>
+        <span
+          class="shrink-0 rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase"
+          :class="entry.hit
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+        >
+          {{ entry.hit ? 'hit' : 'miss' }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/utilities/useSupported/demo.vue b/vue/toolkit/src/composables/utilities/useSupported/demo.vue
new file mode 100644
index 0000000..9e438e6
--- /dev/null
+++ b/vue/toolkit/src/composables/utilities/useSupported/demo.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSupported } from './index';
+
+// Probe a handful of real browser APIs. Each feature is a guarded getter so
+// useSupported can run during SSR without ever touching `window` on the server.
+const features = [
+  { name: 'IntersectionObserver', test: () => 'IntersectionObserver' in window },
+  { name: 'ResizeObserver', test: () => 'ResizeObserver' in window },
+  { name: 'Clipboard API', test: () => 'clipboard' in navigator },
+  { name: 'Web Share', test: () => 'share' in navigator },
+  { name: 'Geolocation', test: () => 'geolocation' in navigator },
+  { name: 'EyeDropper', test: () => 'EyeDropper' in window },
+];
+
+const checks = features.map(f => ({ name: f.name, supported: useSupported(f.test) }));
+
+const supportedCount = computed(() => checks.filter(c => c.supported.value).length);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Browser features</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          {{ supportedCount }} / {{ checks.length }} available
+        </span>
+      </div>
+
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="check in checks"
+          :key="check.name"
+          class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2 text-sm"
+        >
+          <span class="font-mono text-(--fg)">{{ check.name }}</span>
+          <span
+            v-if="check.supported.value"
+            class="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400"
+          >
+            <span class="size-1.5 rounded-full bg-emerald-500" />
+            Supported
+          </span>
+          <span
+            v-else
+            class="inline-flex items-center gap-1.5 text-xs font-medium text-(--fg-subtle)"
+          >
+            <span class="size-1.5 rounded-full bg-(--border-strong)" />
+            Unavailable
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Each check is SSR-safe: the result is <span class="font-mono text-(--fg-muted)">false</span> during
+      server render and resolves on the client after mount.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/until/demo.vue b/vue/toolkit/src/composables/watch/until/demo.vue
new file mode 100644
index 0000000..6dd41e8
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/until/demo.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { until } from './index';
+
+// A small game: nudge the value toward a target, and `until` resolves a promise
+// the moment the source matches — no manual watcher teardown required.
+const TARGET = 7;
+
+const count = ref(0);
+const status = ref<'idle' | 'waiting' | 'reached' | 'timeout'>('idle');
+const log = ref<string[]>([]);
+
+function push(message: string) {
+  log.value = [message, ...log.value].slice(0, 4);
+}
+
+async function awaitTarget() {
+  status.value = 'waiting';
+  push(`Waiting for count === ${TARGET} (3s timeout)…`);
+
+  try {
+    const value = await until(count).toBe(TARGET, { timeout: 3000, throwOnTimeout: true });
+    status.value = 'reached';
+    push(`Resolved! count reached ${value}.`);
+  }
+  catch {
+    status.value = 'timeout';
+    push('Timed out before reaching the target.');
+  }
+}
+
+async function awaitChanges() {
+  status.value = 'waiting';
+  push('Waiting for 3 changes via changedTimes(3)…');
+  const value = await until(count).changedTimes(3);
+  status.value = 'reached';
+  push(`Source changed 3 times, now ${value}.`);
+}
+
+function reset() {
+  count.value = 0;
+  status.value = 'idle';
+  log.value = [];
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Live source</span>
+        <span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
+          target = {{ TARGET }}
+        </span>
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          aria-label="Decrement"
+          class="inline-flex items-center justify-center rounded-lg border border-(--border) bg-(--bg-elevated) size-11 text-lg font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+          @click="count--"
+        >
+          −
+        </button>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ count }}</span>
+        <button
+          type="button"
+          aria-label="Increment"
+          class="inline-flex items-center justify-center rounded-lg border border-transparent bg-(--accent) size-11 text-lg font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
+          @click="count++"
+        >
+          +
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          :disabled="status === 'waiting'"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="awaitTarget"
+        >
+          await toBe({{ TARGET }})
+        </button>
+        <button
+          type="button"
+          :disabled="status === 'waiting'"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="awaitChanges"
+        >
+          changedTimes(3)
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1.5">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Promise log</span>
+        <span
+          class="text-xs font-medium"
+          :class="{
+            'text-(--fg-subtle)': status === 'idle',
+            'text-amber-600 dark:text-amber-400': status === 'waiting',
+            'text-emerald-600 dark:text-emerald-400': status === 'reached',
+            'text-red-600 dark:text-red-400': status === 'timeout',
+          }"
+        >{{ status }}</span>
+      </div>
+      <p v-if="!log.length" class="font-mono text-xs text-(--fg-subtle)">
+        Press a button, then change the value above.
+      </p>
+      <p
+        v-for="(line, i) in log"
+        v-else
+        :key="i"
+        class="font-mono text-xs text-(--fg)"
+        :class="{ 'opacity-50': i > 0 }"
+      >
+        {{ line }}
+      </p>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="reset"
+    >
+      Reset
+    </button>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchDebounced/demo.vue b/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
new file mode 100644
index 0000000..37eaf4d
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchDebounced/demo.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchDebounced } from './index';
+
+// Classic debounced search box: keystrokes mutate `query` instantly, but the
+// "fetch" callback only fires once typing settles — with a maxWait ceiling so
+// a long burst still flushes at least every 1500ms.
+const query = ref('vue composables');
+const debounce = ref(400);
+
+const settledQuery = ref(query.value);
+const keystrokes = ref(0);
+const fetches = ref(0);
+
+watchDebounced(
+  query,
+  (value) => {
+    settledQuery.value = value;
+    fetches.value++;
+  },
+  { debounce, maxWait: 1500 },
+);
+
+function onInput() {
+  keystrokes.value++;
+}
+
+const savings = () =>
+  keystrokes.value === 0 ? 0 : Math.round((1 - fetches.value / keystrokes.value) * 100);
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="wd-search">
+        Search
+      </label>
+      <input
+        id="wd-search"
+        v-model="query"
+        type="text"
+        placeholder="Start typing…"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+        @input="onInput"
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Debounce</span>
+        <span class="font-mono text-xs text-(--fg-muted) tabular-nums">{{ debounce }}ms</span>
+      </div>
+      <input
+        v-model.number="debounce"
+        type="range"
+        min="0"
+        max="1200"
+        step="50"
+        class="w-full accent-(--accent) cursor-pointer"
+      >
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-1">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Settled query</span>
+      <span class="font-mono text-sm text-(--fg) truncate">{{ settledQuery || '—' }}</span>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2 text-center">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-(--fg)">{{ keystrokes }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">keystrokes</div>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-(--accent-text)">{{ fetches }}</div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">fetches</div>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-3">
+        <div class="font-mono text-2xl font-bold tabular-nums text-emerald-600 dark:text-emerald-400">
+          {{ savings() }}%
+        </div>
+        <div class="text-[10px] uppercase tracking-wide text-(--fg-subtle)">saved</div>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Callback fires <span class="font-mono text-(--fg-muted)">{{ debounce }}ms</span> after you stop typing,
+      capped by a <span class="font-mono text-(--fg-muted)">maxWait: 1500</span> ceiling.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue b/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
new file mode 100644
index 0000000..d43b8b1
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchIgnorable/demo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchIgnorable } from './index';
+
+// A "dirty tracking" editor: user typing marks the draft dirty, but a
+// programmatic normalize pass writes the same ref inside `ignoreUpdates`,
+// so it does NOT flip the dirty flag or count as a real edit.
+const text = ref('The quick brown fox.');
+const dirty = ref(false);
+const trackedEdits = ref(0);
+const lastChange = ref('—');
+
+const { ignoreUpdates } = watchIgnorable(text, (value) => {
+  dirty.value = true;
+  trackedEdits.value++;
+  lastChange.value = value;
+});
+
+function normalize() {
+  // Collapse whitespace silently — the watcher stays quiet for this write.
+  ignoreUpdates(() => {
+    text.value = text.value.replace(/\s+/g, ' ').trim();
+  });
+}
+
+function save() {
+  dirty.value = false;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="wi-text">
+          Draft
+        </label>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+          :class="dirty
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+        >
+          <span
+            class="size-1.5 rounded-full"
+            :class="dirty ? 'bg-amber-500' : 'bg-emerald-500'"
+          />
+          {{ dirty ? 'Unsaved' : 'Saved' }}
+        </span>
+      </div>
+      <textarea
+        id="wi-text"
+        v-model="text"
+        rows="2"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition resize-none focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      />
+    </div>
+
+    <div class="grid grid-cols-2 gap-2">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+        @click="normalize"
+      >
+        Normalize (ignored)
+      </button>
+      <button
+        type="button"
+        :disabled="!dirty"
+        class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+        @click="save"
+      >
+        Save
+      </button>
+    </div>
+
+    <div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2">
+      <div class="flex items-center justify-between text-sm">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Tracked edits</span>
+        <span class="font-mono text-(--fg) tabular-nums">{{ trackedEdits }}</span>
+      </div>
+      <div class="flex items-center justify-between gap-3 text-sm">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Last change</span>
+        <span class="font-mono text-xs text-(--fg-muted) truncate">{{ lastChange }}</span>
+      </div>
+    </div>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Typing counts as an edit; <span class="font-mono text-(--fg-muted)">Normalize</span> writes the same
+      ref inside <span class="font-mono text-(--fg-muted)">ignoreUpdates()</span> and the watcher stays silent.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchOnce/demo.vue b/vue/toolkit/src/composables/watch/watchOnce/demo.vue
new file mode 100644
index 0000000..a814661
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchOnce/demo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchOnce } from './index';
+
+// "First interaction" capture: watchOnce fires for the very first change to
+// the source and then tears itself down — later changes are ignored. Great for
+// recording the moment a user first engages with something.
+const volume = ref(50);
+const firstTouch = ref<number | null>(null);
+const totalChanges = ref(0);
+const armed = ref(true);
+
+function arm() {
+  firstTouch.value = null;
+  totalChanges.value = 0;
+  volume.value = 50;
+  armed.value = true;
+
+  watchOnce(volume, (value) => {
+    firstTouch.value = value;
+    armed.value = false;
+  });
+}
+
+// Arm immediately on setup (re-arming resets the demo).
+arm();
+
+function onInput() {
+  totalChanges.value++;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-sm flex flex-col gap-4">
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
+        <span class="font-mono text-sm text-(--fg) tabular-nums">{{ volume }}</span>
+      </div>
+      <input
+        v-model.number="volume"
+        type="range"
+        min="0"
+        max="100"
+        class="w-full accent-(--accent) cursor-pointer"
+        @input="onInput"
+      >
+    </div>
+
+    <div
+      class="rounded-lg border bg-(--bg-inset) p-3 flex items-center justify-between transition"
+      :class="firstTouch === null ? 'border-(--border)' : 'border-emerald-500/30'"
+    >
+      <div class="flex flex-col">
+        <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">First captured value</span>
+        <span
+          class="font-mono text-2xl font-bold tabular-nums"
+          :class="firstTouch === null ? 'text-(--fg-subtle)' : 'text-emerald-600 dark:text-emerald-400'"
+        >
+          {{ firstTouch === null ? '—' : firstTouch }}
+        </span>
+      </div>
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
+        :class="armed
+          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+          : 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
+      >
+        <span class="size-1.5 rounded-full" :class="armed ? 'bg-amber-500 animate-pulse' : 'bg-(--border-strong)'" />
+        {{ armed ? 'Armed' : 'Spent' }}
+      </span>
+    </div>
+
+    <div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3 text-sm">
+      <span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total drags</span>
+      <span class="font-mono text-(--fg) tabular-nums">{{ totalChanges }}</span>
+    </div>
+
+    <button
+      type="button"
+      class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer"
+      @click="arm"
+    >
+      Re-arm watcher
+    </button>
+
+    <p class="text-xs text-(--fg-subtle)">
+      Drag the slider — only the <span class="font-mono text-(--fg-muted)">first</span> change is captured,
+      then the watcher stops. Total drags keeps climbing to prove it.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchPausable/demo.vue b/vue/toolkit/src/composables/watch/watchPausable/demo.vue
new file mode 100644
index 0000000..e9332e2
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchPausable/demo.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchPausable } from './index';
+
+const message = ref('Hello, world');
+const syncs = ref<{ id: number; value: string; at: string }[]>([]);
+let counter = 0;
+
+const { isActive, pause, resume, stop } = watchPausable(message, (value) => {
+  syncs.value.unshift({
+    id: ++counter,
+    value,
+    at: new Date().toLocaleTimeString(undefined, { hour12: false }),
+  });
+  if (syncs.value.length > 6)
+    syncs.value.length = 6;
+});
+
+const stopped = ref(false);
+
+function handleStop() {
+  stop();
+  stopped.value = true;
+}
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Watched source
+      </label>
+      <input
+        v-model="message"
+        :disabled="stopped"
+        type="text"
+        placeholder="Type to trigger the watcher"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring) disabled:opacity-40"
+      >
+    </div>
+
+    <div class="flex items-center gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
+        :class="stopped
+          ? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle)'
+          : isActive
+            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+            : 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'"
+      >
+        <span
+          class="size-1.5 rounded-full"
+          :class="stopped ? 'bg-(--fg-subtle)' : isActive ? 'bg-emerald-500' : 'bg-amber-500'"
+        />
+        {{ stopped ? 'Stopped' : isActive ? 'Watching' : 'Paused' }}
+      </span>
+
+      <div class="ml-auto flex gap-2">
+        <button
+          v-if="isActive"
+          :disabled="stopped"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="pause"
+        >
+          Pause
+        </button>
+        <button
+          v-else
+          :disabled="stopped"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="resume"
+        >
+          Resume
+        </button>
+        <button
+          :disabled="stopped"
+          class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
+          @click="handleStop"
+        >
+          Stop
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Sync log
+      </div>
+      <ul v-if="syncs.length" class="flex flex-col gap-1.5">
+        <li
+          v-for="entry in syncs"
+          :key="entry.id"
+          class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+        >
+          <span class="font-mono text-xs text-(--fg-subtle) tabular-nums">{{ entry.at }}</span>
+          <span class="truncate font-mono text-sm text-(--fg)">{{ entry.value || '—' }}</span>
+        </li>
+      </ul>
+      <p v-else class="py-2 text-sm text-(--fg-subtle)">
+        Edit the field above to record a sync.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-muted)">
+      While paused, source changes are ignored — no entry is logged until you resume.
+    </p>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/watchThrottled/demo.vue b/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
new file mode 100644
index 0000000..e9aad8e
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/watchThrottled/demo.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchThrottled } from './index';
+
+const throttle = ref(500);
+const volume = ref(42);
+const saved = ref(42);
+const saveCount = ref(0);
+const flash = ref(false);
+
+watchThrottled(volume, (value) => {
+  saved.value = value;
+  saveCount.value++;
+  flash.value = true;
+  setTimeout(() => { flash.value = false; }, 220);
+}, { throttle });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-baseline justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Live value
+        </label>
+        <span class="font-mono text-3xl font-bold tabular-nums text-(--fg)">{{ volume }}</span>
+      </div>
+      <input
+        v-model.number="volume"
+        type="range"
+        min="0"
+        max="100"
+        class="w-full cursor-pointer accent-(--accent)"
+      >
+      <p class="text-xs text-(--fg-muted)">
+        Drag rapidly — updates fire continuously, but the throttled callback only commits at most once per interval.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Saved (throttled)
+        </div>
+        <div
+          class="mt-1 font-mono text-3xl font-bold tabular-nums transition-colors duration-150"
+          :class="flash ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg)'"
+        >
+          {{ saved }}
+        </div>
+      </div>
+      <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+        <div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Commits
+        </div>
+        <div class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
+          {{ saveCount }}
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="flex items-baseline justify-between">
+        <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+          Throttle interval
+        </label>
+        <span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ throttle }} ms</span>
+      </div>
+      <input
+        v-model.number="throttle"
+        type="range"
+        min="0"
+        max="2000"
+        step="100"
+        class="w-full cursor-pointer accent-(--accent)"
+      >
+      <p class="text-xs text-(--fg-muted)">
+        The interval is reactive — change it and the next throttle window adapts immediately.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/vue/toolkit/src/composables/watch/whenever/demo.vue b/vue/toolkit/src/composables/watch/whenever/demo.vue
new file mode 100644
index 0000000..f0640ff
--- /dev/null
+++ b/vue/toolkit/src/composables/watch/whenever/demo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { whenever } from './index';
+
+const code = ref('');
+const isValid = computed(() => code.value.length >= 6);
+const events = ref<{ id: number; at: string }[]>([]);
+let counter = 0;
+
+// Fires only when the gate transitions into a truthy (valid) state.
+whenever(isValid, () => {
+  events.value.unshift({
+    id: ++counter,
+    at: new Date().toLocaleTimeString(undefined, { hour12: false }),
+  });
+  if (events.value.length > 5)
+    events.value.length = 5;
+});
+
+// `once` variant — fires a single celebration the first time we hit 12 chars.
+const celebrated = ref(false);
+whenever(() => code.value.length >= 12, () => {
+  celebrated.value = true;
+}, { once: true });
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm flex-col gap-4">
+    <div class="flex flex-col gap-1.5">
+      <label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Access code
+      </label>
+      <input
+        v-model="code"
+        type="text"
+        placeholder="Enter at least 6 characters"
+        class="w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
+      >
+      <div class="flex items-center justify-between text-xs">
+        <span class="text-(--fg-subtle)">{{ code.length }} / 6 chars</span>
+        <span
+          class="font-medium"
+          :class="isValid ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
+        >
+          {{ isValid ? 'valid' : 'too short' }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="celebrated"
+      class="rounded-xl border border-sky-500/30 bg-sky-500/10 px-4 py-3 text-sm font-medium text-sky-600 dark:text-sky-400"
+    >
+      Reached 12+ characters — this fired exactly once.
+    </div>
+
+    <div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
+      <div class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
+        Became valid at
+      </div>
+      <ul v-if="events.length" class="flex flex-col gap-1.5">
+        <li
+          v-for="event in events"
+          :key="event.id"
+          class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--bg-inset) px-3 py-2"
+        >
+          <span class="size-1.5 rounded-full bg-emerald-500" />
+          <span class="font-mono text-sm text-(--fg) tabular-nums">{{ event.at }}</span>
+        </li>
+      </ul>
+      <p v-else class="py-2 text-sm text-(--fg-subtle)">
+        The callback only runs when the source turns truthy — type a valid code to log an event, then clear it and try again.
+      </p>
+    </div>
+
+    <p class="text-xs text-(--fg-muted)">
+      Unlike a plain <code class="rounded bg-(--bg-inset) px-1 py-0.5 font-mono">watch</code>, the callback skips every falsy transition.
+    </p>
+  </div>
+</template>