diff --git a/.gitignore b/.gitignore
index b46bf3a..d74f56f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,12 @@
 .idea
 .vscode
+.cursor
 node_modules
 docs/.vitepress/cache/
 docs/.vitepress/**/deps_temp_*/
 dist
 .DS_Store
 .temp
+.env
+.env.*
 *.log
diff --git a/docs/.vitepress/data/homeElementsDemos.ts b/docs/.vitepress/data/homeElementsDemos.ts
new file mode 100644
index 0000000..e1c78e6
--- /dev/null
+++ b/docs/.vitepress/data/homeElementsDemos.ts
@@ -0,0 +1,14 @@
+/** Live demos for the home "Elements" section (same order as /functions/elements). */
+export const homeElementsDemos: ReadonlyArray<{ demo: string; title: string }> = [
+  { demo: 'useTextareaAutoSize/basic', title: 'useTextareaAutoSize' },
+  { demo: 'useClickOutside/basic', title: 'useClickOutside' },
+  { demo: 'useDraggable/basic', title: 'useDraggable' },
+  { demo: 'useElementSize/basic', title: 'useElementSize' },
+  { demo: 'useElementBounding/basic', title: 'useElementBounding' },
+  { demo: 'useElementVisibility/basic', title: 'useElementVisibility' },
+  { demo: 'useParentElement/basic', title: 'useParentElement' },
+  { demo: 'useWindowFocus/basic', title: 'useWindowFocus' },
+  { demo: 'useWindowScroll/basic', title: 'useWindowScroll' },
+  { demo: 'useActiveElement/basic', title: 'useActiveElement' },
+  { demo: 'useDropZone/basic', title: 'useDropZone' },
+]
diff --git a/docs/.vitepress/data/hookDemoSubtitles.ts b/docs/.vitepress/data/hookDemoSubtitles.ts
index e76c800..9d9289e 100644
--- a/docs/.vitepress/data/hookDemoSubtitles.ts
+++ b/docs/.vitepress/data/hookDemoSubtitles.ts
@@ -3,6 +3,25 @@
  * Keys are `useX/basic` as passed to the `demo` prop.
  */
 export const hookDemoSubtitles: Record<string, string> = {
+  'useActiveElement/basic':
+    'Mirror document.activeElement and inspect focus transitions across inputs, textarea, buttons, and links.',
+  'useClickOutside/basic':
+    'Close a panel when clicks happen outside multiple protected refs (toggle button + content area).',
+  'useDraggable/basic':
+    'Drag a card by its handle and keep it inside a container while tracking position and drag state.',
+  'useDropZone/basic': 'Track drag-over state and capture dropped files with hover feedback and recent-drop logging.',
+  'useElementBounding/basic':
+    'Track full DOMRect values (x/y/edges/size) while a target moves inside a scrollable container.',
+  'useElementSize/basic':
+    'Observe a panel size with ResizeObserver while changing width, height, and inner padding live.',
+  'useElementVisibility/basic':
+    'Observe when a sentinel becomes visible inside a scroll root with configurable threshold.',
+  'useParentElement/basic':
+    'Resolve and inspect a target node parentElement, and interact with the parent wrapper through the returned node.',
+  'useWindowFocus/basic': 'Reflect current window focus/blur state and demonstrate focus-aware background ticking.',
+  'useWindowScroll/basic': 'Track live window scrollX/scrollY and expose quick actions for top/middle/end navigation.',
+  'useTextareaAutoSize/basic':
+    'Autosize a textarea to content height; optionally sync the measured height to a wrapper via styleTarget.',
   'useToggle/basic':
     'Boolean (or set) state with a flip/toggle, optional custom setters, and a stable toggler function.',
   'useCounter/basic': 'Increment, decrement, or set a number with optional min/max so values stay in range.',
diff --git a/docs/.vitepress/theme/components/HomeHookShowcase.vue b/docs/.vitepress/theme/components/HomeHookShowcase.vue
index 11d10e1..7b14ddf 100644
--- a/docs/.vitepress/theme/components/HomeHookShowcase.vue
+++ b/docs/.vitepress/theme/components/HomeHookShowcase.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { withBase } from 'vitepress'
 import { homeStateDemos } from '../../data/homeStateDemos'
+import { homeElementsDemos } from '../../data/homeElementsDemos'
 
 /** Open card ids - several demos can stay open at once. */
 const expandedDemos = ref<string[]>([])
@@ -158,7 +159,42 @@ function onDemoItemKeydown(demo: string, ev: KeyboardEvent) {
         </div>
       </section>
 
-      <!-- e.g. <section class="home-showcase__section" …> + homeBrowserDemos when ready -->
+      <section
+        class="home-showcase__section home-showcase__section--spaced"
+        aria-labelledby="home-showcase-elements-title"
+      >
+        <div class="home-showcase__section-head">
+          <h3 id="home-showcase-elements-title" class="home-showcase__section-title">Elements</h3>
+        </div>
+        <p class="home-showcase__section-lead">
+          DOM-focused helpers: textarea autosize, outside click handling, drag/drop, element measurement, focus and
+          scroll state. Browse
+          <a class="home-showcase__state-link" :href="withBase('/functions/elements')"
+            >Elements in the function list →</a
+          >
+        </p>
+
+        <div class="home-state-demos" role="list">
+          <article
+            v-for="(item, index) in homeElementsDemos"
+            :key="item.demo"
+            class="home-state-demos__item"
+            :class="{ 'home-state-demos__item--expanded': isCardExpanded(item.demo) }"
+            :style="{ '--stagger': String(index) }"
+            role="listitem"
+            tabindex="0"
+            :aria-expanded="isCardExpanded(item.demo)"
+            @click="onDemoItemClick(item.demo, $event)"
+            @keydown="onDemoItemKeydown(item.demo, $event)"
+          >
+            <HookLiveDemo
+              :demo="item.demo"
+              :title="item.title"
+              :title-href="withBase(`/functions/${item.demo.split('/')[0]}`)"
+            />
+          </article>
+        </div>
+      </section>
     </div>
   </div>
 </template>
@@ -240,6 +276,10 @@ function onDemoItemKeydown(demo: string, ev: KeyboardEvent) {
   background: transparent;
 }
 
+.home-showcase__section--spaced {
+  margin-top: 2.2rem;
+}
+
 .home-showcase__section-head {
   display: flex;
   flex-wrap: wrap;
diff --git a/docs/.vitepress/theme/components/HookLiveDemo.vue b/docs/.vitepress/theme/components/HookLiveDemo.vue
index a972d18..5c83a19 100644
--- a/docs/.vitepress/theme/components/HookLiveDemo.vue
+++ b/docs/.vitepress/theme/components/HookLiveDemo.vue
@@ -40,9 +40,20 @@ const activeSource = computed(() => sourceJsx.value)
 const sourceOpen = ref(false)
 
 const demoLoaders: Record<string, () => Promise<DemoModule>> = {
+  'useActiveElement/basic': () => import('../react-demos/useActiveElement.basic'),
   'useAsyncState/basic': () => import('../react-demos/useAsyncState.basic'),
   'useCounter/basic': () => import('../react-demos/useCounter.basic'),
+  'useClickOutside/basic': () => import('../react-demos/useClickOutside.basic'),
+  'useDraggable/basic': () => import('../react-demos/useDraggable.basic'),
+  'useElementBounding/basic': () => import('../react-demos/useElementBounding.basic'),
+  'useElementSize/basic': () => import('../react-demos/useElementSize.basic'),
+  'useElementVisibility/basic': () => import('../react-demos/useElementVisibility.basic'),
+  'useParentElement/basic': () => import('../react-demos/useParentElement.basic'),
+  'useTextareaAutoSize/basic': () => import('../react-demos/useTextareaAutoSize.basic'),
+  'useWindowFocus/basic': () => import('../react-demos/useWindowFocus.basic'),
+  'useWindowScroll/basic': () => import('../react-demos/useWindowScroll.basic'),
   'useDebouncedRefHistory/basic': () => import('../react-demos/useDebouncedRefHistory.basic'),
+  'useDropZone/basic': () => import('../react-demos/useDropZone.basic'),
   'useToggle/basic': () => import('../react-demos/useToggle.basic'),
   'useDebounce/basic': () => import('../react-demos/useDebounce.basic'),
   'useEventCallback/basic': () => import('../react-demos/useEventCallback.basic'),
diff --git a/docs/.vitepress/theme/react-demos/useActiveElement.basic.ts b/docs/.vitepress/theme/react-demos/useActiveElement.basic.ts
new file mode 100644
index 0000000..92e665b
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useActiveElement.basic.ts
@@ -0,0 +1,160 @@
+import React from 'react'
+import useActiveElement from '@dedalik/use-react/useActiveElement'
+
+function describeElement(el: Element | null): string {
+  if (!el || !(el instanceof HTMLElement)) return 'none'
+  const id = el.id ? `#${el.id}` : ''
+  const name = 'name' in el && typeof (el as HTMLInputElement).name === 'string' ? (el as HTMLInputElement).name : ''
+  return `${el.tagName.toLowerCase()}${id}${name ? `[name=${name}]` : ''}`
+}
+
+function ActiveElementDemo() {
+  const active = useActiveElement()
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Move focus with mouse, Tab, or programmatic focus to see document.activeElement update in real time.',
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 10px' } },
+      'Active element: ',
+      React.createElement('strong', null, describeElement(active)),
+    ),
+    React.createElement(
+      'div',
+      { style: { display: 'grid', gap: 8, maxWidth: 460 } },
+      React.createElement(
+        'label',
+        { htmlFor: 'ae-email', style: { display: 'grid', gap: 4 } },
+        React.createElement('span', null, 'Email'),
+        React.createElement('input', {
+          id: 'ae-email',
+          name: 'email',
+          type: 'email',
+          placeholder: 'you@example.com',
+        }),
+      ),
+      React.createElement(
+        'label',
+        { htmlFor: 'ae-notes', style: { display: 'grid', gap: 4 } },
+        React.createElement('span', null, 'Notes'),
+        React.createElement('textarea', {
+          id: 'ae-notes',
+          name: 'notes',
+          rows: 3,
+          placeholder: 'Type here...',
+        }),
+      ),
+      React.createElement(
+        'div',
+        { className: 'hook-demo-toolbar', style: { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' } },
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            onClick: () => {
+              const el = document.getElementById('ae-email') as HTMLInputElement | null
+              el?.focus()
+            },
+          },
+          'Focus email',
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            onClick: () => {
+              const el = document.getElementById('ae-notes') as HTMLTextAreaElement | null
+              el?.focus()
+            },
+          },
+          'Focus notes',
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            onClick: () => {
+              const activeEl = document.activeElement as HTMLElement | null
+              activeEl?.blur()
+            },
+          },
+          'Blur active',
+        ),
+      ),
+    ),
+  )
+}
+
+export const sourceJsx = `import useActiveElement from '@dedalik/use-react/useActiveElement'
+
+function describeElement(el: Element | null): string {
+  if (!el || !(el instanceof HTMLElement)) return 'none'
+  const id = el.id ? '#' + el.id : ''
+  const name = 'name' in el && typeof (el as HTMLInputElement).name === 'string' ? (el as HTMLInputElement).name : ''
+  return el.tagName.toLowerCase() + id + (name ? '[name=' + name + ']' : '')
+}
+
+export default function ActiveElementDemo() {
+  const active = useActiveElement()
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Move focus with mouse, Tab, or programmatic focus to see document.activeElement update in real time.
+      </p>
+      <p style={{ margin: '0 0 10px' }}>
+        Active element: <strong>{describeElement(active)}</strong>
+      </p>
+
+      <div style={{ display: 'grid', gap: 8, maxWidth: 460 }}>
+        <label htmlFor='ae-email' style={{ display: 'grid', gap: 4 }}>
+          <span>Email</span>
+          <input id='ae-email' name='email' type='email' placeholder='you@example.com' />
+        </label>
+        <label htmlFor='ae-notes' style={{ display: 'grid', gap: 4 }}>
+          <span>Notes</span>
+          <textarea id='ae-notes' name='notes' rows={3} placeholder='Type here...' />
+        </label>
+
+        <div className='hook-demo-toolbar' style={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}>
+          <button
+            type='button'
+            onClick={() => {
+              const el = document.getElementById('ae-email') as HTMLInputElement | null
+              el?.focus()
+            }}
+          >
+            Focus email
+          </button>
+          <button
+            type='button'
+            onClick={() => {
+              const el = document.getElementById('ae-notes') as HTMLTextAreaElement | null
+              el?.focus()
+            }}
+          >
+            Focus notes
+          </button>
+          <button
+            type='button'
+            onClick={() => {
+              const activeEl = document.activeElement as HTMLElement | null
+              activeEl?.blur()
+            }}
+          >
+            Blur active
+          </button>
+        </div>
+
+      </div>
+    </div>
+  )
+}`
+
+export default ActiveElementDemo
diff --git a/docs/.vitepress/theme/react-demos/useClickOutside.basic.ts b/docs/.vitepress/theme/react-demos/useClickOutside.basic.ts
new file mode 100644
index 0000000..cb25506
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useClickOutside.basic.ts
@@ -0,0 +1,165 @@
+import React, { useRef, useState } from 'react'
+import useClickOutside from '@dedalik/use-react/useClickOutside'
+
+function ClickOutsideDemo() {
+  const [open, setOpen] = useState(false)
+  const [outsideCount, setOutsideCount] = useState(0)
+  const [lastEvent, setLastEvent] = useState<'mousedown' | 'touchstart' | '-'>('-')
+  const toggleRef = useRef<HTMLButtonElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+
+  useClickOutside([toggleRef, panelRef], (event) => {
+    setOpen(false)
+    setOutsideCount((count) => count + 1)
+    setLastEvent(event.type === 'touchstart' ? 'touchstart' : 'mousedown')
+  })
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Open the panel, then click anywhere outside the button/panel area to trigger the outside handler.',
+    ),
+    React.createElement(
+      'div',
+      { className: 'hook-demo-toolbar' },
+      React.createElement(
+        'button',
+        {
+          ref: toggleRef,
+          type: 'button',
+          onClick: () => setOpen((value) => !value),
+        },
+        open ? 'Close panel' : 'Open panel',
+      ),
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          onClick: () => {
+            setOutsideCount(0)
+            setLastEvent('-')
+          },
+        },
+        'Reset stats',
+      ),
+    ),
+    open
+      ? React.createElement(
+          'div',
+          {
+            ref: panelRef,
+            style: {
+              marginTop: 8,
+              padding: 12,
+              border: '1px solid var(--vp-c-divider)',
+              borderRadius: 10,
+              background: 'var(--vp-c-bg-soft)',
+            },
+          },
+          React.createElement('p', { style: { margin: 0 } }, 'Panel is open. Click outside to close it.'),
+          React.createElement(
+            'p',
+            { style: { margin: '8px 0 0' } },
+            'Both refs (button + panel) are treated as inside zone.',
+          ),
+        )
+      : React.createElement(
+          'div',
+          {
+            style: {
+              marginTop: 8,
+              padding: 12,
+              border: '1px dashed var(--vp-c-divider)',
+              borderRadius: 10,
+              color: 'var(--vp-c-text-2)',
+            },
+          },
+          'Panel is closed.',
+        ),
+    React.createElement(
+      'p',
+      { style: { margin: '10px 0 0' } },
+      'Outside triggers: ',
+      React.createElement('strong', null, String(outsideCount)),
+    ),
+    React.createElement('p', { style: { margin: 0 } }, 'Last event: ', React.createElement('strong', null, lastEvent)),
+  )
+}
+
+export const sourceJsx = `import { useRef, useState } from 'react'
+import useClickOutside from '@dedalik/use-react/useClickOutside'
+
+export default function ClickOutsideDemo() {
+  const [open, setOpen] = useState(false)
+  const [outsideCount, setOutsideCount] = useState(0)
+  const [lastEvent, setLastEvent] = useState<'mousedown' | 'touchstart' | '-'>('-')
+  const toggleRef = useRef<HTMLButtonElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+
+  useClickOutside([toggleRef, panelRef], (event) => {
+    setOpen(false)
+    setOutsideCount((count) => count + 1)
+    setLastEvent(event.type === 'touchstart' ? 'touchstart' : 'mousedown')
+  })
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>Open the panel, then click anywhere outside to trigger the handler.</p>
+
+      <div className='hook-demo-toolbar'>
+        <button ref={toggleRef} type='button' onClick={() => setOpen((value) => !value)}>
+          {open ? 'Close panel' : 'Open panel'}
+        </button>
+        <button
+          type='button'
+          onClick={() => {
+            setOutsideCount(0)
+            setLastEvent('-')
+          }}
+        >
+          Reset stats
+        </button>
+      </div>
+
+      {open ? (
+        <div
+          ref={panelRef}
+          style={{
+            marginTop: 8,
+            padding: 12,
+            border: '1px solid var(--vp-c-divider)',
+            borderRadius: 10,
+            background: 'var(--vp-c-bg-soft)',
+          }}
+        >
+          <p style={{ margin: 0 }}>Panel is open. Click outside to close it.</p>
+          <p style={{ margin: '8px 0 0' }}>Both refs (button + panel) are treated as inside zone.</p>
+        </div>
+      ) : (
+        <div
+          style={{
+            marginTop: 8,
+            padding: 12,
+            border: '1px dashed var(--vp-c-divider)',
+            borderRadius: 10,
+            color: 'var(--vp-c-text-2)',
+          }}
+        >
+          Panel is closed.
+        </div>
+      )}
+
+      <p style={{ margin: '10px 0 0' }}>
+        Outside triggers: <strong>{outsideCount}</strong>
+      </p>
+      <p style={{ margin: 0 }}>
+        Last event: <strong>{lastEvent}</strong>
+      </p>
+    </div>
+  )
+}`
+
+export default ClickOutsideDemo
diff --git a/docs/.vitepress/theme/react-demos/useDraggable.basic.ts b/docs/.vitepress/theme/react-demos/useDraggable.basic.ts
new file mode 100644
index 0000000..560743f
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useDraggable.basic.ts
@@ -0,0 +1,154 @@
+import React, { useRef } from 'react'
+import useDraggable from '@dedalik/use-react/useDraggable'
+
+function DraggableDemo() {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const handleRef = useRef<HTMLDivElement | null>(null)
+
+  const { position, isDragging, style } = useDraggable(cardRef, {
+    handle: handleRef,
+    containerElement: panelRef,
+    initialValue: { x: 12, y: 12 },
+    preventDefault: true,
+  })
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Drag the card by its header. Movement is clamped inside the dashed container.',
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 8px' } },
+      'Position: ',
+      React.createElement('strong', null, `${Math.round(position.x)} x, ${Math.round(position.y)} y`),
+      ' - ',
+      isDragging ? 'dragging' : 'idle',
+    ),
+    React.createElement(
+      'div',
+      {
+        ref: panelRef,
+        style: {
+          position: 'relative',
+          height: 220,
+          border: '1px dashed var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+          overflow: 'hidden',
+        },
+      },
+      React.createElement(
+        'div',
+        {
+          ref: cardRef,
+          style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 220,
+            borderRadius: 12,
+            border: '1px solid var(--vp-c-divider)',
+            background: 'var(--vp-c-bg)',
+            boxShadow: 'var(--vp-shadow-2)',
+            ...style,
+          },
+        },
+        React.createElement(
+          'div',
+          {
+            ref: handleRef,
+            style: {
+              cursor: isDragging ? 'grabbing' : 'grab',
+              userSelect: 'none',
+              padding: '10px 12px',
+              borderBottom: '1px solid var(--vp-c-divider)',
+              fontWeight: 600,
+            },
+          },
+          'Drag handle',
+        ),
+        React.createElement(
+          'div',
+          { style: { padding: 12, lineHeight: 1.4, color: 'var(--vp-c-text-2)' } },
+          'Pointer events are attached to the handle, while translation is applied to the whole card.',
+        ),
+      ),
+    ),
+  )
+}
+
+export const sourceJsx = `import { useRef } from 'react'
+import useDraggable from '@dedalik/use-react/useDraggable'
+
+export default function DraggableDemo() {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const handleRef = useRef<HTMLDivElement | null>(null)
+
+  const { position, isDragging, style } = useDraggable(cardRef, {
+    handle: handleRef,
+    containerElement: panelRef,
+    initialValue: { x: 12, y: 12 },
+    preventDefault: true,
+  })
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>Drag the card by its header. Movement is clamped inside the container.</p>
+      <p style={{ margin: '0 0 8px' }}>
+        Position: <strong>{Math.round(position.x)} x, {Math.round(position.y)} y</strong> -{' '}
+        {isDragging ? 'dragging' : 'idle'}
+      </p>
+
+      <div
+        ref={panelRef}
+        style={{
+          position: 'relative',
+          height: 220,
+          border: '1px dashed var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          ref={cardRef}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 220,
+            borderRadius: 12,
+            border: '1px solid var(--vp-c-divider)',
+            background: 'var(--vp-c-bg)',
+            boxShadow: 'var(--vp-shadow-2)',
+            ...style,
+          }}
+        >
+          <div
+            ref={handleRef}
+            style={{
+              cursor: isDragging ? 'grabbing' : 'grab',
+              userSelect: 'none',
+              padding: '10px 12px',
+              borderBottom: '1px solid var(--vp-c-divider)',
+              fontWeight: 600,
+            }}
+          >
+            Drag handle
+          </div>
+          <div style={{ padding: 12, lineHeight: 1.4, color: 'var(--vp-c-text-2)' }}>
+            Pointer events are attached to the handle, while translation is applied to the whole card.
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}`
+
+export default DraggableDemo
diff --git a/docs/.vitepress/theme/react-demos/useDropZone.basic.ts b/docs/.vitepress/theme/react-demos/useDropZone.basic.ts
new file mode 100644
index 0000000..8b0f809
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useDropZone.basic.ts
@@ -0,0 +1,152 @@
+import React, { useRef, useState } from 'react'
+import useDropZone from '@dedalik/use-react/useDropZone'
+
+function DropZoneDemo() {
+  const targetRef = useRef<HTMLDivElement | null>(null)
+  const [log, setLog] = useState<string[]>([])
+
+  const { isOverDropZone, files } = useDropZone(targetRef, {
+    onDrop: (dropped) => {
+      const line = `Dropped ${dropped.length} file(s): ${dropped.map((f) => f.name).join(', ') || '(none)'}`
+      setLog((prev) => [line, ...prev].slice(0, 5))
+    },
+  })
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Drag files from your desktop and drop them into the zone. Hover and drop state are reactive.',
+    ),
+    React.createElement(
+      'div',
+      {
+        ref: targetRef,
+        style: {
+          border: `2px dashed ${isOverDropZone ? 'var(--vp-c-brand-1)' : 'var(--vp-c-divider)'}`,
+          borderRadius: 12,
+          padding: 16,
+          minHeight: 150,
+          background: isOverDropZone ? 'var(--vp-c-brand-soft)' : 'var(--vp-c-bg-soft)',
+          transition: 'all 120ms ease',
+        },
+      },
+      React.createElement('p', { style: { marginTop: 0 } }, 'Drop files here'),
+      files.length
+        ? React.createElement(
+            'ul',
+            { style: { margin: 0, paddingLeft: 18 } },
+            ...files.map((file) =>
+              React.createElement(
+                'li',
+                { key: `${file.name}-${file.size}` },
+                React.createElement('strong', null, file.name),
+                ` (${file.type || 'unknown type'}) - ${file.size} bytes`,
+              ),
+            ),
+          )
+        : React.createElement('p', { style: { margin: 0, color: 'var(--vp-c-text-2)' } }, 'No files dropped yet.'),
+    ),
+    React.createElement(
+      'div',
+      { className: 'hook-demo-toolbar', style: { marginTop: 10, gridTemplateColumns: '1fr auto' } },
+      React.createElement(
+        'p',
+        { style: { margin: 0, alignSelf: 'center' } },
+        'isOverDropZone: ',
+        React.createElement('strong', null, isOverDropZone ? 'true' : 'false'),
+      ),
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          onClick: () => setLog([]),
+        },
+        'Clear log',
+      ),
+    ),
+    log.length
+      ? React.createElement(
+          'div',
+          { style: { marginTop: 8 } },
+          React.createElement('p', { style: { margin: '0 0 6px', fontWeight: 600 } }, 'Recent drops'),
+          React.createElement(
+            'ol',
+            { style: { margin: 0, paddingLeft: 18 } },
+            ...log.map((line, idx) => React.createElement('li', { key: `${line}-${idx}` }, line)),
+          ),
+        )
+      : null,
+  )
+}
+
+export const sourceJsx = `import { useRef, useState } from 'react'
+import useDropZone from '@dedalik/use-react/useDropZone'
+
+export default function DropZoneDemo() {
+  const targetRef = useRef<HTMLDivElement | null>(null)
+  const [log, setLog] = useState<string[]>([])
+
+  const { isOverDropZone, files } = useDropZone(targetRef, {
+    onDrop: (dropped) => {
+      const line = 'Dropped ' + dropped.length + ' file(s): ' + (dropped.map((f) => f.name).join(', ') || '(none)')
+      setLog((prev) => [line, ...prev].slice(0, 5))
+    },
+  })
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Drag files from your desktop and drop them into the zone. Hover and drop state are reactive.
+      </p>
+
+      <div
+        ref={targetRef}
+        style={{
+          border: '2px dashed ' + (isOverDropZone ? 'var(--vp-c-brand-1)' : 'var(--vp-c-divider)'),
+          borderRadius: 12,
+          padding: 16,
+          minHeight: 150,
+          background: isOverDropZone ? 'var(--vp-c-brand-soft)' : 'var(--vp-c-bg-soft)',
+        }}
+      >
+        <p style={{ marginTop: 0 }}>Drop files here</p>
+        {files.length ? (
+          <ul style={{ margin: 0, paddingLeft: 18 }}>
+            {files.map((file) => (
+              <li key={file.name + '-' + file.size}>
+                <strong>{file.name}</strong> ({file.type || 'unknown type'}) - {file.size} bytes
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p style={{ margin: 0, color: 'var(--vp-c-text-2)' }}>No files dropped yet.</p>
+        )}
+      </div>
+
+      <div className='hook-demo-toolbar' style={{ marginTop: 10, gridTemplateColumns: '1fr auto' }}>
+        <p style={{ margin: 0, alignSelf: 'center' }}>
+          isOverDropZone: <strong>{isOverDropZone ? 'true' : 'false'}</strong>
+        </p>
+        <button type='button' onClick={() => setLog([])}>
+          Clear log
+        </button>
+      </div>
+
+      {log.length ? (
+        <div style={{ marginTop: 8 }}>
+          <p style={{ margin: '0 0 6px', fontWeight: 600 }}>Recent drops</p>
+          <ol style={{ margin: 0, paddingLeft: 18 }}>
+            {log.map((line, idx) => (
+              <li key={line + '-' + idx}>{line}</li>
+            ))}
+          </ol>
+        </div>
+      ) : null}
+    </div>
+  )
+}`
+
+export default DropZoneDemo
diff --git a/docs/.vitepress/theme/react-demos/useElementBounding.basic.ts b/docs/.vitepress/theme/react-demos/useElementBounding.basic.ts
new file mode 100644
index 0000000..614693c
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useElementBounding.basic.ts
@@ -0,0 +1,161 @@
+import React, { useRef, useState } from 'react'
+import useElementBounding from '@dedalik/use-react/useElementBounding'
+
+function ElementBoundingDemo() {
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const rect = useElementBounding(cardRef)
+  const [padding, setPadding] = useState(16)
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Scroll inside the panel and tweak padding: DOMRect values update in viewport coordinates.',
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 6px' } },
+      'x/y: ',
+      React.createElement('strong', null, `${Math.round(rect.x)}, ${Math.round(rect.y)}`),
+      ' - size: ',
+      React.createElement('strong', null, `${Math.round(rect.width)} x ${Math.round(rect.height)} px`),
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 8px' } },
+      'LTRB: ',
+      React.createElement(
+        'strong',
+        null,
+        `${Math.round(rect.left)} / ${Math.round(rect.top)} / ${Math.round(rect.right)} / ${Math.round(rect.bottom)}`,
+      ),
+    ),
+    React.createElement(
+      'label',
+      { className: 'hook-demo-field', style: { maxWidth: 360 } },
+      React.createElement('p', { className: 'hook-demo-label' }, `Card padding (${padding}px)`),
+      React.createElement('input', {
+        type: 'range',
+        min: 8,
+        max: 40,
+        step: 1,
+        value: padding,
+        onChange: (event) => setPadding(Number(event.target.value)),
+      }),
+    ),
+    React.createElement(
+      'div',
+      {
+        ref: scrollRef,
+        style: {
+          marginTop: 10,
+          height: 220,
+          overflow: 'auto',
+          border: '1px solid var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+        },
+      },
+      React.createElement(
+        'div',
+        { style: { height: 700, padding: 16, boxSizing: 'border-box' } },
+        React.createElement(
+          'div',
+          { style: { height: 130, color: 'var(--vp-c-text-2)' } },
+          'Scroll down inside this panel.',
+        ),
+        React.createElement(
+          'div',
+          {
+            ref: cardRef,
+            style: {
+              width: 280,
+              padding,
+              borderRadius: 12,
+              border: '1px solid var(--vp-c-divider)',
+              background: 'var(--vp-c-bg)',
+              boxShadow: 'var(--vp-shadow-1)',
+              lineHeight: 1.4,
+            },
+          },
+          'Target card observed by useElementBounding.',
+        ),
+      ),
+    ),
+  )
+}
+
+export const sourceJsx = `import { useRef, useState } from 'react'
+import useElementBounding from '@dedalik/use-react/useElementBounding'
+
+export default function ElementBoundingDemo() {
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const rect = useElementBounding(cardRef)
+  const [padding, setPadding] = useState(16)
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Scroll inside the panel and tweak padding: DOMRect values update in viewport coordinates.
+      </p>
+      <p style={{ margin: '0 0 6px' }}>
+        x/y: <strong>{Math.round(rect.x)}, {Math.round(rect.y)}</strong> - size:{' '}
+        <strong>{Math.round(rect.width)} x {Math.round(rect.height)} px</strong>
+      </p>
+      <p style={{ margin: '0 0 8px' }}>
+        LTRB:{' '}
+        <strong>
+          {Math.round(rect.left)} / {Math.round(rect.top)} / {Math.round(rect.right)} / {Math.round(rect.bottom)}
+        </strong>
+      </p>
+
+      <label className='hook-demo-field' style={{ maxWidth: 360 }}>
+        <p className='hook-demo-label'>{'Card padding (' + padding + 'px)'}</p>
+        <input
+          type='range'
+          min={8}
+          max={40}
+          step={1}
+          value={padding}
+          onChange={(event) => setPadding(Number(event.target.value))}
+        />
+      </label>
+
+      <div
+        ref={scrollRef}
+        style={{
+          marginTop: 10,
+          height: 220,
+          overflow: 'auto',
+          border: '1px solid var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+        }}
+      >
+        <div style={{ height: 700, padding: 16, boxSizing: 'border-box' }}>
+          <div style={{ height: 130, color: 'var(--vp-c-text-2)' }}>Scroll down inside this panel.</div>
+          <div
+            ref={cardRef}
+            style={{
+              width: 280,
+              padding,
+              borderRadius: 12,
+              border: '1px solid var(--vp-c-divider)',
+              background: 'var(--vp-c-bg)',
+              boxShadow: 'var(--vp-shadow-1)',
+              lineHeight: 1.4,
+            }}
+          >
+            Target card observed by useElementBounding.
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}`
+
+export default ElementBoundingDemo
diff --git a/docs/.vitepress/theme/react-demos/useElementSize.basic.ts b/docs/.vitepress/theme/react-demos/useElementSize.basic.ts
new file mode 100644
index 0000000..245f1e9
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useElementSize.basic.ts
@@ -0,0 +1,168 @@
+import React, { useRef, useState } from 'react'
+import useElementSize from '@dedalik/use-react/useElementSize'
+
+function ElementSizeDemo() {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const { width, height } = useElementSize(panelRef)
+  const [padding, setPadding] = useState(16)
+  const [baseWidth, setBaseWidth] = useState(320)
+  const [baseHeight, setBaseHeight] = useState(180)
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'ResizeObserver tracks the element box while width/height and padding controls change layout.',
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 8px' } },
+      'Measured: ',
+      React.createElement('strong', null, `${Math.round(width)} x ${Math.round(height)} px`),
+    ),
+    React.createElement(
+      'div',
+      { className: 'hook-demo-toolbar', style: { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' } },
+      React.createElement(
+        'label',
+        { className: 'hook-demo-field' },
+        React.createElement('p', { className: 'hook-demo-label' }, `Width (${baseWidth}px)`),
+        React.createElement('input', {
+          type: 'range',
+          min: 220,
+          max: 520,
+          step: 10,
+          value: baseWidth,
+          onChange: (event) => setBaseWidth(Number(event.target.value)),
+        }),
+      ),
+      React.createElement(
+        'label',
+        { className: 'hook-demo-field' },
+        React.createElement('p', { className: 'hook-demo-label' }, `Height (${baseHeight}px)`),
+        React.createElement('input', {
+          type: 'range',
+          min: 120,
+          max: 320,
+          step: 10,
+          value: baseHeight,
+          onChange: (event) => setBaseHeight(Number(event.target.value)),
+        }),
+      ),
+      React.createElement(
+        'label',
+        { className: 'hook-demo-field' },
+        React.createElement('p', { className: 'hook-demo-label' }, `Padding (${padding}px)`),
+        React.createElement('input', {
+          type: 'range',
+          min: 8,
+          max: 40,
+          step: 1,
+          value: padding,
+          onChange: (event) => setPadding(Number(event.target.value)),
+        }),
+      ),
+    ),
+    React.createElement(
+      'div',
+      {
+        ref: panelRef,
+        style: {
+          marginTop: 10,
+          width: baseWidth,
+          height: baseHeight,
+          padding,
+          border: '1px solid var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+          boxSizing: 'border-box',
+          lineHeight: 1.4,
+          color: 'var(--vp-c-text-2)',
+          transition: 'width 120ms ease, height 120ms ease, padding 120ms ease',
+        },
+      },
+      'Target element observed by useElementSize.',
+    ),
+  )
+}
+
+export const sourceJsx = `import { useRef, useState } from 'react'
+import useElementSize from '@dedalik/use-react/useElementSize'
+
+export default function ElementSizeDemo() {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const { width, height } = useElementSize(panelRef)
+  const [padding, setPadding] = useState(16)
+  const [baseWidth, setBaseWidth] = useState(320)
+  const [baseHeight, setBaseHeight] = useState(180)
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        ResizeObserver tracks the element box while width/height and padding controls change layout.
+      </p>
+      <p style={{ margin: '0 0 8px' }}>
+        Measured: <strong>{Math.round(width)} x {Math.round(height)} px</strong>
+      </p>
+
+      <div className='hook-demo-toolbar' style={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}>
+        <label className='hook-demo-field'>
+          <p className='hook-demo-label'>{'Width (' + baseWidth + 'px)'}</p>
+          <input
+            type='range'
+            min={220}
+            max={520}
+            step={10}
+            value={baseWidth}
+            onChange={(event) => setBaseWidth(Number(event.target.value))}
+          />
+        </label>
+        <label className='hook-demo-field'>
+          <p className='hook-demo-label'>{'Height (' + baseHeight + 'px)'}</p>
+          <input
+            type='range'
+            min={120}
+            max={320}
+            step={10}
+            value={baseHeight}
+            onChange={(event) => setBaseHeight(Number(event.target.value))}
+          />
+        </label>
+        <label className='hook-demo-field'>
+          <p className='hook-demo-label'>{'Padding (' + padding + 'px)'}</p>
+          <input
+            type='range'
+            min={8}
+            max={40}
+            step={1}
+            value={padding}
+            onChange={(event) => setPadding(Number(event.target.value))}
+          />
+        </label>
+      </div>
+
+      <div
+        ref={panelRef}
+        style={{
+          marginTop: 10,
+          width: baseWidth,
+          height: baseHeight,
+          padding,
+          border: '1px solid var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+          boxSizing: 'border-box',
+          lineHeight: 1.4,
+          color: 'var(--vp-c-text-2)',
+          transition: 'width 120ms ease, height 120ms ease, padding 120ms ease',
+        }}
+      >
+        Target element observed by useElementSize.
+      </div>
+    </div>
+  )
+}`
+
+export default ElementSizeDemo
diff --git a/docs/.vitepress/theme/react-demos/useElementVisibility.basic.ts b/docs/.vitepress/theme/react-demos/useElementVisibility.basic.ts
new file mode 100644
index 0000000..337764f
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useElementVisibility.basic.ts
@@ -0,0 +1,169 @@
+import React, { useMemo, useState } from 'react'
+import useElementVisibility from '@dedalik/use-react/useElementVisibility'
+
+function ElementVisibilityDemo() {
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [threshold, setThreshold] = useState(0.75)
+  const [sentinelEl, setSentinelEl] = useState<HTMLDivElement | null>(null)
+
+  const sentinelRef = useMemo(() => ({ current: sentinelEl }), [sentinelEl])
+
+  const options = useMemo<IntersectionObserverInit>(
+    () => ({
+      root: rootElement ?? undefined,
+      rootMargin: '0px',
+      threshold,
+    }),
+    [rootElement, threshold],
+  )
+
+  const visible = useElementVisibility(sentinelRef, options)
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Scroll inside the panel until the sentinel is visible. Threshold controls how much must intersect.',
+    ),
+    React.createElement(
+      'div',
+      { className: 'hook-demo-toolbar', style: { gridTemplateColumns: '1fr auto' } },
+      React.createElement(
+        'label',
+        { className: 'hook-demo-field' },
+        React.createElement('p', { className: 'hook-demo-label' }, `threshold (${threshold.toFixed(2)})`),
+        React.createElement('input', {
+          type: 'range',
+          min: 0,
+          max: 1,
+          step: 0.05,
+          value: threshold,
+          onChange: (event) => setThreshold(Number(event.target.value)),
+        }),
+      ),
+      React.createElement(
+        'p',
+        { style: { margin: 0, alignSelf: 'end' } },
+        'Visible: ',
+        React.createElement('strong', null, visible ? 'yes' : 'no'),
+      ),
+    ),
+    React.createElement(
+      'div',
+      {
+        ref: setRootElement,
+        style: {
+          marginTop: 10,
+          height: 230,
+          overflow: 'auto',
+          border: '1px solid var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+        },
+      },
+      React.createElement(
+        'div',
+        { style: { padding: 16, height: 900, boxSizing: 'border-box' } },
+        React.createElement(
+          'p',
+          { style: { marginTop: 0, color: 'var(--vp-c-text-2)' } },
+          'Scroll down to the sentinel block.',
+        ),
+        React.createElement('div', { style: { height: 520 } }),
+        React.createElement(
+          'div',
+          {
+            ref: setSentinelEl,
+            style: {
+              padding: 12,
+              borderRadius: 12,
+              border: '1px solid var(--vp-c-divider)',
+              background: visible ? 'var(--vp-c-success-soft, #e8f7ef)' : 'var(--vp-c-bg)',
+              transition: 'background-color 120ms ease',
+            },
+          },
+          'Load more sentinel (demo)',
+        ),
+      ),
+    ),
+  )
+}
+
+export const sourceJsx = `import { useMemo, useState } from 'react'
+import useElementVisibility from '@dedalik/use-react/useElementVisibility'
+
+export default function ElementVisibilityDemo() {
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [threshold, setThreshold] = useState(0.75)
+  const [sentinelEl, setSentinelEl] = useState<HTMLDivElement | null>(null)
+
+  const sentinelRef = useMemo(() => ({ current: sentinelEl }), [sentinelEl])
+
+  const options = useMemo<IntersectionObserverInit>(
+    () => ({
+      root: rootElement ?? undefined,
+      rootMargin: '0px',
+      threshold,
+    }),
+    [rootElement, threshold],
+  )
+
+  const visible = useElementVisibility(sentinelRef, options)
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Scroll inside the panel until the sentinel is visible. Threshold controls how much must intersect.
+      </p>
+
+      <div className='hook-demo-toolbar' style={{ gridTemplateColumns: '1fr auto' }}>
+        <label className='hook-demo-field'>
+          <p className='hook-demo-label'>{'threshold (' + threshold.toFixed(2) + ')'}</p>
+          <input
+            type='range'
+            min={0}
+            max={1}
+            step={0.05}
+            value={threshold}
+            onChange={(event) => setThreshold(Number(event.target.value))}
+          />
+        </label>
+        <p style={{ margin: 0, alignSelf: 'end' }}>
+          Visible: <strong>{visible ? 'yes' : 'no'}</strong>
+        </p>
+      </div>
+
+      <div
+        ref={setRootElement}
+        style={{
+          marginTop: 10,
+          height: 230,
+          overflow: 'auto',
+          border: '1px solid var(--vp-c-divider)',
+          borderRadius: 12,
+          background: 'var(--vp-c-bg-soft)',
+        }}
+      >
+        <div style={{ padding: 16, height: 900, boxSizing: 'border-box' }}>
+          <p style={{ marginTop: 0, color: 'var(--vp-c-text-2)' }}>Scroll down to the sentinel block.</p>
+          <div style={{ height: 520 }} />
+          <div
+            ref={setSentinelEl}
+            style={{
+              padding: 12,
+              borderRadius: 12,
+              border: '1px solid var(--vp-c-divider)',
+              background: visible ? 'var(--vp-c-success-soft, #e8f7ef)' : 'var(--vp-c-bg)',
+            }}
+          >
+            Load more sentinel (demo)
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}`
+
+export default ElementVisibilityDemo
diff --git a/docs/.vitepress/theme/react-demos/useParentElement.basic.ts b/docs/.vitepress/theme/react-demos/useParentElement.basic.ts
new file mode 100644
index 0000000..dd65845
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useParentElement.basic.ts
@@ -0,0 +1,182 @@
+import React, { useRef, useState } from 'react'
+import useParentElement from '@dedalik/use-react/useParentElement'
+
+function ParentElementDemo() {
+  const childRef = useRef<HTMLSpanElement | null>(null)
+  const parentEl = useParentElement(childRef)
+  const [outlineParent, setOutlineParent] = useState(false)
+  const [focusChild, setFocusChild] = useState(false)
+
+  const parentId = parentEl ? `#${parentEl.id || '(no-id)'}` : 'null'
+  const parentTag = parentEl?.tagName.toLowerCase() ?? 'null'
+  const childTag = childRef.current?.tagName.toLowerCase() ?? 'span'
+  const sameNode = parentEl === childRef.current?.parentElement
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'This demo marks both nodes clearly: outer card is parent, badge is child. useParentElement returns the outer card element.',
+    ),
+    React.createElement(
+      'div',
+      {
+        id: 'parent-card',
+        style: {
+          border: outlineParent ? '2px solid var(--vp-c-brand-1)' : '1px solid var(--vp-c-divider)',
+          background: outlineParent ? 'var(--vp-c-brand-soft)' : 'var(--vp-c-bg-soft)',
+          borderRadius: 12,
+          padding: 12,
+          transition: 'all 120ms ease',
+        },
+      },
+      React.createElement('p', { style: { margin: '0 0 8px', fontWeight: 600 } }, 'Parent element'),
+      React.createElement(
+        'div',
+        { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } },
+        React.createElement(
+          'span',
+          {
+            ref: childRef,
+            tabIndex: 0,
+            onFocus: () => setFocusChild(true),
+            onBlur: () => setFocusChild(false),
+            style: {
+              fontWeight: 700,
+              borderRadius: 999,
+              padding: '6px 10px',
+              border: focusChild ? '2px solid var(--vp-c-brand-1)' : '1px solid var(--vp-c-divider)',
+              background: 'var(--vp-c-bg)',
+              outline: 'none',
+            },
+          },
+          'Child element',
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            onClick: () => childRef.current?.focus(),
+          },
+          'Focus child',
+        ),
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            onClick: () => setOutlineParent((value) => !value),
+          },
+          outlineParent ? 'Hide parent outline' : 'Outline parent',
+        ),
+      ),
+    ),
+    React.createElement(
+      'div',
+      { style: { marginTop: 10, display: 'grid', gap: 4 } },
+      React.createElement(
+        'p',
+        { style: { margin: 0 } },
+        'Hook return (parent): ',
+        React.createElement('strong', null, `${parentTag} ${parentId}`),
+      ),
+      React.createElement(
+        'p',
+        { style: { margin: 0 } },
+        'Child ref points to: ',
+        React.createElement('strong', null, childTag),
+      ),
+      React.createElement(
+        'p',
+        {
+          style: {
+            margin: 0,
+            color: sameNode ? 'var(--vp-c-brand-1)' : 'var(--vp-c-danger-1, #b42318)',
+            fontWeight: 600,
+          },
+        },
+        sameNode ? 'Relationship check: parent element resolved correctly' : 'Relationship check: mismatch',
+      ),
+    ),
+  )
+}
+
+export const sourceJsx = `import { useRef, useState } from 'react'
+import useParentElement from '@dedalik/use-react/useParentElement'
+
+export default function ParentElementDemo() {
+  const childRef = useRef<HTMLSpanElement | null>(null)
+  const parentEl = useParentElement(childRef)
+  const [outlineParent, setOutlineParent] = useState(false)
+  const [focusChild, setFocusChild] = useState(false)
+
+  const parentId = parentEl ? '#' + (parentEl.id || '(no-id)') : 'null'
+  const parentTag = parentEl?.tagName.toLowerCase() ?? 'null'
+  const childTag = childRef.current?.tagName.toLowerCase() ?? 'span'
+  const sameNode = parentEl === childRef.current?.parentElement
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        This demo marks both nodes clearly: outer card is parent, badge is child.
+      </p>
+
+      <div
+        id='parent-card'
+        style={{
+          border: outlineParent ? '2px solid var(--vp-c-brand-1)' : '1px solid var(--vp-c-divider)',
+          background: outlineParent ? 'var(--vp-c-brand-soft)' : 'var(--vp-c-bg-soft)',
+          borderRadius: 12,
+          padding: 12,
+        }}
+      >
+        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Parent element</p>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+          <span
+            ref={childRef}
+            tabIndex={0}
+            onFocus={() => setFocusChild(true)}
+            onBlur={() => setFocusChild(false)}
+            style={{
+              fontWeight: 700,
+              borderRadius: 999,
+              padding: '6px 10px',
+              border: focusChild ? '2px solid var(--vp-c-brand-1)' : '1px solid var(--vp-c-divider)',
+              background: 'var(--vp-c-bg)',
+              outline: 'none',
+            }}
+          >
+            Child element
+          </span>
+          <button type='button' onClick={() => childRef.current?.focus()}>
+            Focus child
+          </button>
+          <button type='button' onClick={() => setOutlineParent((value) => !value)}>
+            {outlineParent ? 'Hide parent outline' : 'Outline parent'}
+          </button>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 10, display: 'grid', gap: 4 }}>
+        <p style={{ margin: 0 }}>
+          Hook return (parent): <strong>{parentTag + ' ' + parentId}</strong>
+        </p>
+        <p style={{ margin: 0 }}>
+          Child ref points to: <strong>{childTag}</strong>
+        </p>
+        <p
+          style={{
+            margin: 0,
+            color: sameNode ? 'var(--vp-c-brand-1)' : 'var(--vp-c-danger-1, #b42318)',
+            fontWeight: 600,
+          }}
+        >
+          {sameNode ? 'Relationship check: parent element resolved correctly' : 'Relationship check: mismatch'}
+        </p>
+      </div>
+    </div>
+  )
+}`
+
+export default ParentElementDemo
diff --git a/docs/.vitepress/theme/react-demos/useStorage.basic.ts b/docs/.vitepress/theme/react-demos/useStorage.basic.ts
index 13542ae..6ee6b7a 100644
--- a/docs/.vitepress/theme/react-demos/useStorage.basic.ts
+++ b/docs/.vitepress/theme/react-demos/useStorage.basic.ts
@@ -46,7 +46,7 @@ function StorageInner({
       React.createElement(
         'p',
         { style: { margin: 0, fontSize: '0.8rem' } },
-        'Serialized (default JSON — same as written to storage):',
+        'Serialized (default JSON - same as written to storage):',
       ),
       React.createElement('p', { className: 'hook-demo-mono' }, rawLine),
     ),
@@ -71,7 +71,7 @@ function StorageDemo() {
     initial: 'hello',
   })
   const [k, setK] = useState(0)
