@jungherz-de/notionkit-elements 1.0.0

package/src/components/shell/nk-workspace-switcher.js

@@ -0,0 +1,81 @@
+import { NkElement } from '../../base.js';
+
+// <nk-workspace-switcher slot="workspace" name="Acme" avatar="A">
+//   <nk-menu slot="menu">…</nk-menu>
+// </nk-workspace-switcher>
+// → <div class="nk-workspace"><div class="avatar">A</div><span>Acme</span><span class="chev">⌄</span></div>
+// A click toggles `open` and shows whatever sits in the menu slot below the
+// row; clicking outside or pressing Escape closes it.
+const menuSheet = new CSSStyleSheet();
+menuSheet.replaceSync(`
+  .nk-ws-anchor { position: relative; }
+  .nk-ws-menu { display: none; position: absolute; left: 8px; top: calc(100% - 2px); z-index: 50; }
+  :host([open]) .nk-ws-menu { display: block; }
+`);
+
+class NkWorkspaceSwitcher extends NkElement {
+  static get hostStyles() { return menuSheet; }
+  static get observedAttributes() { return ['name', 'avatar', 'open']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-workspace'], { role: 'button', tabindex: '0', 'aria-haspopup': 'menu' });
+    this._avatar = this.createElement('div', ['avatar']);
+    const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+    avatarSlot.appendChild(this._avatar);
+    this._name = document.createElement('span');
+    const chev = this.createElement('span', ['chev']);
+    chev.textContent = '⌄';
+    this._row.append(avatarSlot, this._name, chev);
+    this._menu = this.createElement('div', ['nk-ws-menu']);
+    this._menu.appendChild(this.createElement('slot', [], { name: 'menu' }));
+    const anchor = this.createElement('div', ['nk-ws-anchor']);
+    anchor.append(this._row, this._menu);
+    this._wrapper.appendChild(anchor);
+    this._sync();
+  }
+
+  _sync() {
+    const name = this.getAttribute('name') || '';
+    this._name.textContent = name;
+    this._avatar.textContent = this.getAttribute('avatar') || name.trim().charAt(0).toUpperCase();
+    this._row.setAttribute('aria-expanded', this.getBoolAttr('open') ? 'true' : 'false');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.toggle();
+    this._onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.toggle(); } };
+    this._onDocClick = (e) => { if (this.getBoolAttr('open') && !e.composedPath().includes(this)) this.close(); };
+    this._onDocKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+    this._onMenuSelect = () => this.close();
+    this._row.addEventListener('click', this._onClick);
+    this._row.addEventListener('keydown', this._onKey);
+    this._menu.addEventListener('nk-select', this._onMenuSelect);
+    document.addEventListener('click', this._onDocClick);
+    document.addEventListener('keydown', this._onDocKey);
+  }
+
+  teardownEvents() {
+    this._row?.removeEventListener('click', this._onClick);
+    this._row?.removeEventListener('keydown', this._onKey);
+    this._menu?.removeEventListener('nk-select', this._onMenuSelect);
+    document.removeEventListener('click', this._onDocClick);
+    document.removeEventListener('keydown', this._onDocKey);
+  }
+
+  onAttributeChanged(name) {
+    this._sync();
+    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+}
+
+customElements.define('nk-workspace-switcher', NkWorkspaceSwitcher);
+export { NkWorkspaceSwitcher };

package/src/index.js

