@jungherz-de/notionkit-elements 1.0.0

package/src/components/data/nk-ai-input-row.js

@@ -0,0 +1,56 @@
+import { NkElement } from '../../base.js';
+
+// <nk-ai-input-row placeholder="Ask Mona something …"></nk-ai-input-row>
+// → <div class="nk-ai-input-row"><span>✨</span><input><button class="nk-ai-send">↑</button></div>
+// Enter or the send button fires nk-submit { text } and clears the field.
+class NkAiInputRow extends NkElement {
+  static get observedAttributes() { return ['placeholder', 'value', 'disabled', 'icon']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-ai-input-row']);
+    this._icon = document.createElement('span');
+    this._icon.style.fontSize = '14px';
+    this._input = this.createElement('input', [], { type: 'text', 'aria-label': 'Message' });
+    this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button', 'aria-label': 'Send' });
+    this._btn.textContent = '↑';
+    this._row.append(this._icon, this._input, this._btn);
+    this._wrapper.appendChild(this._row);
+    this._sync();
+  }
+
+  _sync() {
+    this._input.placeholder = this.getAttribute('placeholder') || 'Ask something …';
+    if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
+    this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
+    const icon = this.getAttribute('icon') ?? '✨';
+    this._icon.textContent = icon;
+    this._icon.style.display = icon ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onSend = () => this.submit();
+    this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.submit(); } };
+    this._btn.addEventListener('click', this._onSend);
+    this._input.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onSend);
+    this._input?.removeEventListener('keydown', this._onKey);
+  }
+
+  submit() {
+    const text = this._input.value.trim();
+    if (!text || this.getBoolAttr('disabled')) return;
+    const ok = this.emit('nk-submit', { text });
+    if (ok) this._input.value = '';
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._input?.focus(o); }
+  get value() { return this._input?.value ?? ''; }
+  set value(v) { if (this._input) this._input.value = v ?? ''; }
+}
+
+customElements.define('nk-ai-input-row', NkAiInputRow);
+export { NkAiInputRow };

package/src/components/data/nk-ai-msg.js