-  /** Do not mount `useStorage` until the user applies once — avoids writing on first page load. */
+  /** Do not mount `useStorage` until the user applies once - avoids writing on first page load. */
   const [liveStarted, setLiveStarted] = useState(false)
 
   useEffect(() => {
@@ -205,7 +205,7 @@ function StorageInner({ storageKey, useSession, initial }) {
     <div className='hook-demo-surface'>
       <p className='hook-demo-hint'>useStorage(key, initial, {'{'} storage {'}'}) - JSON.stringify / JSON.parse; set('') keeps the key with an empty string.</p>
       <p style={{ margin: 0 }}>Value: <code>{safeValue}</code></p>
-      <p style={{ margin: 0, fontSize: '0.8rem' }}>Serialized (default JSON — same as written to storage):</p>
+      <p style={{ margin: 0, fontSize: '0.8rem' }}>Serialized (default JSON - same as written to storage):</p>
       <p className='hook-demo-mono'>{rawLine}</p>
       <input value={safeValue} onChange={(e) => set(e.target.value)} />
       <button type='button' onClick={() => set('')}>set('') - clear value</button>
diff --git a/docs/.vitepress/theme/react-demos/useTextareaAutoSize.basic.ts b/docs/.vitepress/theme/react-demos/useTextareaAutoSize.basic.ts
new file mode 100644
index 0000000..4b06373
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useTextareaAutoSize.basic.ts
@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import useTextareaAutoSize from '@dedalik/use-react/useTextareaAutoSize'
+
+function TextareaAutoSizeDemo() {
+  const [resizeCount, setResizeCount] = useState(0)
+
+  const handleResize = useCallback(() => {
+    setResizeCount((count) => count + 1)
+  }, [])
+
+  const options = useMemo(
+    () => ({
+      onResize: handleResize,
+    }),
+    [handleResize],
+  )
+
+  const { textareaRef, input, setInput } = useTextareaAutoSize(options)
+
+  const value = input ?? ''
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Type multiple lines: textarea height grows with content. You can also drag the bottom-right corner to resize manually.',
+    ),
+    React.createElement(
+      'div',
+      { className: 'hook-demo-toolbar' },
+      React.createElement(
+        'button',
+        {
+          type: 'button',
+          onClick: () => setInput(value ? `${value}\nNew line` : 'New line'),
+        },
+        'Append line',
+      ),
+      React.createElement('button', { type: 'button', onClick: () => setInput('') }, 'Clear'),
+    ),
+    React.createElement('textarea', {
+      ref: textareaRef,
+      value,
+      onChange: (e) => setInput(e.target.value),
+      placeholder: 'Write your note...',
+      style: {
+        width: '100%',
+        minHeight: 120,
+        resize: 'vertical',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        padding: 10,
+        borderRadius: 10,
+        border: '1px solid var(--vp-c-divider)',
+        backgroundColor: 'var(--vp-c-bg)',
+        color: 'var(--vp-c-text-1)',
+        caretColor: 'var(--vp-c-text-1)',
+        font: 'inherit',
+        lineHeight: 1.5,
+      },
+    }),
+    React.createElement(
+      'p',
+      { style: { margin: 0 } },
+      'Characters: ',
+      React.createElement('strong', null, String(value.length)),
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: 0 } },
+      'Resize events: ',
+      React.createElement('strong', null, String(resizeCount)),
+    ),
+  )
+}
+
+export const sourceJsx = `import { useCallback, useMemo, useState } from 'react'
+import useTextareaAutoSize from '@dedalik/use-react/useTextareaAutoSize'
+
+export default function TextareaAutoSizeDemo() {
+  const [resizeCount, setResizeCount] = useState(0)
+
+  const handleResize = useCallback(() => {
+    setResizeCount((count) => count + 1)
+  }, [])
+
+  const options = useMemo(
+    () => ({
+      onResize: handleResize,
+    }),
+    [handleResize],
+  )
+
+  const { textareaRef, input, setInput } = useTextareaAutoSize(options)
+
+  const value = input ?? ''
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Type multiple lines: textarea height grows with content. You can also drag to resize.
+      </p>
+      <div className='hook-demo-toolbar'>
+        <button type='button' onClick={() => setInput(value ? value + '\\nNew line' : 'New line')}>
+          Append line
+        </button>
+        <button type='button' onClick={() => setInput('')}>
+          Clear
+        </button>
+      </div>
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder='Write your note...'
+        style={{
+          width: '100%',
+          minHeight: 120,
+          resize: 'vertical',
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          padding: 10,
+          borderRadius: 10,
+          border: '1px solid var(--vp-c-divider)',
+          backgroundColor: 'var(--vp-c-bg)',
+          color: 'var(--vp-c-text-1)',
+          caretColor: 'var(--vp-c-text-1)',
+          font: 'inherit',
+          lineHeight: 1.5,
+        }}
+      />
+
+      <p style={{ margin: 0 }}>
+        Characters: <strong>{value.length}</strong>
+      </p>
+      <p style={{ margin: 0 }}>
+        Resize events: <strong>{resizeCount}</strong>
+      </p>
+    </div>
+  )
+}`
+
+export default TextareaAutoSizeDemo
diff --git a/docs/.vitepress/theme/react-demos/useWindowFocus.basic.ts b/docs/.vitepress/theme/react-demos/useWindowFocus.basic.ts
new file mode 100644
index 0000000..e016334
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useWindowFocus.basic.ts
@@ -0,0 +1,119 @@
+import React, { useEffect, useRef, useState } from 'react'
+import useWindowFocus from '@dedalik/use-react/useWindowFocus'
+
+function WindowFocusDemo() {
+  const focused = useWindowFocus()
+  const [ticks, setTicks] = useState(0)
+  const lastBlurAt = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!focused) {
+      lastBlurAt.current = Date.now()
+      return
+    }
+
+    const id = window.setInterval(() => setTicks((value) => value + 1), 1000)
+    return () => window.clearInterval(id)
+  }, [focused])
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement(
+      'p',
+      { className: 'hook-demo-hint' },
+      'Switch tab or window focus. The state updates via window focus/blur events.',
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 8px' } },
+      'Status: ',
+      React.createElement(
+        'strong',
+        {
+          style: {
+            color: focused ? 'var(--vp-c-brand-1)' : 'var(--vp-c-danger-1, #b42318)',
+          },
+        },
+        focused ? 'Focused' : 'Blurred',
+      ),
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 8px' } },
+      'Background ticker (runs only while focused): ',
+      React.createElement('strong', null, `${ticks}s`),
+    ),
+    !focused && lastBlurAt.current
+      ? React.createElement(
+          'p',
+          { style: { margin: '0 0 8px', color: 'var(--vp-c-text-2)' } },
+          'Blurred since: ',
+          new Date(lastBlurAt.current).toLocaleTimeString(),
+        )
+      : null,
+    React.createElement(
+      'button',
+      {
+        type: 'button',
+        onClick: () => {
+          setTicks(0)
+          lastBlurAt.current = null
+        },
+      },
+      'Reset demo counters',
+    ),
+  )
+}
+
+export const sourceJsx = `import { useEffect, useRef, useState } from 'react'
+import useWindowFocus from '@dedalik/use-react/useWindowFocus'
+
+export default function WindowFocusDemo() {
+  const focused = useWindowFocus()
+  const [ticks, setTicks] = useState(0)
+  const lastBlurAt = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!focused) {
+      lastBlurAt.current = Date.now()
+      return
+    }
+
+    const id = window.setInterval(() => setTicks((value) => value + 1), 1000)
+    return () => window.clearInterval(id)
+  }, [focused])
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Switch tab or window focus. The state updates via window focus/blur events.
+      </p>
+      <p style={{ margin: '0 0 8px' }}>
+        Status:{' '}
+        <strong style={{ color: focused ? 'var(--vp-c-brand-1)' : 'var(--vp-c-danger-1, #b42318)' }}>
+          {focused ? 'Focused' : 'Blurred'}
+        </strong>
+      </p>
+      <p style={{ margin: '0 0 8px' }}>
+        Background ticker (runs only while focused): <strong>{ticks}s</strong>
+      </p>
+      {!focused && lastBlurAt.current ? (
+        <p style={{ margin: '0 0 8px', color: 'var(--vp-c-text-2)' }}>
+          Blurred since: {new Date(lastBlurAt.current).toLocaleTimeString()}
+        </p>
+      ) : null}
+      <button
+        type='button'
+        onClick={() => {
+          setTicks(0)
+          lastBlurAt.current = null
+        }}
+      >
+        Reset demo counters
+      </button>
+    </div>
+  )
+}`
+
+export default WindowFocusDemo
diff --git a/docs/.vitepress/theme/react-demos/useWindowScroll.basic.ts b/docs/.vitepress/theme/react-demos/useWindowScroll.basic.ts
new file mode 100644
index 0000000..3484c2a
--- /dev/null
+++ b/docs/.vitepress/theme/react-demos/useWindowScroll.basic.ts
@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react'
+import useWindowScroll from '@dedalik/use-react/useWindowScroll'
+
+function WindowScrollDemo() {
+  const { x, y } = useWindowScroll()
+
+  const progress = useMemo(() => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') return 0
+    const maxY = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)
+    return Math.max(0, Math.min(1, y / maxY))
+  }, [y])
+
+  return React.createElement(
+    'div',
+    { className: 'hook-demo-surface' },
+    React.createElement('p', { className: 'hook-demo-hint' }, 'Scroll the docs page to update values and progress.'),
+    React.createElement(
+      'p',
+      { style: { margin: '0 0 8px' } },
+      'scrollX / scrollY: ',
+      React.createElement('strong', null, `${Math.round(x)} / ${Math.round(y)}`),
+    ),
+    React.createElement(
+      'div',
+      {
+        style: {
+          height: 10,
+          borderRadius: 999,
+          background: 'var(--vp-c-default-soft)',
+          overflow: 'hidden',
+        },
+      },
+      React.createElement('div', {
+        style: {
+          height: '100%',
+          width: `${progress * 100}%`,
+          background: 'var(--vp-c-brand-1)',
+          transition: 'width 120ms ease',
+        },
+      }),
+    ),
+    React.createElement(
+      'p',
+      { style: { margin: '8px 0 10px', color: 'var(--vp-c-text-2)' } },
+      `Page progress: ${Math.round(progress * 100)}%`,
+    ),
+  )
+}
+
+export const sourceJsx = `import { useMemo } from 'react'
+import useWindowScroll from '@dedalik/use-react/useWindowScroll'
+
+export default function WindowScrollDemo() {
+  const { x, y } = useWindowScroll()
+
+  const progress = useMemo(() => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') return 0
+    const maxY = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)
+    return Math.max(0, Math.min(1, y / maxY))
+  }, [y])
+
+  return (
+    <div className='hook-demo-surface'>
+      <p className='hook-demo-hint'>
+        Scroll the docs page to update values and progress.
+      </p>
+      <p style={{ margin: '0 0 8px' }}>
+        scrollX / scrollY: <strong>{Math.round(x)} / {Math.round(y)}</strong>
+      </p>
+
+      <div
+        style={{
+          height: 10,
+          borderRadius: 999,
+          background: 'var(--vp-c-default-soft)',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            height: '100%',
+            width: progress * 100 + '%',
+            background: 'var(--vp-c-brand-1)',
+          }}
+        />
+      </div>
+      <p style={{ margin: '8px 0 10px', color: 'var(--vp-c-text-2)' }}>Page progress: {Math.round(progress * 100)}%</p>
+    </div>
+  )
+}`
+
+export default WindowScrollDemo
diff --git a/docs/functions/useActiveElement.md b/docs/functions/useActiveElement.md
index 7b1b13a..54b07d7 100644
--- a/docs/functions/useActiveElement.md
+++ b/docs/functions/useActiveElement.md
@@ -12,8 +12,7 @@ description: >-
 # useActiveElement()
 
 <PackageData fn="useActiveElement" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useActiveElement/basic" title="Live demo: useActiveElement" />
 
 ## Overview
 