@@ -0,0 +1,88 @@
+// NotionKit Elements — Web Components for the NotionKit CSS foundation
+// https://github.com/JUNGHERZ/NotionKit-Elements
+//
+// Importing a component file registers its tag as a side effect; this barrel
+// therefore both registers every element and exposes its class.
+
+export { NkElement, NkFormElement } from './base.js';
+
+// Wave 1 – forms
+export { NkBtn } from './components/forms/nk-btn.js';
+export { NkInput } from './components/forms/nk-input.js';
+export { NkTextarea } from './components/forms/nk-textarea.js';
+export { NkSelect } from './components/forms/nk-select.js';
+export { NkSwitch } from './components/forms/nk-switch.js';
+export { NkCheck } from './components/forms/nk-check.js';
+export { NkRadio } from './components/forms/nk-radio.js';
+export { NkSlider } from './components/forms/nk-slider.js';
+export { NkField } from './components/forms/nk-field.js';
+
+// Wave 1 – content
+export { NkTag } from './components/content/nk-tag.js';
+export { NkProgress } from './components/content/nk-progress.js';
+export { NkCallout } from './components/content/nk-callout.js';
+export { NkDivider } from './components/content/nk-divider.js';
+export { NkHeading } from './components/content/nk-heading.js';
+export { NkToggle } from './components/content/nk-toggle.js';
+export { NkTodo } from './components/content/nk-todo.js';
+export { NkKbd } from './components/content/nk-kbd.js';
+export { NkCode } from './components/content/nk-code.js';
+export { NkQuote } from './components/content/nk-quote.js';
+
+// Wave 2 – app shell & navigation
+export { NkApp } from './components/shell/nk-app.js';
+export { NkSidebar } from './components/shell/nk-sidebar.js';
+export { NkWorkspaceSwitcher } from './components/shell/nk-workspace-switcher.js';
+export { NkSectionLabel } from './components/shell/nk-section-label.js';
+export { NkTree } from './components/shell/nk-tree.js';
+export { NkTreeItem } from './components/shell/nk-tree-item.js';
+export { NkTopbar } from './components/shell/nk-topbar.js';
+export { NkBreadcrumb } from './components/shell/nk-breadcrumb.js';
+export { NkThemeToggle } from './components/shell/nk-theme-toggle.js';
+
+// Wave 3 – page shell & blocks
+export { NkPage } from './components/page/nk-page.js';
+export { NkPageCover } from './components/page/nk-page-cover.js';
+export { NkPageTitle } from './components/page/nk-page-title.js';
+export { NkPageActions } from './components/page/nk-page-actions.js';
+export { NkBlockHost } from './components/page/nk-block-host.js';
+export { NkBanner } from './components/page/nk-banner.js';
+export { NkEmpty } from './components/page/nk-empty.js';
+export { NkSkeleton } from './components/page/nk-skeleton.js';
+export { NkSynced } from './components/page/nk-synced.js';
+export { NkTabs } from './components/page/nk-tabs.js';
+export { NkTab } from './components/page/nk-tab.js';
+export { NkSegmented } from './components/page/nk-segmented.js';
+export { NkStats } from './components/page/nk-stats.js';
+export { NkStat } from './components/page/nk-stat.js';
+export { NkAvatarGroup } from './components/page/nk-avatar-group.js';
+export { NkMention } from './components/page/nk-mention.js';
+export { NkTemplateBtn } from './components/page/nk-template-btn.js';
+export { NkModelCard } from './components/page/nk-model-card.js';
+export { NkProfileRow } from './components/page/nk-profile-row.js';
+export { NkDangerZone } from './components/page/nk-danger-zone.js';
+export { NkMemberList } from './components/page/nk-member-list.js';
+export { NkMemberRow } from './components/page/nk-member-row.js';
+
+// Wave 4 – overlays
+export { NkModal } from './components/overlays/nk-modal.js';
+export { NkSettingsPane } from './components/overlays/nk-settings-pane.js';
+export { NkSettingsUser } from './components/overlays/nk-settings-user.js';
+export { NkCmdk } from './components/overlays/nk-cmdk.js';
+export { NkMenu } from './components/overlays/nk-menu.js';
+export { NkMenuItem } from './components/overlays/nk-menu-item.js';
+export { NkPop } from './components/overlays/nk-pop.js';
+export { NkEmojiPicker } from './components/overlays/nk-emoji-picker.js';
+export { NkToast } from './components/overlays/nk-toast.js';
+
+// Wave 5 – data & collaboration
+export { NkDatabase } from './components/data/nk-database.js';
+export { NkTableView } from './components/data/nk-table-view.js';
+export { NkBoardView } from './components/data/nk-board-view.js';
+export { NkFilterBar } from './components/data/nk-filter-bar.js';
+export { NkComments } from './components/data/nk-comments.js';
+export { NkComment } from './components/data/nk-comment.js';
+export { NkAiThread } from './components/data/nk-ai-thread.js';
+export { NkAiMsg } from './components/data/nk-ai-msg.js';
+export { NkAiInputRow } from './components/data/nk-ai-input-row.js';
+export { renderPropertyCell, tagFor, compareBy } from './util/property-cell.js';

