@adia-ai/web-components 0.4.5 → 0.4.7

package/components/pagination/pagination.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `<pagination-ui>` — Page navigation with prev/next buttons, page numbers, and ellipsis.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/pagination
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPagination extends UIElement {
+  /** Current active page number. */
+  page: number;
+  /** Number of page buttons to show on each side of the current page. */
+  siblings: number;
+  /** Total number of pages. */
+  total: number;
+  /** Visual variant */
+  variant: string;
+}

package/components/pagination/pagination.js

@@ -1,185 +1,17 @@
 /**
- * <pagination-ui page="1" total="10" siblings="1"></pagination-ui>
+ * `<pagination-ui>` — auto-registers the tag on import.
  *
- * Page navigation with prev/next buttons, page numbers, and ellipsis.
- * Shows: first, ..., siblings around current, ..., last.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Events:
- *   page-change — { detail: { page } }
+ *   import { UIPagination } from '@adia-ai/web-components/components/pagination/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIPagination extends UIElement {
-  static properties = {
-    page:     { type: Number, default: 1, reflect: true },
-    total:    { type: Number, default: 1, reflect: true },
-    siblings: { type: Number, default: 1, reflect: true },
-    variant:  { type: String, default: 'default', reflect: true },
-  };
-
-  static template = () => null;
-
-  #nav = null;
-  #bound = false;
-
-  connected() {
-    if (!this.#nav) {
-      this.#nav = document.createElement('nav');
-      this.#nav.setAttribute('slot', 'nav');
-      this.#nav.setAttribute('aria-label', 'Pagination');
-      this.appendChild(this.#nav);
-    }
-
-    if (!this.#bound) {
-      this.#bound = true;
-      this.#nav.addEventListener('click', this.#onClick);
-    }
-  }
-
-  disconnected() {
-    this.#nav?.removeEventListener('click', this.#onClick);
-    this.#nav = null;
-    this.#bound = false;
-  }
-
-  render() {
-    if (!this.#nav) return;
-
-    const page = Math.max(1, Math.min(this.page, this.total));
-    const total = Math.max(1, this.total);
-    const siblings = Math.max(0, this.siblings);
-
-    const range = this.#buildRange(page, total, siblings);
-
-    this.reconcile(
-      this.#nav,
-      range,
-      (item) => item.key,
-      (item, i, existing) => {
-        if (existing) {
-          this.#updateItem(existing, item, page);
-          return existing;
-        }
-        return this.#createItem(item, page);
-      },
-    );
-  }
-
-  #buildRange(page, total, siblings) {
-    const items = [];
-
-    // Prev button
-    items.push({ key: 'prev', type: 'prev', value: page - 1 });
-
-    // Always show first
-    items.push({ key: 'page-1', type: 'page', value: 1 });
-
-    const start = Math.max(2, page - siblings);
-    const end = Math.min(total - 1, page + siblings);
-
-    // Left ellipsis
-    if (start > 2) {
-      items.push({ key: 'ellipsis-start', type: 'ellipsis' });
-    }
-
-    // Sibling pages
-    for (let i = start; i <= end; i++) {
-      items.push({ key: `page-${i}`, type: 'page', value: i });
-    }
-
-    // Right ellipsis
-    if (end < total - 1) {
-      items.push({ key: 'ellipsis-end', type: 'ellipsis' });
-    }
-
-    // Always show last (if more than 1 page)
-    if (total > 1) {
-      items.push({ key: `page-${total}`, type: 'page', value: total });
-    }
-
-    // Next button
-    items.push({ key: 'next', type: 'next', value: page + 1 });
-
-    return items;
-  }
-
-  #createItem(item, page) {
-    if (item.type === 'ellipsis') {
-      const span = document.createElement('span');
-      span.setAttribute('data-ellipsis', '');
-      span.textContent = '\u2026';
-      return span;
-    }
-
-    const btn = document.createElement('button');
-    btn.setAttribute('type', 'button');
-
-    if (item.type === 'prev') {
-      btn.setAttribute('data-prev', '');
-      btn.setAttribute('aria-label', 'Previous page');
-      btn.textContent = '\u2039';
-    } else if (item.type === 'next') {
-      btn.setAttribute('data-next', '');
-      btn.setAttribute('aria-label', 'Next page');
-      btn.textContent = '\u203A';
-    } else {
-      btn.setAttribute('data-page', '');
-      btn.dataset.value = String(item.value);
-      btn.textContent = String(item.value);
-      btn.setAttribute('aria-label', `Page ${item.value}`);
-    }
-
-    this.#updateItem(btn, item, page);
-    return btn;
-  }
-
-  #updateItem(el, item, page) {
-    if (item.type === 'ellipsis') return;
-
-    if (item.type === 'prev') {
-      if (page <= 1) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
-      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
-    } else if (item.type === 'next') {
-      if (page >= this.total) { el.setAttribute('disabled', ''); el.setAttribute('tabindex', '-1'); }
-      else { el.removeAttribute('disabled'); el.setAttribute('tabindex', '0'); }
-    } else {
-      el.dataset.value = String(item.value);
-      el.textContent = String(item.value);
-      el.setAttribute('aria-label', `Page ${item.value}`);
-      if (item.value === page) {
-        el.setAttribute('data-active', '');
-        el.setAttribute('aria-current', 'page');
-      } else {
-        el.removeAttribute('data-active');
-        el.removeAttribute('aria-current');
-      }
-    }
-  }
-
-  #onClick = (e) => {
-    const btn = e.target.closest('[data-prev], [data-next], [data-page]');
-    if (!btn || btn.hasAttribute('disabled') || !this.#nav.contains(btn)) return;
-
-    let newPage;
-
-    if (btn.hasAttribute('data-prev')) {
-      newPage = this.page - 1;
-    } else if (btn.hasAttribute('data-next')) {
-      newPage = this.page + 1;
-    } else if (btn.hasAttribute('data-page')) {
-      newPage = Number(btn.dataset.value);
-    }
-
-    if (newPage == null || newPage < 1 || newPage > this.total || newPage === this.page) return;
+import { defineIfFree } from '../../core/register.js';
+import { UIPagination } from './class.js';
 
-    this.page = newPage;
-    this.dispatchEvent(new CustomEvent('page-change', {
-      bubbles: true,
-      detail: { page: this.page },
-    }));
-  };
-}
-customElements.define('pagination-ui', UIPagination);
+defineIfFree('pagination-ui', UIPagination);
 
 export { UIPagination };

package/components/pane/class.js

@@ -0,0 +1,186 @@
+/**
+ * Non-side-effect class export for `<pane-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/pane`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <pane-ui> — Collapsible, resizable panel.
+ *
+ * Structure:
+ *   <pane-ui>
+ *     <header>Pane Title</header>
+ *     <section>
+ *       <header>Section Title</header>
+ *       <div data-col>
+ *         ...content...
+ *       </div>
+ *     </section>
+ *     <section>...</section>
+ *     <footer>...</footer>
+ *   </pane-ui>
+ *
+ * Attributes:
+ *   collapsed    — boolean, hides content and footer
+ *   resizable    — boolean, enables drag-to-resize (width)
+ *   min-width    — minimum width when resizing (default: 200)
+ *   max-width    — maximum width when resizing (default: 600)
+ *   side         — 'leading' | 'trailing' | '' (default). When set, the
+ *                  pane is treated as a horizontal sibling: the default
+ *                  four-sided border is suppressed, only the inner-edge
+ *                  border is drawn, the resize grabber moves to that
+ *                  inner edge, and the resize-drag direction flips so
+ *                  trailing panes grow when dragged leftward.
+ *
+ * JS API:
+ *   pane.collapsed = true/false
+ *   pane.toggle()
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPane extends UIElement {
+  static properties = {
+    collapsed:  { type: Boolean, default: false, reflect: true },
+    resizable:  { type: Boolean, default: false, reflect: true },
+    minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
+    maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
+    side:       { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #resizeEl = null;
+  #dragging = false;
+  #startX = 0;
+  #startW = 0;
+  #pointerId = null;
+  #prevDocCursor = '';
+  #bound = false;
+
+  connected() {
+    if (!this.#bound) {
+      this.#bound = true;
+
+      // Click on pane header toggles collapse
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKey);
+    }
+
+    // Stamp resize handle if resizable and not present
+    if (this.resizable && !this.querySelector('[slot="resize"]')) {
+      this.#resizeEl = document.createElement('div');
+      this.#resizeEl.setAttribute('slot', 'resize');
+      this.appendChild(this.#resizeEl);
+    }
+
+    if (this.#resizeEl || this.resizable) {
+      this.#resizeEl = this.#resizeEl || this.querySelector('[slot="resize"]');
+      this.#resizeEl?.addEventListener('pointerdown', this.#onResizeDown);
+    }
+  }
+
+  render() {
+    const header = this.querySelector(':scope > header');
+    if (header) {
+      header.setAttribute('role', 'button');
+      header.setAttribute('tabindex', '0');
+      header.setAttribute('aria-expanded', String(!this.collapsed));
+
+      // Stamp chevron icon if not present
+      if (!header.querySelector('[slot="chevron"]')) {
+        const chevron = document.createElement('icon-ui');
+        chevron.setAttribute('slot', 'chevron');
+        chevron.setAttribute('name', 'caret-right');
+        header.append(chevron);
+      }
+    }
+  }
+
+  toggle() {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new Event('toggle', { bubbles: true }));
+  }
+
+  #onClick = (e) => {
+    const header = this.querySelector(':scope > header');
+    if (header && (e.target === header || header.contains(e.target))) {
+      this.toggle();
+    }
+  };
+
+  #onKey = (e) => {
+    if (e.target !== this.querySelector(':scope > header')) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggle();
+    }
+  };
+
+  // ── Resize ──
+  //
+  // Pointer capture + handle-level listeners (not document-level): keeps
+  // pointer events flowing to the grabber even when the cursor races past
+  // it, and works under touch. Cursor is locked at the documentElement
+  // level so it stays `col-resize` across the whole viewport during drag,
+  // not just over the 4px handle. CSS bypasses any width transition while
+  // `[data-resizing]` is set, so resizes track the pointer 1:1.
+
+  #onResizeDown = (e) => {
+    if (!e.isPrimary) return;
+    e.preventDefault();
+    this.#dragging = true;
+    this.#startX = e.clientX;
+    this.#startW = this.getBoundingClientRect().width;
+    this.#pointerId = e.pointerId;
+    this.setAttribute('data-resizing', '');
+
+    try { this.#resizeEl.setPointerCapture(e.pointerId); } catch {}
+    this.#resizeEl.addEventListener('pointermove', this.#onResizeMove);
+    this.#resizeEl.addEventListener('pointerup', this.#onResizeUp, { once: true });
+    this.#resizeEl.addEventListener('pointercancel', this.#onResizeUp, { once: true });
+
+    this.#prevDocCursor = document.documentElement.style.cursor;
+    document.documentElement.style.cursor = 'col-resize';
+  };
+
+  #onResizeMove = (e) => {
+    if (!this.#dragging) return;
+    // For a trailing pane the grabber sits on the LEFT edge but the pane
+    // is anchored on the RIGHT side of its flex row — dragging leftward
+    // should GROW the pane (grabber moves further left = more width),
+    // not shrink it. Negate dx in that case.
+    const sign = this.side === 'trailing' ? -1 : 1;
+    const dx = (e.clientX - this.#startX) * sign;
+    const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
+    this.style.width = `${w}px`;
+  };
+
+  #onResizeUp = () => {
+    if (!this.#dragging) return;
+    this.#dragging = false;
+    this.removeAttribute('data-resizing');
+    try { this.#resizeEl?.releasePointerCapture(this.#pointerId); } catch {}
+    this.#pointerId = null;
+    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
+    document.documentElement.style.cursor = this.#prevDocCursor;
+  };
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#resizeEl?.removeEventListener('pointerdown', this.#onResizeDown);
+    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
+    if (this.#dragging) {
+      document.documentElement.style.cursor = this.#prevDocCursor;
+    }
+    this.#bound = false;
+  }
+}

package/components/pane/pane.a2ui.json

@@ -85,7 +85,18 @@
         "name": "idle"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "split-pane",
+        "side-panel",
+        "resizable-panel",
+        "detail-pane",
+        "list-pane",
+        "context-pane",
+        "Panel",
+        "Pane"
+      ]
+    },
     "tag": "pane-ui",
     "tokens": {},
     "traits": [],

package/components/pane/pane.css

@@ -54,6 +54,15 @@
     overflow: hidden;
   }
 
+  /* During an active drag-resize: kill all transitions so pointer-driven
+     width updates track 1:1 instead of interpolating through a consumer-
+     declared width transition (e.g. editor-shell's collapse animation).
+     Mirrors the admin-sidebar pattern. */
+  :scope[data-resizing] {
+    user-select: none;
+    transition: none;
+  }
+
   /* Side-aware border treatment.
      `leading`  — pane sits at the leading edge of a horizontal row, so
                   the only visual separator it needs is on its trailing
@@ -187,6 +196,7 @@
     cursor: col-resize;
     background: transparent;
     transition: background var(--pane-duration) var(--pane-easing);
+    touch-action: none;
     z-index: 1;
   }
 

package/components/pane/pane.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<pane-ui>` — Collapsible, resizable panel.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/pane
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPane extends UIElement {
+  /** Component property: collapsed. */
+  collapsed: boolean;
+  /** Component property: maxWidth. */
+  maxWidth: number;
+  /** Component property: minWidth. */
+  minWidth: number;
+  /** Component property: resizable. */
+  resizable: boolean;
+  /** Opts a pane into horizontal-sibling chrome: suppresses the default
+four-sided border and moves the resize grabber to the inner edge
+(right edge for `leading`, left edge for `trailing`). Also flips the
+resize-drag direction so `trailing` panes grow when dragged leftward.
+Unset keeps the pane-intrinsic chrome (full border, right-edge
+grabber when resizable).
+ */
+  side: '' | 'leading' | 'trailing';
+}