@@ -0,0 +1,66 @@
+import { NkElement } from '../../base.js';
+
+// <nk-ai-msg role="user" name="You" avatar="MK">Summarise the open tasks.</nk-ai-msg>
+// <nk-ai-msg role="assistant" name="Mona" badge="· AI" avatar="✨">
+//   Two tasks are open …
+//   <button slot="actions" value="copy">📋 Copy</button><button slot="actions" value="retry">↻ Rephrase</button>
+// </nk-ai-msg>
+// → <div class="nk-ai-msg user"><span class="mini-avatar">MK</span><div class="a-body"><div class="a-name">You</div>…<div class="nk-ai-actions">…</div></div></div>
+// Action buttons stay in the light DOM (slotted twins) and fire nk-action { action: value }.
+class NkAiMsg extends NkElement {
+  static get observedAttributes() { return ['role', 'name', 'badge', 'avatar', 'color']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-ai-msg']);
+    this._avatar = this.createElement('span', ['mini-avatar']);
+    const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+    avatarSlot.appendChild(this._avatar);
+    const body = this.createElement('div', ['a-body']);
+    this._name = this.createElement('div', ['a-name']);
+    this._nameText = document.createTextNode('');
+    this._badge = document.createElement('span');
+    this._name.append(this._nameText, this._badge);
+    this._actions = this.createElement('div', ['nk-ai-actions']);
+    this._actionSlot = this.createElement('slot', [], { name: 'actions' });
+    this._actions.appendChild(this._actionSlot);
+    body.append(this._name, document.createElement('slot'), this._actions);
+    this._box.append(avatarSlot, body);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    const user = this.getAttribute('role') === 'user';
+    this._box.classList.toggle('user', user);
+    const name = this.getAttribute('name');
+    this._nameText.data = name || '';
+    const badge = this.getAttribute('badge');
+    this._badge.textContent = badge ? ` ${badge}` : '';
+    this._name.style.display = name ? '' : 'none';
+    this._avatar.textContent = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
+    const color = this.getAttribute('color');
+    this._avatar.style.background = color || '';
+    this._actions.style.display = this._actionSlot.assignedElements().length ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._onClick = (e) => {
+      const btn = e.target.closest?.('button');
+      if (btn && this._actionSlot.assignedElements().includes(btn)) this.emit('nk-action', { action: btn.value || btn.textContent.trim(), value: btn.value || btn.textContent.trim() });
+    };
+    this._actionSlot.addEventListener('slotchange', this._onSlot);
+    this.addEventListener('click', this._onClick);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._actionSlot?.removeEventListener('slotchange', this._onSlot);
+    this.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-ai-msg', NkAiMsg);
+export { NkAiMsg };

package/src/components/data/nk-ai-thread.js

@@ -0,0 +1,13 @@
+import { NkElement } from '../../base.js';
+
+// <nk-ai-thread><nk-ai-msg …>…</nk-ai-msg>…</nk-ai-thread>  →  <div class="nk-ai-thread">
+class NkAiThread extends NkElement {
+  render() {
+    const box = this.createElement('div', ['nk-ai-thread'], { role: 'log', 'aria-live': 'polite' });
+    box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(box);
+  }
+}
+
+customElements.define('nk-ai-thread', NkAiThread);
+export { NkAiThread };

package/src/components/data/nk-board-view.js

@@ -0,0 +1,128 @@
+import { NkElement } from '../../base.js';
+import { renderPropertyCell, tagFor } from '../../util/property-cell.js';
+
+// <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
+// Groups rows by a select column (default: the first select column); one
+// column per option, in option order. Cards show the title column and the
+// `meta-keys` (default: date and progress columns). Drag a card onto another
+// column to change its value – the row is updated and nk-change fires.
+// → <div class="nk-board active"><div class="nk-board-col">…</div>…</div>
+class NkBoardView extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'group-by', 'title-key', 'meta-keys', 'new-row']; }
+
+  render() {
+    this._board = this.createElement('div', ['nk-board', 'active']);
+    this._wrapper.appendChild(this._board);
+    this._columns ??= []; this._rows ??= [];
+    this._render();
+    this.closest('nk-database')?.requestSync?.();
+  }
+
+  _groupColumn() {
+    const key = this.getAttribute('group-by');
+    return this._columns.find(c => c.key === key) || this._columns.find(c => c.type === 'select') || null;
+  }
+  _titleColumn() {
+    const key = this.getAttribute('title-key');
+    return this._columns.find(c => c.key === key) || this._columns.find(c => c.title) || this._columns[0] || null;
+  }
+  _metaColumns() {
+    const keys = (this.getAttribute('meta-keys') || '').split(',').map(s => s.trim()).filter(Boolean);
+    if (keys.length) return keys.map(k => this._columns.find(c => c.key === k)).filter(Boolean);
+    return this._columns.filter(c => c.type === 'date' || c.type === 'progress');
+  }
+
+  _render() {
+    if (!this._board) return;
+    this._board.replaceChildren();
+    const group = this._groupColumn(), title = this._titleColumn();
+    if (!group) return;
+    const options = group.options?.length ? group.options : [...new Set(this._rows.map(r => r[group.key]))].map(v => ({ value: v, label: String(v) }));
+    for (const opt of options) {
+      const col = this.createElement('div', ['nk-board-col'], { 'data-value': opt.value });
+      const header = this.createElement('div', ['nk-board-col-header']);
+      const cards = this._rows.filter(r => r[group.key] === opt.value || r[group.key] === opt.label);
+      const count = this.createElement('span', ['count']);
+      count.textContent = String(cards.length);
+      header.append(tagFor(group, opt.value), count);
+      col.appendChild(header);
+      for (const row of cards) {
+        const card = this.createElement('div', ['nk-card'], { draggable: 'true', 'data-id': row.id ?? '', tabindex: '0' });
+        const t = this.createElement('div', ['card-title']);
+        t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? row[title.key] ?? '' : ''}`;
+        const meta = this.createElement('div', ['card-meta']);
+        for (const c of this._metaColumns()) {
+          const v = row[c.key];
+          if (v === undefined || v === null || v === '') continue;
+          const s = document.createElement('span');
+          if (c.type === 'progress') s.textContent = `▰ ${v}%`;
+          else if (c.type === 'date') s.textContent = `📅 ${v}`;
+          else s.appendChild(renderPropertyCell(c, v, row));
+          meta.appendChild(s);
+        }
+        card.append(t, meta);
+        col.appendChild(card);
+      }
+      if (this.getBoolAttr('new-row')) {
+        const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': opt.value });
+        add.style.padding = '6px 10px';
+        add.textContent = '＋';
+        col.appendChild(add);
+      }
+      this._board.appendChild(col);
+    }
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const add = e.target.closest('[data-add]');
+      if (add) { this.emit('nk-action', { action: 'new-row', value: add.dataset.add }); return; }
+      const card = e.target.closest('.nk-card');
+      if (card) { const row = this._rowById(card.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+    };
+    this._onDragStart = (e) => { const card = e.target.closest?.('.nk-card'); if (!card) return; this._dragId = card.dataset.id; e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', card.dataset.id); } catch {} };
+    this._onDragOver = (e) => { if (this._dragId != null && e.target.closest('.nk-board-col')) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } };
+    this._onDrop = (e) => {
+      const col = e.target.closest('.nk-board-col');
+      if (!col || this._dragId == null) return;
+      e.preventDefault();
+      this.move(this._dragId, col.dataset.value);
+      this._dragId = null;
+    };
+    this._board.addEventListener('click', this._onClick);
+    this._board.addEventListener('dragstart', this._onDragStart);
+    this._board.addEventListener('dragover', this._onDragOver);
+    this._board.addEventListener('drop', this._onDrop);
+  }
+
+  teardownEvents() {
+    this._board?.removeEventListener('click', this._onClick);
+    this._board?.removeEventListener('dragstart', this._onDragStart);
+    this._board?.removeEventListener('dragover', this._onDragOver);
+    this._board?.removeEventListener('drop', this._onDrop);
+  }
+
+  /** Moves a row into another column (sets the group value) and reports it. */
+  move(id, value) {
+    const row = this._rowById(id), group = this._groupColumn();
+    if (!row || !group || row[group.key] === value) return;
+    row[group.key] = value;
+    this._render();
+    this.emit('nk-change', { row, key: group.key, value });
+  }
+
+  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+  onAttributeChanged() { this._render(); }
+
+  get name() { return this.getAttribute('name') || 'board'; }
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+  set data({ columns, rows }) { this.setData(columns, rows); }
+  setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+  refresh() { this._render(); }
+}
+
+customElements.define('nk-board-view', NkBoardView);
+export { NkBoardView };

package/src/components/data/nk-comment.js

@@ -0,0 +1,40 @@
+import { NkElement } from '../../base.js';
+
+// <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="#448361">The board view feels close.</nk-comment>
+// → <div class="nk-comment"><span class="mini-avatar">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>
+// slot="head" adds content after the name (e.g. an <nk-tag>).
+class NkComment extends NkElement {
+  static get observedAttributes() { return ['author', 'time', 'avatar', 'color']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-comment']);
+    this._avatar = this.createElement('span', ['mini-avatar']);
+    const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+    avatarSlot.appendChild(this._avatar);
+    const text = document.createElement('div');
+    this._head = this.createElement('div', ['c-head']);
+    this._author = document.createElement('b');
+    this._time = document.createTextNode('');
+    this._head.append(this._author, this.createElement('slot', [], { name: 'head' }), this._time);
+    const body = this.createElement('div', ['c-body']);
+    body.appendChild(document.createElement('slot'));
+    text.append(this._head, body);
+    box.append(avatarSlot, text);
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    const author = this.getAttribute('author') || '';
+    this._author.textContent = author;
+    const time = this.getAttribute('time');
+    this._time.data = time ? ` · ${time}` : '';
+    this._avatar.textContent = this.getAttribute('avatar') || author.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+    this._avatar.style.background = this.getAttribute('color') || 'var(--nk-text-tertiary)';
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-comment', NkComment);
+export { NkComment };

package/src/components/data/nk-comments.js

@@ -0,0 +1,56 @@
+import { NkElement } from '../../base.js';
+
+// <nk-comments placeholder="Comment …" send-label="Send">
+//   <nk-comment …>…</nk-comment>
+// </nk-comments>
+// → <div class="nk-comments">…<div class="nk-comment-input"><input class="nk-input"><button class="nk-btn primary small">Send</button></div></div>
+// Enter or the button fires nk-submit { text } and clears the field.
+class NkComments extends NkElement {
+  static get observedAttributes() { return ['placeholder', 'send-label', 'no-input', 'disabled']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-comments']);
+    box.appendChild(document.createElement('slot'));
+    this._row = this.createElement('div', ['nk-comment-input']);
+    this._input = this.createElement('input', ['nk-input'], { type: 'text', 'aria-label': 'Comment' });
+    this._btn = this.createElement('button', ['nk-btn', 'primary', 'small'], { type: 'button' });
+    this._row.append(this._input, this._btn);
+    box.appendChild(this._row);
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    this._input.placeholder = this.getAttribute('placeholder') || 'Comment …';
+    this._btn.textContent = this.getAttribute('send-label') || 'Send';
+    this._row.style.display = this.getBoolAttr('no-input') ? 'none' : '';
+    this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
+  }
+
+  setupEvents() {
+    this._onSend = () => this.submit();
+    this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.submit(); } };
+    this._btn.addEventListener('click', this._onSend);
+    this._input.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onSend);
+    this._input?.removeEventListener('keydown', this._onKey);
+  }
+
+  submit() {
+    const text = this._input.value.trim();
+    if (!text) return;
+    const ok = this.emit('nk-submit', { text });
+    if (ok) this._input.value = '';
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._input?.focus(o); }
+  get value() { return this._input?.value ?? ''; }
+  set value(v) { if (this._input) this._input.value = v ?? ''; }
+}
+
+customElements.define('nk-comments', NkComments);
+export { NkComments };

package/src/components/data/nk-database.js

@@ -0,0 +1,99 @@
+import { NkElement } from '../../base.js';
+
+// <nk-database id="db" view="table" add-view>
+//   <nk-table-view name="table" label="▦ Table" count></nk-table-view>
+//   <nk-board-view name="board" label="▤ Board" group-by="status"></nk-board-view>
+// </nk-database>
+// db.columns = [{ key: 'name', label: 'Name', type: 'text', icon: '📄', title: true }, { key: 'status', type: 'select', options: [...] }, …];
+// db.rows = [{ id: 1, icon: '🧭', name: '…', status: 'done', … }];
+// → <div class="nk-database"><div class="nk-db-tabs">…</div>…active view…</div>
+// The tabs come from the child views; data is pushed into every view.
+class NkDatabase extends NkElement {
+  static get observedAttributes() { return ['view', 'add-view']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-database']);
+    this._tabs = this.createElement('div', ['nk-db-tabs'], { role: 'tablist' });
+    this._slot = document.createElement('slot');
+    this._box.append(this._tabs, this._slot);
+    this._wrapper.appendChild(this._box);
+    this._columns = []; this._rows = [];
+    this._sync();
+  }
+
+  get views() { return this._slot?.assignedElements().filter(el => /^nk-[a-z]+-view$/.test(el.localName)) ?? []; }
+
+  _sync() {
+    if (!this._tabs) return;
+    const views = this.views;
+    let current = this.getAttribute('view');
+    if (!views.some(v => v.name === current)) current = views[0]?.name ?? null;
+    this._tabs.replaceChildren();
+    for (const v of views) {
+      const tab = this.createElement('span', ['nk-db-tab'], { role: 'tab', 'data-view': v.name, tabindex: '0' });
+      tab.classList.toggle('active', v.name === current);
+      tab.setAttribute('aria-selected', v.name === current ? 'true' : 'false');
+      tab.append(document.createTextNode(v.getAttribute('label') || v.name));
+      const badge = v.hasAttribute('count') ? String(this._rows.length) : v.getAttribute('badge');
+      if (badge) { const b = this.createElement('span', ['badge']); b.textContent = badge; tab.appendChild(b); }
+      this._tabs.appendChild(tab);
+      v.hidden = v.name !== current;
+      // A method call, not a property write: a view that has not been upgraded
+      // yet would otherwise get an own `data` property that shadows its setter.
+      v.setData?.(this._columns, this._rows);
+    }
+    if (this.getBoolAttr('add-view')) {
+      const add = this.createElement('span', ['nk-db-tab'], { role: 'button', 'data-add': '', tabindex: '0' });
+      add.style.color = 'var(--nk-text-tertiary)';
+      add.textContent = '＋';
+      this._tabs.appendChild(add);
+    }
+    this._tabs.style.display = views.length ? '' : 'none';
+    this._current = current;
+  }
+
+  /** Views upgrade after the database; each one asks for a resync once rendered. */
+  requestSync() {
+    if (this._syncQueued) return;
+    this._syncQueued = true;
+    queueMicrotask(() => { this._syncQueued = false; this._sync(); });
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const tab = e.target.closest('[data-view]');
+      if (tab) { this.view = tab.dataset.view; return; }
+      if (e.target.closest('[data-add]')) this.emit('nk-action', { action: 'add-view' });
+    };
+    this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.closest('[data-view],[data-add]')) { e.preventDefault(); e.target.click(); } };
+    this._onSlot = () => this._sync();
+    this._tabs.addEventListener('click', this._onClick);
+    this._tabs.addEventListener('keydown', this._onKey);
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._tabs?.removeEventListener('click', this._onClick);
+    this._tabs?.removeEventListener('keydown', this._onKey);
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
+  onAttributeChanged(name) {
+    const before = this._current;
+    this._sync();
+    if (name === 'view' && this._current !== before) this.emit('nk-view-change', { view: this._current });
+  }
+
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._sync(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._sync(); }
+  get view() { return this._current ?? this.getAttribute('view'); }
+  set view(v) { this.setAttribute('view', v); }
+  /** Re-renders every view after in-place row mutations. */
+  refresh() { this._sync(); }
+}
+
+customElements.define('nk-database', NkDatabase);
+export { NkDatabase };

package/src/components/data/nk-filter-bar.js

@@ -0,0 +1,77 @@
+import { NkElement } from '../../base.js';
+
+// <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
+// bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
+// Composed from existing classes (nk-btn secondary small, nk-input, nk-tag):
+// filter / sort buttons fire nk-action, chips remove on ×, search and chip
+// changes fire nk-change { filters, search }. The wrapper is layout only.
+class NkFilterBar extends NkElement {
+  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value']; }
+
+  render() {
+    this._bar = document.createElement('div');
+    this._bar.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0';
+    this._filterBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'filter' });
+    this._filterBtn.textContent = '⚲ Filter';
+    this._sortBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'sort' });
+    this._sortBtn.textContent = '↕ Sort';
+    this._chips = document.createElement('span');
+    this._chips.style.cssText = 'display:inline-flex;gap:4px;flex-wrap:wrap';
+    this._input = this.createElement('input', ['nk-input'], { type: 'search', autocomplete: 'off' });
+    this._input.style.marginLeft = 'auto';
+    this._bar.append(this._filterBtn, this._sortBtn, this._chips, document.createElement('slot'), this._input);
+    this._wrapper.appendChild(this._bar);
+    this._filters = [];
+    this._sync();
+  }
+
+  _sync() {
+    this._filterBtn.style.display = this.getBoolAttr('no-filter') ? 'none' : '';
+    this._sortBtn.style.display = this.getBoolAttr('no-sort') ? 'none' : '';
+    this._input.style.display = this.getBoolAttr('search') ? '' : 'none';
+    this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
+    if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
+    this._chips.replaceChildren();
+    this._filters.forEach((f, i) => {
+      const chip = this.createElement('span', ['nk-tag', f.color || 'blue'], { 'data-index': i });
+      chip.style.cursor = 'pointer';
+      chip.textContent = `${f.label ?? `${f.key}: ${f.value}`} ×`;
+      chip.title = 'Remove filter';
+      this._chips.appendChild(chip);
+    });
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const btn = e.target.closest('[data-action]');
+      if (btn) { this.emit('nk-action', { action: btn.dataset.action }); return; }
+      const chip = e.target.closest('[data-index]');
+      if (chip) { this._filters.splice(Number(chip.dataset.index), 1); this._sync(); this._emitChange(); }
+    };
+    this._onInput = () => { clearTimeout(this._debounce); this._debounce = setTimeout(() => this._emitChange(), 150); };
+    this._bar.addEventListener('click', this._onClick);
+    this._input.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._bar?.removeEventListener('click', this._onClick);
+    this._input?.removeEventListener('input', this._onInput);
+    clearTimeout(this._debounce);
+  }
+
+  _emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
+  onAttributeChanged() { this._sync(); }
+
+  get filters() { return this._filters; }
+  set filters(v) { this._filters = Array.isArray(v) ? v : []; this._sync(); }
+  get value() { return this._input?.value ?? ''; }
+  set value(v) { if (this._input) this._input.value = v ?? ''; }
+  /** Applies filters + search to rows: equality per filter key, substring search over every string field. */
+  apply(rows) {
+    const q = this.value.trim().toLowerCase();
+    return rows.filter(r => this._filters.every(f => r[f.key] === f.value) && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
+  }
+}
+
+customElements.define('nk-filter-bar', NkFilterBar);
+export { NkFilterBar };

package/src/components/data/nk-table-view.js

@@ -0,0 +1,108 @@
+import { NkElement } from '../../base.js';
+import { renderPropertyCell, compareBy } from '../../util/property-cell.js';
+
+// <nk-table-view name="table" label="▦ Table" count new-row sortable></nk-table-view>
+// Standalone: view.columns = […]; view.rows = […];  Inside <nk-database> the
+// database pushes `data`. → <div class="nk-table-wrap"><table class="nk-table">…</table><div class="nk-new-row">＋ New page</div></div>
+// Cells are plain markup from renderPropertyCell(); rows fire nk-select,
+// checkboxes nk-change, headers nk-action { action: 'sort' } (and sort locally
+// with `sortable`), the add row nk-action { action: 'new-row' }.
+class NkTableView extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir']; }
+
+  render() {
+    this._wrap = this.createElement('div', ['nk-table-wrap']);
+    this._table = this.createElement('table', ['nk-table']);
+    this._thead = document.createElement('thead');
+    this._tbody = document.createElement('tbody');
+    this._table.append(this._thead, this._tbody);
+    this._newRow = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0' });
+    this._wrap.append(this._table, this._newRow);
+    this._wrapper.appendChild(this._wrap);
+    this._columns ??= []; this._rows ??= [];
+    this._render();
+    this.closest('nk-database')?.requestSync?.();
+  }
+
+  _sortedRows() {
+    const key = this.getAttribute('sort-key');
+    const col = this._columns.find(c => c.key === key);
+    if (!col) return this._rows;
+    return [...this._rows].sort(compareBy(col, this.getAttribute('sort-dir') === 'desc' ? -1 : 1));
+  }
+
+  _render() {
+    if (!this._thead) return;
+    const tr = document.createElement('tr');
+    for (const col of this._columns) {
+      const th = this.createElement('th', [], { 'data-key': col.key, scope: 'col' });
+      if (col.icon) { const i = this.createElement('span', ['th-icon']); i.textContent = col.icon; th.appendChild(i); }
+      th.appendChild(document.createTextNode(col.label ?? col.key));
+      if (col.key === this.getAttribute('sort-key')) th.appendChild(document.createTextNode(this.getAttribute('sort-dir') === 'desc' ? ' ↓' : ' ↑'));
+      if (col.width) th.style.width = col.width;
+      tr.appendChild(th);
+    }
+    this._thead.replaceChildren(tr);
+    this._tbody.replaceChildren();
+    for (const row of this._sortedRows()) {
+      const r = this.createElement('tr', [], { 'data-id': row.id ?? '' });
+      for (const col of this._columns) {
+        const td = document.createElement('td');
+        td.appendChild(renderPropertyCell(col, row[col.key], row));
+        r.appendChild(td);
+      }
+      this._tbody.appendChild(r);
+    }
+    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this._newRow.contains(e.target)) { this.emit('nk-action', { action: 'new-row' }); return; }
+      const th = e.target.closest('th[data-key]');
+      if (th) {
+        const key = th.dataset.key;
+        const dir = this.getAttribute('sort-key') === key && this.getAttribute('sort-dir') !== 'desc' ? 'desc' : 'asc';
+        const ok = this.emit('nk-action', { action: 'sort', key, value: dir });
+        if (ok && this.getBoolAttr('sortable')) { this.setAttribute('sort-key', key); this.setAttribute('sort-dir', dir); }
+        return;
+      }
+      if (e.target.closest('input[type=checkbox], a')) return;
+      const tr = e.target.closest('tr[data-id]');
+      if (tr) { const row = this._rowById(tr.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+    };
+    this._onChange = (e) => {
+      const input = e.target;
+      if (input.type !== 'checkbox') return;
+      const row = this._rowById(input.dataset.rowId);
+      if (row) row[input.dataset.key] = input.checked;
+      this.emit('nk-change', { row, key: input.dataset.key, value: input.checked });
+    };
+    this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target === this._newRow) { e.preventDefault(); this.emit('nk-action', { action: 'new-row' }); } };
+    this._wrap.addEventListener('click', this._onClick);
+    this._wrap.addEventListener('change', this._onChange);
+    this._wrap.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._wrap?.removeEventListener('click', this._onClick);
+    this._wrap?.removeEventListener('change', this._onChange);
+    this._wrap?.removeEventListener('keydown', this._onKey);
+  }
+
+  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+  onAttributeChanged() { this._render(); }
+
+  get name() { return this.getAttribute('name') || 'table'; }
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+  set data({ columns, rows }) { this.setData(columns, rows); }
+  setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+  refresh() { this._render(); }
+}
+
+customElements.define('nk-table-view', NkTableView);
+export { NkTableView };