package/src/util/emoji.js

@@ -0,0 +1,17 @@
+// Built-in emoji set for <nk-emoji-picker>: eight categories, names for
+// search. Override with `picker.emojis = [{ char, name, cat }]`.
+const C = (cat, icon, list) => list.map(([char, name]) => ({ char, name, cat, icon }));
+export const EMOJI_CATEGORIES = [
+  { id: 'smileys', icon: '😀' }, { id: 'people', icon: '👋' }, { id: 'nature', icon: '🌿' }, { id: 'food', icon: '☕' },
+  { id: 'activity', icon: '🎯' }, { id: 'travel', icon: '🚀' }, { id: 'objects', icon: '💡' }, { id: 'symbols', icon: '✅' },
+];
+export const EMOJI = [
+  ...C('smileys', '😀', [['😀', 'grinning'], ['😊', 'smile blush'], ['😂', 'joy laugh'], ['🙂', 'slight smile'], ['😉', 'wink'], ['😍', 'heart eyes love'], ['🤔', 'thinking'], ['😎', 'cool sunglasses'], ['🥳', 'party'], ['😴', 'sleep'], ['🤯', 'mind blown'], ['😅', 'sweat smile'], ['🙃', 'upside down'], ['😇', 'angel halo'], ['🤗', 'hug'], ['😢', 'cry sad']]),
+  ...C('people', '👋', [['👋', 'wave hello'], ['👍', 'thumbs up'], ['👎', 'thumbs down'], ['🙏', 'pray thanks'], ['👏', 'clap'], ['🤝', 'handshake deal'], ['💪', 'strong'], ['👀', 'eyes look'], ['🧠', 'brain knowledge'], ['❤️', 'heart love'], ['👤', 'person user'], ['👥', 'people team members'], ['🧑‍💻', 'developer'], ['🙋', 'raise hand'], ['✍️', 'writing'], ['🫶', 'heart hands']]),
+  ...C('nature', '🌿', [['🌿', 'leaf herb'], ['🌱', 'seedling'], ['🌳', 'tree'], ['🌸', 'blossom flower'], ['🌞', 'sun'], ['🌙', 'moon night'], ['⭐', 'star'], ['🔥', 'fire hot'], ['🌈', 'rainbow'], ['🌊', 'wave water'], ['🍀', 'clover luck'], ['🐝', 'bee'], ['🦋', 'butterfly'], ['🐢', 'turtle'], ['🌍', 'earth globe'], ['❄️', 'snow']]),
+  ...C('food', '☕', [['☕', 'coffee'], ['🍵', 'tea'], ['🍎', 'apple'], ['🍕', 'pizza'], ['🍰', 'cake'], ['🍪', 'cookie'], ['🥐', 'croissant'], ['🍔', 'burger'], ['🍜', 'noodles'], ['🍺', 'beer'], ['🍷', 'wine'], ['🥗', 'salad'], ['🍫', 'chocolate'], ['🍓', 'strawberry'], ['🥑', 'avocado'], ['🍩', 'donut']]),
+  ...C('activity', '🎯', [['🎯', 'target goal'], ['🏆', 'trophy win'], ['🎉', 'tada celebration'], ['🎨', 'art palette design'], ['🎙️', 'microphone podcast voice'], ['🎬', 'clapper movie'], ['🎮', 'game'], ['⚽', 'football'], ['🏃', 'run'], ['🧘', 'yoga calm'], ['🎵', 'music'], ['🎲', 'dice'], ['🏁', 'finish flag'], ['🎓', 'graduation learn'], ['🧩', 'puzzle piece'], ['🔁', 'repeat retro']]),
+  ...C('travel', '🚀', [['🚀', 'rocket launch'], ['✈️', 'plane travel'], ['🚗', 'car'], ['🚲', 'bike'], ['🏠', 'house home'], ['🏢', 'office building'], ['🗺️', 'map'], ['🧭', 'compass'], ['⛰️', 'mountain'], ['🏖️', 'beach'], ['🚉', 'station'], ['🛰️', 'satellite'], ['🌆', 'city'], ['🏕️', 'camping'], ['⛵', 'sailboat'], ['🛫', 'departure']]),
+  ...C('objects', '💡', [['💡', 'idea bulb'], ['📊', 'chart bar'], ['📈', 'chart up'], ['📅', 'calendar date'], ['📄', 'page document'], ['📁', 'folder'], ['🗃️', 'card box database'], ['📌', 'pin'], ['🔍', 'search'], ['🛠️', 'tools'], ['⚙️', 'gear settings'], ['🔔', 'bell notification'], ['💎', 'gem diamond'], ['📝', 'memo notes'], ['📎', 'paperclip files'], ['🔒', 'lock secure'], ['💬', 'speech comment'], ['📤', 'export outbox'], ['📥', 'inbox'], ['🗑️', 'trash bin'], ['🖥️', 'desktop'], ['📱', 'phone'], ['💻', 'laptop'], ['🧾', 'receipt']]),
+  ...C('symbols', '✅', [['✅', 'check done'], ['✨', 'sparkles ai magic'], ['❌', 'cross no'], ['⚠️', 'warning'], ['ℹ️', 'info'], ['❓', 'question'], ['➕', 'plus add'], ['➡️', 'arrow right'], ['🔴', 'red circle'], ['🟢', 'green circle'], ['🟡', 'yellow circle'], ['🔵', 'blue circle'], ['⏳', 'hourglass wait'], ['♻️', 'recycle'], ['🆕', 'new'], ['💯', 'hundred']]),
+];