diff --git a/docs/functions/useClickOutside.md b/docs/functions/useClickOutside.md
index ec24d80..ee6d51d 100644
--- a/docs/functions/useClickOutside.md
+++ b/docs/functions/useClickOutside.md
@@ -13,8 +13,7 @@ description: >-
 # useClickOutside()
 
 <PackageData fn="useClickOutside" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useClickOutside/basic" title="Live demo: useClickOutside" />
 
 ## Overview
 
diff --git a/docs/functions/useDraggable.md b/docs/functions/useDraggable.md
index ef16eac..c3a3805 100644
--- a/docs/functions/useDraggable.md
+++ b/docs/functions/useDraggable.md
@@ -13,8 +13,7 @@ description: >-
 # useDraggable()
 
 <PackageData fn="useDraggable" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useDraggable/basic" title="Live demo: useDraggable" />
 
 ## Overview
 
diff --git a/docs/functions/useDropZone.md b/docs/functions/useDropZone.md
index a5781e3..2175f97 100644
--- a/docs/functions/useDropZone.md
+++ b/docs/functions/useDropZone.md
@@ -12,8 +12,7 @@ description: >-
 # useDropZone()
 
 <PackageData fn="useDropZone" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useDropZone/basic" title="Live demo: useDropZone" />
 
 ## Overview
 
