objs-core 2.0.2 → 2.1.0

package/EXAMPLES.md

@@ -1,7 +1,9 @@
 # Objs v2.0 — Examples & Architecture Guide
 
-All examples work as-is with `<script src="objs.js"></script>`.
-Runnable paste-and-run code: [examples.js](examples.js).
+All examples work as-is with `<script src="objs.js"></script>` or `import o from 'objs-core'`.
+Runnable paste-and-run code: [examples.js](examples.js). Rules and conventions: [SKILL.md](SKILL.md).
+
+**Conventions (from SKILL):** Use **refs** and **self.select(e)** in event handlers — not `e.target`, raw DOM, or class selectors. Use `.val()` for input/textarea/select; `attr(name, null)` to remove an attribute; `css(null)` to remove the `style` attribute. One state method per data slice; never call `.render()` to update.
 
 ---
 
@@ -758,14 +760,15 @@ const BadgeStates = {
   }),
   setCount: ({ self }, n) => {
     self.html(n);
-    // Re-apply inline style — transform skips unchanged values
-    n === 0 ? self.css({ display: 'none' }) : self.css(null);
+    n === 0 ? self.css({ display: 'none' }) : self.css(null);  // css(null) removes style attribute
   },
 };
 ```
 
 ### Input field atom
 
+Use `ref="input"` and `ref="error"` so updates use refs (no class selectors). Use `.val()` for input value.
+
 ```js
 const FieldStates = {
   name: 'FormField',
@@ -773,23 +776,22 @@ const FieldStates = {
     tag: 'div',
     class: 'field',
     html: `<label class="field__label">${label}</label>
-           <input class="field__input" type="${type}" name="${name}" placeholder="${placeholder}">
-           <span class="field__error"></span>`,
+           <input ref="input" type="${type}" name="${name}" placeholder="${placeholder}">
+           <span ref="error" class="field__error"></span>`,
   }),
-  // Each state only touches its specific sub-element
   setError:   ({ self }, msg) => {
-    self.first('.field__input').addClass('field__input--error');
-    self.first('.field__error').html(msg || '');
+    self.refs.input.addClass('field__input--error');
+    self.refs.error.html(msg || '');
   },
   setSuccess: ({ self }) => {
-    self.first('.field__input').removeClass('field__input--error').addClass('field__input--ok');
-    self.first('.field__error').html('');
+    self.refs.input.removeClass('field__input--error').addClass('field__input--ok');
+    self.refs.error.html('');
   },
   setIdle:    ({ self }) => {
-    self.first('.field__input').removeClass('field__input--error').removeClass('field__input--ok');
-    self.first('.field__error').html('');
+    self.refs.input.removeClass('field__input--error').removeClass('field__input--ok');
+    self.refs.error.html('');
   },
-  getValue:   ({ self }) => self.first('.field__input').val(),
+  getValue:   ({ self }) => self.refs.input.val(),
   show:       ({ self }) => { self.css(null); },
   hide:       ({ self }) => { self.css({ display: 'none' }); },
 };
@@ -811,16 +813,16 @@ Add `ref="name"` to elements in the `html` string. After init, `self.refs.name`
 let cardRef;
 const cardStates = {
   name: 'ProductCard',
-  render: ({ title, price }) => ({
+  render: ({ self, title, price }) => ({
     tag: 'article',
     className: 'card',
     html: `<h3 ref="title">${title}</h3>
            <p ref="price">$${price}</p>
            <button ref="addBtn">Add to cart</button>`,
-    events: { click: (e) => { if (e.target.closest('button')) cardRef?.setAdded(); } },
+    events: { click: (e) => { if (e.target === self.refs?.addBtn?.el) cardRef?.setAdded(); } },
   }),
   setAdded: ({ self }) => {
-    self.refs.addBtn.html('✓ Added').attr('disabled', '');
+    self.refs.addBtn.html('✓ Added').attr('disabled', 'true');  // use attr('disabled', null) to remove
   },
   updatePrice: ({ self }, newPrice) => {
     self.refs.price.html('$' + newPrice);
@@ -1218,13 +1220,12 @@ const productCardStates = {
   render: ({ title, price }) => ({
     tag: 'article',
     class: 'card',
-    html: `<h3 class="card__title">${title}</h3>
-           <p class="card__price">$${price}</p>
-           <button class="card__btn">Add to cart</button>`,
+    html: `<h3 ref="title">${title}</h3>
+           <p ref="price">$${price}</p>
+           <button ref="addBtn">Add to cart</button>`,
   }),
-  // Granular: only the button changes, card root never touched
   setAdded: ({ self }) => {
-    self.first('.card__btn').html('✓ Added').attr('disabled', '');
+    self.refs.addBtn.html('✓ Added').attr('disabled', 'true');
   },
 };
 
@@ -1238,7 +1239,7 @@ const productListStates = {
     products.forEach((product) => {
       const card = o.init(productCardStates).render(product);
       card.appendInside(self.el);
-      card.first('.card__btn').on('click', () => { cartAdd(product); card.setAdded(); });
+      card.refs.addBtn.on('click', () => { cartAdd(product); card.setAdded(); });
       self.store.cards[product.id] = card;
     });
   },
@@ -1261,19 +1262,19 @@ const dialogStates = {
   render: {
     tag: 'div', class: 'dialog-overlay', style: 'display:none',
     html: `<div class="dialog">
-      <button class="dialog__close">✕</button>
-      <h2 class="dialog__title"></h2>
-      <p class="dialog__body"></p>
-      <a class="dialog__cta" href="#">Get offer</a>
+      <button ref="closeBtn">✕</button>
+      <h2 ref="title"></h2>
+      <p ref="body"></p>
+      <a ref="cta" href="#">Get offer</a>
     </div>`,
     events: {
-      click: (e) => { if (e.target.closest('.dialog__close') || e.target === dialogRef?.el) dialogRef?.close(); },
+      click: (e) => { if (e.target === dialogRef?.refs?.closeBtn?.el || e.target === dialogRef?.el) dialogRef?.close(); },
     },
   },
   open: ({ self }, { title, body, cta, ctaUrl }) => {
-    self.first('.dialog__title').html(title);
-    self.first('.dialog__body').html(body);
-    self.first('.dialog__cta').html(cta).attr('href', ctaUrl);
+    self.refs.title.html(title);
+    self.refs.body.html(body);
+    self.refs.cta.html(cta).attr('href', ctaUrl);
     self.css({ display: 'flex' });
     sessionStorage.setItem(PROMO_KEY, '1');
   },
@@ -1311,34 +1312,34 @@ const drawerStates = {
   name: 'FilterDrawer',
   render: {
     tag: 'aside', class: 'drawer', style: 'transform:translateX(-100%)',
-    html: `<button class="drawer__close">✕</button>
+    html: `<button ref="closeBtn">✕</button>
            <h3>Filters</h3>
-           <select class="drawer__cat"><option value="">All</option><option value="electronics">Electronics</option></select>
-           <input class="drawer__min" type="number" placeholder="Min $">
-           <input class="drawer__max" type="number" placeholder="Max $">
-           <button class="drawer__apply">Apply</button>
-           <button class="drawer__reset">Reset</button>`,
+           <select ref="cat"><option value="">All</option><option value="electronics">Electronics</option></select>
+           <input ref="min" type="number" placeholder="Min $">
+           <input ref="max" type="number" placeholder="Max $">
+           <button ref="applyBtn">Apply</button>
+           <button ref="resetBtn">Reset</button>`,
     events: {
       click: (e) => {
         const d = drawerRef;
-        if (!d) return;
-        if (e.target.closest('.drawer__close')) d.close();
-        else if (e.target.closest('.drawer__apply')) { applyFilters(d.getValues(), productsLoader); d.close(); }
-        else if (e.target.closest('.drawer__reset')) { applyFilters({ category: '', minPrice: '', maxPrice: '' }, productsLoader); d.restore({ category: '', minPrice: '', maxPrice: '' }); }
+        if (!d?.refs) return;
+        if (e.target === d.refs.closeBtn.el) d.close();
+        else if (e.target === d.refs.applyBtn.el) { applyFilters(d.getValues(), productsLoader); d.close(); }
+        else if (e.target === d.refs.resetBtn.el) { applyFilters({ category: '', minPrice: '', maxPrice: '' }, productsLoader); d.restore({ category: '', minPrice: '', maxPrice: '' }); }
       },
     },
   },
   open:    ({ self }) => { self.css({ transform: 'translateX(0)' }); },
   close:   ({ self }) => { self.css({ transform: 'translateX(-100%)' }); },
   restore: ({ self }, { category, minPrice, maxPrice }) => {
-    self.first('.drawer__cat').val(category);
-    self.first('.drawer__min').val(minPrice);
-    self.first('.drawer__max').val(maxPrice);
+    self.refs.cat.val(category);
+    self.refs.min.val(minPrice);
+    self.refs.max.val(maxPrice);
   },
   getValues: ({ self }) => ({
-    category: self.first('.drawer__cat').val(),
-    minPrice:  self.first('.drawer__min').val(),
-    maxPrice:  self.first('.drawer__max').val(),
+    category: self.refs.cat.val(),
+    minPrice:  self.refs.min.val(),
+    maxPrice:  self.refs.max.val(),
   }),
 };
 
@@ -1387,7 +1388,7 @@ const formStates = {
   name: 'RegistrationForm',
   render: {
     tag: 'form', class: 'form',
-    html: '<div class="form__fields"></div><div class="form__preview"></div><button type="submit" class="btn btn--primary" disabled>Submit</button>',
+    html: '<div class="form__fields"></div><div class="form__preview"></div><button ref="submitBtn" type="submit" class="btn btn--primary" disabled>Submit</button>',
   },
   init: ({ self }) => {
     const fieldsRoot   = self.first('.form__fields').el;
@@ -1408,7 +1409,7 @@ const formStates = {
   checkSubmit: ({ self }) => {
     const v = self.store.valid;
     const ok = v.email && v.name && (!v.isBiz || v.company);
-    self.first('button[type="submit"]').el.disabled = !ok;
+    self.refs.submitBtn.attr('disabled', ok ? null : 'true');
   },
 };
 
@@ -1422,13 +1423,13 @@ const validate = (fieldComp, rule, value) => {
   return res === true;
 };
 
-emailField.first('input')
-  .on('blur',  (e) => { form.store.valid.email = validate(emailField, 'email', e.target.value); form.checkSubmit(); })
-  .on('input', (e) => { preview.update({ name: nameField.getValue(), email: e.target.value }); });
+emailField.refs.input
+  .on('blur',  () => { form.store.valid.email = validate(emailField, 'email', emailField.getValue()); form.checkSubmit(); })
+  .on('input', () => { preview.update({ name: nameField.getValue(), email: emailField.getValue() }); });
 
-nameField.first('input')
-  .on('blur',  (e) => { form.store.valid.name = validate(nameField, 'name', e.target.value); form.checkSubmit(); })
-  .on('input', (e) => { preview.update({ name: e.target.value, email: emailField.getValue() }); });
+nameField.refs.input
+  .on('blur',  () => { form.store.valid.name = validate(nameField, 'name', nameField.getValue()); form.checkSubmit(); })
+  .on('input', () => { preview.update({ name: nameField.getValue(), email: emailField.getValue() }); });
 
 bizBox.first('.biz-check').on('change', (e) => {
   form.store.valid.isBiz = e.target.checked;
@@ -1442,12 +1443,12 @@ bizBox.first('.biz-check').on('change', (e) => {
   form.checkSubmit();
 });
 
-companyField.first('input')
-  .on('blur', (e) => { form.store.valid.company = validate(companyField, 'company', e.target.value); form.checkSubmit(); });
+companyField.refs.input
+  .on('blur', () => { form.store.valid.company = validate(companyField, 'company', companyField.getValue()); form.checkSubmit(); });
 
 form.on('submit', (e) => {
   e.preventDefault();
-  const submitBtn = form.first('button[type="submit"]');
+  const submitBtn = form.refs.submitBtn;
   submitBtn.setLoading?.(true);
   o.post('/api/register', { data: Object.fromEntries(new FormData(e.target)) })
     .then(r => r.json())

package/README.md

@@ -5,7 +5,7 @@
 
 **React-developer-friendly** — familiar `className`, `ref`/`refs`, `o.createStore`. Add one script tag to an existing React app and get Playwright test generation without touching any components.
 
-**Live examples** — real patterns in [`examples/`](https://foggysq.github.io/objs/examples/), narrative walkthroughs in [`EXAMPLES.md`](EXAMPLES.md).
+**Live examples** — real patterns in [`examples/`](https://foggysq.github.io/objs/examples/), narrative walkthroughs in EXAMPLES.md. For AI assistants: use SKILL.md as `@SKILL.md` or system prompt.
 
 ---
 
@@ -25,6 +25,12 @@
 
 ---
 
+### Update v2.1: New features
+- **`refs` on ObjsInstance** — array data support for auto-collect `ref="name"` child elements. Use `.select(i)` to choose not only element but also its refs. The default `.refs` contains the first element children.
+- **self.select(e).refs...** — use `.select(e)` in render and other actions in event handlers to get Objs instance with the e.target from self and controll refs.
+- **Auto HTML hydration** — when render sets `innerHTML` with markup built from inited children (e.g. `html: header.html() + field.html()` in the parent’s render), Objs automatically binds those same instances to the new DOM nodes inside the container. The parent’s stored references (e.g. `self.store.field`) then point at the real elements, and events/refs work. It makes JSX-like code from native HTML sample strings.
+
+
 ### Update v2.0: New features for micro-service architecture and AI development
 
 #### Breaking changes (migrate first)
@@ -71,12 +77,19 @@
 
 
 ## Get started
-Just import in your project or include script on the page.
+
+**Browser** — source with test tools:
+```html
+<script src="objs.js" type="text/javascript"></script>
 ```
-npm i objs-core
+
+**npm / bundler** — correct file chosen automatically via `package.json` exports:
+```js
+import o from 'objs-core';  // resolves to objs.built.js
 ```
+
 ```
-<script src="objs.built.min.js" type="text/javascript"></script>
+npm i objs-core
 ```
 
 
@@ -113,9 +126,8 @@ To control elements Objs uses states. State - it's an information how to create
 // state called render for timer example
 const timerStates = {
 	render: {
-		tag: 'div',
 		class: 'timer',
-		html: 'Seconds: <span>0</span>',
+		html: 'Seconds: <span ref="n">0</span>',
 	}
 }
 ```
@@ -133,15 +145,13 @@ Then add a new state that will start and finish counting. Number will be stored
 const timerStates = {
 	render: {
 		class: 'timer',
-		html: 'Seconds: <span>0</span> ',
+		html: 'Seconds: <span ref="n">0</span>',
 	},
 	start: ({self}) => {
-		// save number or create
 		self.n = self.n || 0;
-		// start interval
 		self.interval = setInterval(() => {
 			self.n++;
-			o(self).first('span').html(self.n);
+			self.refs.n.html(self.n);
 		}, 1000);
 	},
 	stop: ({self}) => {
@@ -201,7 +211,7 @@ Almost all functions return control object with methods, let's call it **Objs**.
 
 `o.inits[initID]` – an array of all inited objects. Available by index **initID** or **o.take()**.
 
-Instance: `o().init()` – equal to **o.init()** but with elements to control. `o().initState()` – equal to **o.initState()** but with elements to control. `o().sample()` – returns states object with render state for creation such elements. `o().getSSR(initId)` – hydrate from existing DOM. `o().saveState([id])`, `o().revertState([id])`, `o().loseState(id)` – save/restore DOM state. `o().unmount()` – remove from DOM and **o.inits**. `o().connect(loader, state, fail)` – connect a loader to this instance (state/fail method names). `o().initID` – undefined or number in **o.inits[]**. `o().html([html])` – returns html string of all elements or sets innerHTML as **html**.
+Instance: `o().init()` – equal to **o.init()** but with elements to control. `o().initState()` – equal to **o.initState()** but with elements to control. `o().sample()` – returns states object with render state for creation such elements. `o().getSSR(initId, [fromEls])` – bind this instance to DOM nodes by initId; optional **fromEls** (e.g. from a container) skips document query; used by auto-hydration when parent sets innerHTML. `o().saveState([id])`, `o().revertState([id])`, `o().loseState(id)` – save/restore DOM state. `o().unmount()` – remove from DOM and **o.inits**. `o().connect(loader, state, fail)` – connect a loader to this instance (state/fail method names). `o().initID` – undefined or number in **o.inits[]**. `o().html([html])` – returns html string of all elements or sets innerHTML as **html**; when **html** is set, any `[data-o-init]` nodes inside are auto-hydrated (inited instances bound to those nodes).
 
 ### DOM manipulation
 `o().reset(q)` – clears **Objs** and get new elements by **q**, works as **o()**.
@@ -481,7 +491,7 @@ No Playwright config to set up manually. No test IDs to maintain. The entire pip
 
 ### Dev/prod build split
 
-`objs.js` is the source for development. `objs.built.js` and `objs.built.min.js` are produced by `node build.js` (ESM + window.o). Only the debug flag is behind `__DEV__`.
+`objs.js` is the source for development or script tag. `objs.built.js` and `objs.built.min.js` are produced by `node build.js` (ESM + window.o). Only the debug flag is behind `__DEV__`.
 
 The **recording pipeline** (`startRecording`, `stopRecording`, `exportTest`, `exportPlaywrightTest`, `reactQA`) ships in all builds so QA assessors can use it on staging.
 
@@ -491,9 +501,8 @@ Bundlers pick the right file automatically via `package.json` exports conditions
 // Vite, webpack, esbuild — no config needed
 import o from 'objs-core'; // dev server → objs.js, build → objs.built.js
 
-// Script tag — explicit choice
-<script src="objs.js"></script>       // dev/staging
-<script src="objs.built.js"></script>  // or objs.built.min.js
+// Script tag
+<script src="objs.js"></script>
 ```
 
 ### States as AI-natural data structures
@@ -502,14 +511,27 @@ Every Objs component is a plain JS object. An LLM can generate correct component
 
 ```js
 // AI prompt: "create a counter with increment and reset"
+// Hack: render as function sets the entity store and returns the init object (no globals, no post-init wiring)
 const counterStates = {
   name: 'Counter',
-  render: { tag: 'div', html: '<span class="n">0</span> <button class="inc">+</button> <button class="rst">Reset</button>' },
-  updateCount: ({ self }, n) => { o(self).first('.n').html(n); },
+  render: ({ self }) => {
+    self.store.n = self.store.n ?? 0;
+    return {
+      html: '<span ref="n">0</span> <button ref="inc">+</button> <button ref="rst">Reset</button>',
+      events: {
+        click: (e) => {
+          if (e.target === self.refs?.inc?.el) self.updateCount(++self.store.n);
+          else if (e.target === self.refs?.rst?.el) self.updateCount(self.store.n = 0);
+        },
+      },
+    };
+  },
+  updateCount: ({ self }, num) => {
+    self.store.n = num;
+    self.refs.n.html(num);
+  },
 };
-const counter = o.init(counterStates).render().appendInside('#app');
-o(counter).first('.inc').on('click', () => counter.updateCount(++n));
-o(counter).first('.rst').on('click', () => counter.updateCount(n = 0));
+o.init(counterStates).render().appendInside('#app');
 ```
 
 No compiler. No build step to try the above. No framework knowledge needed to generate it.
@@ -543,13 +565,15 @@ Similar philosophy to Solid.js signals — but the update logic is a plain funct
 
 ### Real-world patterns
 
-See [EXAMPLES.md](EXAMPLES.md) for complete runnable examples:
-- Site menu with active route state
-- Product card list + cart with shared store (granular update pattern)
-- Overlay dialog with UTM auto-open and session persistence
-- Drawer with filters and two-way URL sync
-- Complex form with per-field validation and live preview
-- React coexistence with shared context bridge
+See [EXAMPLES.md](EXAMPLES.md) for the architecture guide and runnable examples (aligned with [SKILL.md](SKILL.md)):
+1. **How render works** — plain object, function, HTML string, multi-instance, `append`, `children`, `ref`/`refs`
+2. **Single components (atoms)** — Button, Badge, Field with `val()`, `css(null)`, `addClass` spread
+3. **Nesting & composition** — slot pattern, `append` in render, factory with dynamic children
+4. **Design system** — Atoms → Molecules → Organisms, `self.store`, update efficiency
+5. **Real-world** — menu, cart+cards, dialog, drawer+URL, complex form
+6. **React integration** — four modes including bolt-on Playwright recording with `o.reactQA`
+
+**Rule (from SKILL):** Define one state method per data slice; never call `.render()` to update — use targeted state methods. In event handlers use **self.select(e)** and **refs** (e.g. `row.refs.input.val()`), not `e.target`/class selectors or raw DOM.
 
 
 

package/SKILL.md

@@ -9,11 +9,8 @@ Use this file as a `.cursorrules` attachment, system prompt, or `@SKILL.md` refe
 ### Loading
 
 ```html
-<!-- Browser — dev source (includes test tools) -->
+<!-- Browser -->
 <script src="objs.js"></script>
-
-<!-- Browser — distribution (node build.js → objs.built.js, objs.built.min.js) -->
-<script src="objs.built.js"></script>
 ```
 
 ```js
@@ -31,6 +28,7 @@ o([el1, el2])      // → ObjsInstance wrapping element array
 o(2)               // → ObjsInstance from o.inits[2] (previously inited component)
 o()                // → empty ObjsInstance, used to start init chains
 o.first('#id')     // → ObjsInstance, single element, same as querySelector
+self.select(e)     // → select the element in state action or render with self in the parameters, returns Objs instance with e.target (e.g. the row); then .refs, .el apply to that row
 ```
 
 ---
@@ -481,9 +479,60 @@ Use **o.verify(pairs, safe?)** to check types at runtime—useful for function a
 | Use `states.name` for QA autotag | Manually add `data-qa` attributes — autotag keeps them in sync |
 | Use `.val()` to get/set input value: `field.first('input').val('new')` | Access raw DOM: `field.first('input').el.value = 'new'` |
 | Use `self.refs.name` to access named child elements | Use `self.first('[ref="name"]')` — refs gives ObjsInstance directly |
+| Use `ref="name"` for elements the component needs to access (then `self.refs.name`) | Use `id` for component-owned elements — prefer ref so the instance owns the reference and avoids global id collisions |
 | Use `attr('disabled', null)` to remove an attribute | Use `attr('disabled', '')` — empty string now _sets_ the attribute to `""` |
 | Use `css(null)` to remove the `style` attribute entirely | Use `css({})` or `style('')` — those no longer remove the style |
 | Use `o.reactQA('ComponentName')` for stable React test selectors | Write `data-testid` manually — `reactQA` converts CamelCase to kebab automatically |
+| Use **self.select(e)** and **refs** in event handlers (close over `self` from render) | Use CSS classes (e.g. `e.target.closest('.field')`, `wrap.querySelector('.error')`) — brittle when classes are hashed (Nano CSS etc.) |
+| Use Objs instances in handlers: **self.select(e).refs.input.val()**, **row.refs.error.html()** | Use global selectors, **e.target** and native DOM (`.value`, `.textContent`, `.classList`) — stay in Objs API for consistency and refs |
+
+---
+
+## Common mistakes
+
+### Using global selectors, e.target and native DOM in event handlers
+
+**Antipattern:** In event handlers, using `e.target` and raw DOM (e.g. `e.target.value`, `el.textContent`, `el.classList.add`) or global/document selectors to find and update elements. This bypasses Objs refs and the component instance.
+
+```js
+// BAD — raw DOM and e.target
+handler: (e) => {
+  const wrap = e.target.closest('.form-atom__field');
+  const errEl = wrap?.querySelector('.form-atom__field-error');
+  const valid = emailValid(e.target.value);
+  if (!valid) errEl.textContent = 'Invalid email';
+  wrap.classList.add('form-atom__field--error');
+}
+```
+
+**Fix:** Close over **self** from render, use **self.select(e)** to get the row/component that contains the event, then use **refs** and Objs API (`.val()`, `.html()`, `.css()`, `.el` only when needed for e.g. classList).
+
+```js
+// GOOD — Objs instances and refs
+render: ({ self, ...p }) => ({
+  html: `<input ref="input" ...><span ref="error"></span>`,
+  events: {
+    blur: { targetRef: 'input', handler: (e) => {
+      const row = self.select(e);
+      if (!row.refs?.error) return;
+      const value = row.refs.input.val();
+      const valid = emailValid(value);
+      if (!valid && value.trim()) {
+        row.refs.error.html('Invalid email');
+        row.el?.classList.add('form-atom__field--error');
+      } else {
+        row.refs.error.html(''); row.el?.classList.remove('form-atom__field--error');
+      }
+    } },
+  },
+}),
+```
+
+### Using CSS classes to find elements from an event target
+
+**Antipattern:** Using `e.target.closest('.some-class')` or `wrap.querySelector('.child-class')` to find the component root or siblings. Class names are often generated (e.g. Nano CSS) and are brittle for structure.
+
+**Fix:** Use **self.select(e)** (with `self` from render) so refs are updated for the row that contains the event; then use **row.refs.name** — no class-based lookups. Add `ref="name"` to elements you need to access.
 
 ---