package/src/util/focus.js

@@ -0,0 +1,45 @@
+// Overlay plumbing shared by nk-modal and nk-cmdk: body scroll lock with a
+// refcount, and `inert` on everything outside the overlay so focus and
+// assistive technology stay inside – nested shadow roots included.
+let locks = 0, previousOverflow = '';
+
+export function lockScroll() {
+  if (locks++ === 0) {
+    previousOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = 'hidden';
+  }
+}
+
+export function unlockScroll() {
+  if (locks > 0 && --locks === 0) document.documentElement.style.overflow = previousOverflow;
+}
+
+/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included); returns the undo. */
+export function inertOutside(el) {
+  const made = [];
+  let node = el;
+  while (node && node !== document.body) {
+    const parent = node.parentNode instanceof ShadowRoot ? node.parentNode : node.parentNode;
+    if (!parent) break;
+    for (const sib of parent.children) {
+      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName)) continue;
+      sib.inert = true;
+      made.push(sib);
+    }
+    node = parent instanceof ShadowRoot ? parent.host : parent;
+  }
+  return () => { for (const c of made) c.inert = false; };
+}
+
+/** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
+export function firstFocusable(root) {
+  const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
+  const walk = (node) => {
+    for (const el of node.querySelectorAll('*')) {
+      if (el.matches(SEL) && el.getClientRects().length) return el;
+      if (el.shadowRoot) { const inner = walk(el.shadowRoot); if (inner) return inner; }
+    }
+    return null;
+  };
+  return walk(root);
+}

package/src/util/fuzzy.js

@@ -0,0 +1,19 @@
+// Subsequence scoring for the command palette: every query character must
+// appear in order; consecutive hits, word starts and an early first hit score
+// higher. Returns 0 when the query does not match.
+export function fuzzyScore(query, text) {
+  const q = query.trim().toLowerCase();
+  if (!q) return 1;
+  const t = text.toLowerCase();
+  let ti = 0, score = 0, streak = 0;
+  for (let qi = 0; qi < q.length; qi++) {
+    const idx = t.indexOf(q[qi], ti);
+    if (idx < 0) return 0;
+    const wordStart = idx === 0 || /[\s\-_/.]/.test(t[idx - 1]);
+    streak = idx === ti ? streak + 1 : 0;
+    score += 1 + streak * 2 + (wordStart ? 3 : 0) - Math.min(3, (idx - ti) * 0.25);
+    ti = idx + 1;
+  }
+  if (t.startsWith(q)) score += 10;
+  return Math.max(0.01, score / (1 + t.length / 40));
+}

package/src/util/highlight.js

@@ -0,0 +1,14 @@
+// Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
+// Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party
+// highlighter, no other languages. Anything that is not HTML is escaped only.
+export function escapeHtml(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export function highlightHtml(source) {
+  return escapeHtml(source).replace(/&lt;(\/?)([a-zA-Z][\w-]*)([^&]*?)(\/?)&gt;/g, (m, close, tag, attrs, self) => {
+    const attrHtml = attrs.replace(/([\w-]+)(=)("[^"]*"|'[^']*')?/g,
+      (a, name, eq, val) => `<span class="attr">${name}</span>${eq}${val ?? ''}`);
+    return `&lt;${close}<span class="tag">${tag}</span>${attrHtml}${self}&gt;`;
+  });
+}

package/src/util/property-cell.js

@@ -0,0 +1,90 @@
+// Polymorphic property renderer for database views. Returns plain DOM built
+// from NotionKit classes – deliberately not a custom element: every cell rule
+// starts with `.nk-table`, so a cell inside its own shadow root would never
+// be styled. Exported for consumers who render tables themselves.
+//
+// column: { key, label, type, icon, options: [{ value, label, color }], title }
+// types: text | select | multi-select | date | person | checkbox | url | number | progress
+const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+const COLORS = ['blue', 'green', 'orange', 'purple'];
+
+export function optionFor(column, value) {
+  const opts = column.options || [];
+  return opts.find(o => o.value === value) || opts.find(o => o.label === value) || null;
+}
+
+export function tagFor(column, value) {
+  const opt = optionFor(column, value);
+  const color = opt?.color && COLORS.includes(opt.color) ? opt.color : 'blue';
+  return el('span', `nk-tag ${color}`, opt?.label ?? String(value));
+}
+
+export function renderPropertyCell(column, value, row = {}) {
+  const type = column.type || 'text';
+  if (value === undefined || value === null || value === '') {
+    if (type === 'checkbox') return checkbox(column, false, row);
+    if (type === 'progress') return progress(0);
+    return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
+  }
+  switch (type) {
+    case 'select': return tagFor(column, value);
+    case 'multi-select': {
+      const wrap = el('span');
+      wrap.style.display = 'inline-flex'; wrap.style.gap = '4px'; wrap.style.flexWrap = 'wrap';
+      for (const v of Array.isArray(value) ? value : String(value).split(',').map(s => s.trim()).filter(Boolean)) wrap.appendChild(tagFor(column, v));
+      return wrap;
+    }
+    case 'date': return el('span', 'date-cell', String(value));
+    case 'person': {
+      const cell = el('span', 'person-cell');
+      const p = typeof value === 'string' ? { name: value } : value;
+      const avatar = el('span', 'mini-avatar', p.initials || p.avatar || (p.name || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase());
+      avatar.style.background = p.color || 'var(--nk-text-tertiary)';
+      cell.append(avatar, document.createTextNode(' ' + (p.name || '')));
+      return cell;
+    }
+    case 'checkbox': return checkbox(column, !!value, row);
+    case 'url': { const a = el('a', null, String(value).replace(/^https?:\/\//, '')); a.href = String(value); a.target = '_blank'; a.rel = 'noopener'; return a; }
+    case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString() : String(value));
+    case 'progress': return progress(Number(value) || 0);
+    default: {
+      if (column.title) {
+        const t = el('span', 'row-title');
+        if (row.icon) t.append(document.createTextNode(row.icon + ' '));
+        t.append(document.createTextNode(String(value)));
+        return t;
+      }
+      return el('span', null, String(value));
+    }
+  }
+}
+
+function checkbox(column, checked, row) {
+  const label = el('label', 'nk-check');
+  const input = el('input');
+  input.type = 'checkbox'; input.checked = checked;
+  input.dataset.key = column.key;
+  if (row.id != null) input.dataset.rowId = row.id;
+  label.appendChild(input);
+  return label;
+}
+
+function progress(value) {
+  const frag = document.createDocumentFragment();
+  const bar = el('span', 'nk-progress');
+  const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
+  bar.appendChild(fill);
+  frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
+  return frag;
+}
+
+/** Sort comparator for a column type. */
+export function compareBy(column, dir = 1) {
+  const type = column.type || 'text';
+  return (a, b) => {
+    let x = a[column.key], y = b[column.key];
+    if (type === 'person') { x = x?.name ?? x ?? ''; y = y?.name ?? y ?? ''; }
+    if (type === 'number' || type === 'progress' || type === 'checkbox') return ((Number(x) || 0) - (Number(y) || 0)) * dir;
+    return String(x ?? '').localeCompare(String(y ?? ''), undefined, { numeric: true }) * dir;
+  };
+}