fix(playground): improve useRect demo interactivity and update docs

- Make rect-box resizable so width/height values update on drag
- Add "Add block above" button to demonstrate top value changes
- Update copy from incorrect "scroll to see values" to accurate description
- Remove outdated deps parameter from useRect README (removed in v2.0)
- Fix setDebounce reference in docs
- Add .tldr to gitignore

Author: arzafran

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 dist
-bundled
+bundled
+.tldr

packages/react/src/use-rect/README.md

@@ -30,13 +30,11 @@ function App() {
 
 The `useRect` hook accepts an options object with the following optional parameters:
 
-- `parameters`: (object) An object containing the following optional parameters:
-  - `ignoreTransform`: (boolean, default: `false`) If `true`, ignores CSS transform applied to the element and its parents. It's useful for animations such as parallax.
-  - `ignoreSticky`: (boolean, default: `true`) If `true`, ignores sticky positioning of the element and its parents. See the difference [with](https://jsfiddle.net/Lk74do8u/) and [without](https://jsfiddle.net/3962n0ov/).
-  - `debounce`: (number, default: `500`) Delay in milliseconds for debouncing measurement updates. Alternatively, you can set the global `useResizeObserver.setDebounce` function to change the default debounce delay.
-  - `lazy`: (boolean, default: `false`) If `true`, doesn't trigger state update and return a getter instead.
-  - `callback`: (function) A callback function to be invoked whenever the dimensions or position of the element change.
-- `deps`: (array) An array of dependencies.
+- `ignoreTransform`: (boolean, default: `false`) If `true`, ignores CSS transform applied to the element and its parents. It's useful for animations such as parallax.
+- `ignoreSticky`: (boolean, default: `true`) If `true`, ignores sticky positioning of the element and its parents. See the difference [with](https://jsfiddle.net/Lk74do8u/) and [without](https://jsfiddle.net/3962n0ov/).
+- `debounce`: (number, default: `500`) Delay in milliseconds for debouncing measurement updates. Alternatively, you can set the global `useRect.setDebounce` function to change the default debounce delay.
+- `lazy`: (boolean, default: `false`) If `true`, doesn't trigger state update and returns a getter instead.
+- `callback`: (function) A callback function to be invoked whenever the dimensions or position of the element change.
 
 ```jsx
 useRect.setDebounce(500)

playground/react/app.tsx

@@ -121,6 +121,7 @@ function ResizeObserverDemo() {
 }
 
 function RectDemo() {
+  const [extraBlocks, setExtraBlocks] = useState(0)
   const [setRef, rect] = useRect({
     ignoreTransform: false,
     ignoreSticky: true,
@@ -129,10 +130,26 @@ function RectDemo() {
   return (
     <Section title="useRect">
       <p className="description">
-        Track element position and dimensions within the page. Scroll to see
-        values update.
+        Track element position and dimensions within the document. Resize the
+        box or window to see values update.
       </p>
-      <div ref={setRef} className="rect-box">
+      <div className="button-row">
+        <button type="button" onClick={() => setExtraBlocks((n) => n + 1)}>
+          Add block above
+        </button>
+        {extraBlocks > 0 && (
+          <button type="button" onClick={() => setExtraBlocks(0)}>
+            Reset
+          </button>
+        )}
+      </div>
+      {Array.from({ length: extraBlocks }).map((_, i) => (
+        <div key={i} className="extra-block">
+          Block {i + 1}
+        </div>
+      ))}
+      <div ref={setRef} className="rect-box resizable">
+        <span>Resize me!</span>
         <div className="values-grid compact">
           <Value
             label="top"

playground/react/style.css

@@ -158,6 +158,40 @@ header p {
   border-radius: 8px;
 }
 
+.rect-box.resizable {
+  resize: both;
+  overflow: auto;
+  min-height: 120px;
+  border: 2px dashed var(--color-border);
+  cursor: se-resize;
+  transition: border-color 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.rect-box.resizable:hover {
+  border-color: var(--color-accent);
+}
+
+.rect-box.resizable > span {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--color-muted);
+  text-align: center;
+}
+
+.extra-block {
+  padding: 16px;
+  background: rgba(227, 6, 19, 0.1);
+  border: 1px solid var(--color-accent);
+  border-radius: 8px;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--color-accent);
+  text-align: center;
+}
+
 .intersection-spacer {
   height: 60vh;
   display: flex;