diff --git a/docs/functions/useElementBounding.md b/docs/functions/useElementBounding.md
index 677d706..0f339fa 100644
--- a/docs/functions/useElementBounding.md
+++ b/docs/functions/useElementBounding.md
@@ -12,8 +12,7 @@ description: >-
 # useElementBounding()
 
 <PackageData fn="useElementBounding" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useElementBounding/basic" title="Live demo: useElementBounding" />
 
 ## Overview
 
diff --git a/docs/functions/useElementSize.md b/docs/functions/useElementSize.md
index d0481c9..30a1239 100644
--- a/docs/functions/useElementSize.md
+++ b/docs/functions/useElementSize.md
@@ -12,8 +12,7 @@ description: >-
 # useElementSize()
 
 <PackageData fn="useElementSize" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useElementSize/basic" title="Live demo: useElementSize" />
 
 ## Overview
 
diff --git a/docs/functions/useElementVisibility.md b/docs/functions/useElementVisibility.md
index 7bf7613..2ff5afb 100644
--- a/docs/functions/useElementVisibility.md
+++ b/docs/functions/useElementVisibility.md
@@ -12,8 +12,7 @@ description: >-
 # useElementVisibility()
 
 <PackageData fn="useElementVisibility" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useElementVisibility/basic" title="Live demo: useElementVisibility" />
 
 ## Overview
 