package/components/pane/pane.js

@@ -1,152 +1,17 @@
 /**
- * <pane-ui> — Collapsible, resizable panel.
+ * `<pane-ui>` — auto-registers the tag on import.
  *
- * Structure:
- *   <pane-ui>
- *     <header>Pane Title</header>
- *     <section>
- *       <header>Section Title</header>
- *       <div data-col>
- *         ...content...
- *       </div>
- *     </section>
- *     <section>...</section>
- *     <footer>...</footer>
- *   </pane-ui>
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Attributes:
- *   collapsed    — boolean, hides content and footer
- *   resizable    — boolean, enables drag-to-resize (width)
- *   min-width    — minimum width when resizing (default: 200)
- *   max-width    — maximum width when resizing (default: 600)
- *   side         — 'leading' | 'trailing' | '' (default). When set, the
- *                  pane is treated as a horizontal sibling: the default
- *                  four-sided border is suppressed, only the inner-edge
- *                  border is drawn, the resize grabber moves to that
- *                  inner edge, and the resize-drag direction flips so
- *                  trailing panes grow when dragged leftward.
+ *   import { UIPane } from '@adia-ai/web-components/components/pane/class';
  *
- * JS API:
- *   pane.collapsed = true/false
- *   pane.toggle()
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UIPane } from './class.js';
 
-class UIPane extends UIElement {
-  static properties = {
-    collapsed:  { type: Boolean, default: false, reflect: true },
-    resizable:  { type: Boolean, default: false, reflect: true },
-    minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
-    maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
-    side:       { type: String,  default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #resizeEl = null;
-  #dragging = false;
-  #startX = 0;
-  #startW = 0;
-  #bound = false;
-
-  connected() {
-    if (!this.#bound) {
-      this.#bound = true;
-
-      // Click on pane header toggles collapse
-      this.addEventListener('click', this.#onClick);
-      this.addEventListener('keydown', this.#onKey);
-    }
-
-    // Stamp resize handle if resizable and not present
-    if (this.resizable && !this.querySelector('[slot="resize"]')) {
-      this.#resizeEl = document.createElement('div');
-      this.#resizeEl.setAttribute('slot', 'resize');
-      this.appendChild(this.#resizeEl);
-    }
-
-    if (this.#resizeEl || this.resizable) {
-      this.#resizeEl = this.#resizeEl || this.querySelector('[slot="resize"]');
-      this.#resizeEl?.addEventListener('pointerdown', this.#onResizeDown);
-    }
-  }
-
-  render() {
-    const header = this.querySelector(':scope > header');
-    if (header) {
-      header.setAttribute('role', 'button');
-      header.setAttribute('tabindex', '0');
-      header.setAttribute('aria-expanded', String(!this.collapsed));
-
-      // Stamp chevron icon if not present
-      if (!header.querySelector('[slot="chevron"]')) {
-        const chevron = document.createElement('icon-ui');
-        chevron.setAttribute('slot', 'chevron');
-        chevron.setAttribute('name', 'caret-right');
-        header.append(chevron);
-      }
-    }
-  }
-
-  toggle() {
-    this.collapsed = !this.collapsed;
-    this.dispatchEvent(new Event('toggle', { bubbles: true }));
-  }
-
-  #onClick = (e) => {
-    const header = this.querySelector(':scope > header');
-    if (header && (e.target === header || header.contains(e.target))) {
-      this.toggle();
-    }
-  };
-
-  #onKey = (e) => {
-    if (e.target !== this.querySelector(':scope > header')) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.toggle();
-    }
-  };
-
-  // ── Resize ──
-
-  #onResizeDown = (e) => {
-    e.preventDefault();
-    this.#dragging = true;
-    this.#startX = e.clientX;
-    this.#startW = this.getBoundingClientRect().width;
-    this.setAttribute('data-resizing', '');
-    document.addEventListener('pointermove', this.#onResizeMove);
-    document.addEventListener('pointerup', this.#onResizeUp, { once: true });
-  };
-
-  #onResizeMove = (e) => {
-    if (!this.#dragging) return;
-    // For a trailing pane the grabber sits on the LEFT edge but the pane
-    // is anchored on the RIGHT side of its flex row — dragging leftward
-    // should GROW the pane (grabber moves further left = more width),
-    // not shrink it. Negate dx in that case.
-    const sign = this.side === 'trailing' ? -1 : 1;
-    const dx = (e.clientX - this.#startX) * sign;
-    const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
-    this.style.width = `${w}px`;
-  };
-
-  #onResizeUp = () => {
-    this.#dragging = false;
-    this.removeAttribute('data-resizing');
-    document.removeEventListener('pointermove', this.#onResizeMove);
-  };
-
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-    this.#resizeEl?.removeEventListener('pointerdown', this.#onResizeDown);
-    document.removeEventListener('pointermove', this.#onResizeMove);
-    this.#bound = false;
-  }
-}
-customElements.define('pane-ui', UIPane);
+defineIfFree('pane-ui', UIPane);
 
 export { UIPane };