diff --git a/docs/functions/useParentElement.md b/docs/functions/useParentElement.md
index 197ecda..c236bcf 100644
--- a/docs/functions/useParentElement.md
+++ b/docs/functions/useParentElement.md
@@ -12,8 +12,7 @@ description: >-
 # useParentElement()
 
 <PackageData fn="useParentElement" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useParentElement/basic" title="Live demo: useParentElement" />
 
 ## Overview
 
diff --git a/docs/functions/useTextareaAutoSize.md b/docs/functions/useTextareaAutoSize.md
index 2921fbe..d47f74a 100644
--- a/docs/functions/useTextareaAutoSize.md
+++ b/docs/functions/useTextareaAutoSize.md
@@ -13,8 +13,7 @@ description: >-
 # useTextareaAutoSize()
 
 <PackageData fn="useTextareaAutoSize" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useTextareaAutoSize/basic" title="Live demo: useTextareaAutoSize" />
 
 ## Overview
 
diff --git a/docs/functions/useWindowFocus.md b/docs/functions/useWindowFocus.md
index d0af36f..0c0ca0a 100644
--- a/docs/functions/useWindowFocus.md
+++ b/docs/functions/useWindowFocus.md
@@ -12,8 +12,7 @@ description: >-
 # useWindowFocus()
 
 <PackageData fn="useWindowFocus" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useWindowFocus/basic" title="Live demo: useWindowFocus" />
 
 ## Overview
 
diff --git a/docs/functions/useWindowScroll.md b/docs/functions/useWindowScroll.md
index bf55d39..1dcac4d 100644
--- a/docs/functions/useWindowScroll.md
+++ b/docs/functions/useWindowScroll.md
@@ -12,8 +12,7 @@ description: >-
 # useWindowScroll()
 
 <PackageData fn="useWindowScroll" />
-
-Last updated: 24/04/2026
+<HookLiveDemo demo="useWindowScroll/basic" title="Live demo: useWindowScroll" />
 
 ## Overview