@arclux/arc-ui 1.0.0

package/src/feedback/command-palette.js

@@ -0,0 +1,346 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './command-item.js';
+import '../content/icon.js';
+
+export class ArcCommandPalette extends LitElement {
+  static properties = {
+    open:          { type: Boolean, reflect: true },
+    placeholder:   { type: String },
+    _query:        { state: true },
+    _focusedIndex: { state: true },
+    _items:        { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: contents; }
+
+      .palette__backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 300;
+        background: var(--overlay-backdrop);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity var(--transition-base),
+          visibility var(--transition-base);
+      }
+
+      :host([open]) .palette__backdrop {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .palette__dialog {
+        position: fixed;
+        z-index: 301;
+        top: 20%;
+        left: 50%;
+        transform: translateX(-50%) scale(0.95);
+        width: 90%;
+        max-width: 520px;
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--shadow-overlay);
+        overflow: hidden;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity var(--transition-base),
+          visibility var(--transition-base),
+          transform var(--transition-base);
+      }
+
+      :host([open]) .palette__dialog {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(-50%) scale(1);
+      }
+
+      .palette__search {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        padding: var(--space-md) var(--space-lg);
+        border-bottom: 1px solid var(--border-default);
+      }
+
+      .palette__search-icon {
+        flex-shrink: 0;
+        color: var(--text-muted);
+      }
+
+      .palette__input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        outline: none;
+        font-family: var(--font-body);
+        font-size: var(--text-md);
+        color: var(--text-primary);
+        caret-color: var(--accent-primary);
+      }
+
+      .palette__input::placeholder {
+        color: var(--text-muted);
+      }
+
+      .palette__results {
+        max-height: 300px;
+        overflow-y: auto;
+        padding: var(--space-xs) 0;
+      }
+
+      .palette__results:empty::after {
+        content: 'No results found';
+        display: block;
+        padding: var(--space-lg);
+        text-align: center;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .palette__item {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        width: 100%;
+        padding: var(--space-sm) var(--space-lg);
+        border: none;
+        background: transparent;
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        cursor: pointer;
+        text-align: left;
+        transition: background var(--transition-fast), color var(--transition-fast);
+        outline: none;
+      }
+
+      .palette__item:hover,
+      .palette__item.is-focused {
+        background: rgba(var(--accent-primary-rgb), 0.08);
+        color: var(--text-primary);
+      }
+
+      .palette__item-icon {
+        flex-shrink: 0;
+        color: var(--text-muted);
+      }
+
+      .palette__item-label {
+        flex: 1;
+      }
+
+      .palette__item-shortcut {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+        opacity: 0.6;
+      }
+
+      .palette__footer {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        padding: var(--space-sm) var(--space-lg);
+        border-top: 1px solid var(--border-default);
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+      }
+
+      .palette__footer kbd {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for kbd badge */
+        background: var(--bg-hover);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+      }
+
+      .palette__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.placeholder = 'Type a command...';
+    this._query = '';
+    this._focusedIndex = 0;
+    this._items = [];
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+
+  _onSlotChange(e) {
+    this._items = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-COMMAND-ITEM');
+  }
+
+  get _filteredItems() {
+    if (!this._query) return this._items;
+    const q = this._query.toLowerCase();
+    return this._items.filter(item =>
+      (item.label || '').toLowerCase().includes(q)
+    );
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        this._query = '';
+        this._focusedIndex = 0;
+        document.addEventListener('keydown', this._onKeyDown);
+        document.body.style.overflow = 'hidden';
+        this.updateComplete.then(() => {
+          const input = this.shadowRoot.querySelector('.palette__input');
+          if (input) input.focus();
+        });
+      } else {
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.body.style.overflow = '';
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._onKeyDown);
+    document.body.style.overflow = '';
+  }
+
+  _onKeyDown(e) {
+    if (!this.open) return;
+
+    const filtered = this._filteredItems;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this._focusedIndex = this._focusedIndex < filtered.length - 1
+          ? this._focusedIndex + 1
+          : 0;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        this._focusedIndex = this._focusedIndex > 0
+          ? this._focusedIndex - 1
+          : filtered.length - 1;
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filtered.length > 0 && this._focusedIndex >= 0) {
+          this._selectItem(filtered[this._focusedIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        this._close();
+        break;
+    }
+  }
+
+  _onInput(e) {
+    this._query = e.target.value;
+    this._focusedIndex = 0;
+  }
+
+  _selectItem(item) {
+    this.dispatchEvent(new CustomEvent('arc-select', {
+      detail: { item: { label: item.label, shortcut: item.shortcut } },
+      bubbles: true,
+      composed: true,
+    }));
+    this._close();
+  }
+
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _backdropClick() {
+    this._close();
+  }
+
+  render() {
+    const filtered = this._filteredItems;
+
+    return html`
+      <div class="palette__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="palette__backdrop" @click=${this._backdropClick} part="backdrop"></div>
+      <div
+        class="palette__dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        part="dialog"
+      >
+        <div class="palette__search" part="search">
+          <svg class="palette__search-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M11.5 7a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"/>
+          </svg>
+          <input
+            class="palette__input"
+            type="text"
+            .value=${this._query}
+            @input=${this._onInput}
+            placeholder=${this.placeholder}
+            aria-label="Search commands"
+            autocomplete="off"
+            spellcheck="false"
+            part="input"
+          />
+        </div>
+        <div class="palette__results" role="listbox" part="results">
+          ${filtered.map((item, i) => html`
+            <button
+              class="palette__item ${i === this._focusedIndex ? 'is-focused' : ''}"
+              role="option"
+              aria-selected=${i === this._focusedIndex ? 'true' : 'false'}
+              tabindex="-1"
+              @click=${() => this._selectItem(item)}
+              @mouseenter=${() => { this._focusedIndex = i; }}
+              part="item"
+            >
+              ${item.icon ? html`<arc-icon name=${item.icon} size="16" class="palette__item-icon" aria-hidden="true"></arc-icon>` : ''}
+              <span class="palette__item-label">${item.label || ''}</span>
+              ${item.shortcut ? html`<span class="palette__item-shortcut">${item.shortcut}</span>` : ''}
+            </button>
+          `)}
+        </div>
+        <div class="palette__footer" part="footer">
+          <span><kbd>↑↓</kbd> navigate</span>
+          <span><kbd>↵</kbd> select</span>
+          <span><kbd>esc</kbd> close</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-command-palette', ArcCommandPalette);

package/src/feedback/context-menu.js

@@ -0,0 +1,299 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import '../shared/menu-item.js';
+import '../shared/menu-divider.js';
+import '../content/icon.js';
+
+export class ArcContextMenu extends LitElement {
+  static properties = {
+    open:           { type: Boolean, reflect: true },
+    _x:             { state: true },
+    _y:             { state: true },
+    _activeIndex:   { state: true },
+    _children:      { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: contents; }
+
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 9998;
+      }
+
+      .menu {
+        position: fixed;
+        z-index: 9999;
+        min-width: 180px;
+        max-width: 280px;
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-overlay);
+        padding: var(--space-xs) 0;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        animation: menu-in 100ms ease-out;
+        outline: none;
+      }
+
+      @keyframes menu-in {
+        from { opacity: 0; transform: scale(0.95); }
+        to { opacity: 1; transform: scale(1); }
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        padding: var(--touch-pad) var(--space-md);
+        min-height: var(--touch-min);
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: background var(--transition-fast), color var(--transition-fast);
+        border: none;
+        background: none;
+        width: 100%;
+        text-align: left;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: 1.5;
+      }
+
+      .menu-item:hover,
+      .menu-item.active {
+        background: var(--bg-elevated);
+        color: var(--text-primary);
+      }
+
+      .menu-item:focus-visible {
+        outline: none;
+        background: var(--bg-elevated);
+        color: var(--text-primary);
+      }
+
+      .menu-item.disabled {
+        color: var(--text-muted);
+        opacity: 0.5;
+        cursor: default;
+      }
+
+      .menu-item.disabled:hover {
+        background: none;
+        color: var(--text-muted);
+      }
+
+      .item-icon {
+        flex-shrink: 0;
+        width: 16px;
+        text-align: center;
+        font-size: var(--text-sm);
+      }
+
+      .item-label {
+        flex: 1;
+      }
+
+      .item-shortcut {
+        flex-shrink: 0;
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+        font-family: var(--font-mono);
+      }
+
+      .divider {
+        height: 1px;
+        background: var(--border-subtle);
+        margin: var(--space-xs) 0;
+      }
+
+      .slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .menu { animation: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this._x = 0;
+    this._y = 0;
+    this._activeIndex = -1;
+    this._children = [];
+
+    this._handleContextMenu = this._handleContextMenu.bind(this);
+    this._parentRef = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._parentRef = this.parentElement;
+    if (this._parentRef) {
+      this._parentRef.addEventListener('contextmenu', this._handleContextMenu);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._parentRef) {
+      this._parentRef.removeEventListener('contextmenu', this._handleContextMenu);
+      this._parentRef = null;
+    }
+  }
+
+  _onSlotChange(e) {
+    this._children = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-MENU-ITEM' || el.tagName === 'ARC-MENU-DIVIDER');
+  }
+
+  get _menuItems() {
+    return this._children.filter(el => el.tagName === 'ARC-MENU-ITEM' && !el.disabled);
+  }
+
+  get _selectableItems() {
+    return this._menuItems.map((item, i) => ({ item, index: this._children.indexOf(item) }));
+  }
+
+  _handleContextMenu(e) {
+    e.preventDefault();
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const menuWidth = 220;
+    const menuHeight = this._children.length * 32;
+
+    this._x = e.clientX + menuWidth > vw ? vw - menuWidth - 8 : e.clientX;
+    this._y = e.clientY + menuHeight > vh ? vh - menuHeight - 8 : e.clientY;
+    this._activeIndex = -1;
+
+    this.open = true;
+
+    this.dispatchEvent(new CustomEvent('arc-open', {
+      bubbles: true,
+      composed: true,
+    }));
+
+    this.updateComplete.then(() => {
+      this.shadowRoot.querySelector('.menu')?.focus();
+    });
+  }
+
+  _close() {
+    this.open = false;
+    this._activeIndex = -1;
+
+    this.dispatchEvent(new CustomEvent('arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _selectItem(item, index) {
+    if (item.disabled || item.tagName === 'ARC-MENU-DIVIDER') return;
+
+    this.dispatchEvent(new CustomEvent('arc-select', {
+      detail: { item: { label: item.label, shortcut: item.shortcut, icon: item.icon }, index },
+      bubbles: true,
+      composed: true,
+    }));
+
+    this._close();
+  }
+
+  _handleKeydown(e) {
+    const selectable = this._selectableItems;
+    if (selectable.length === 0) return;
+
+    const currentSelectableIdx = selectable.findIndex(s => s.index === this._activeIndex);
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        const next = currentSelectableIdx < selectable.length - 1 ? currentSelectableIdx + 1 : 0;
+        this._activeIndex = selectable[next].index;
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        const prev = currentSelectableIdx > 0 ? currentSelectableIdx - 1 : selectable.length - 1;
+        this._activeIndex = selectable[prev].index;
+        break;
+      }
+      case 'Home': {
+        e.preventDefault();
+        this._activeIndex = selectable[0].index;
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        this._activeIndex = selectable[selectable.length - 1].index;
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        e.preventDefault();
+        if (this._activeIndex >= 0) {
+          this._selectItem(this._children[this._activeIndex], this._activeIndex);
+        }
+        break;
+      }
+      case 'Escape': {
+        e.preventDefault();
+        this._close();
+        break;
+      }
+    }
+  }
+
+  render() {
+    if (!this.open) {
+      return html`
+        <div class="slot-host"><slot @slotchange=${this._onSlotChange}></slot></div>
+        <slot name="content"></slot>
+      `;
+    }
+
+    return html`
+      <div class="slot-host"><slot @slotchange=${this._onSlotChange}></slot></div>
+      <slot name="content"></slot>
+      <div class="backdrop" @click=${this._close}></div>
+      <div
+        class="menu"
+        part="menu"
+        role="menu"
+        tabindex="-1"
+        style="left: ${this._x}px; top: ${this._y}px"
+        @keydown=${this._handleKeydown}
+      >
+        ${this._children.map((child, i) => {
+          if (child.tagName === 'ARC-MENU-DIVIDER') {
+            return html`<div class="divider" role="separator"></div>`;
+          }
+
+          return html`
+            <button
+              class="menu-item ${child.disabled ? 'disabled' : ''} ${i === this._activeIndex ? 'active' : ''}"
+              role="menuitem"
+              ?disabled=${child.disabled}
+              aria-disabled=${child.disabled ? 'true' : 'false'}
+              tabindex="-1"
+              @click=${() => this._selectItem(child, i)}
+              @pointerenter=${() => { this._activeIndex = i; }}
+            >
+              ${child.icon ? html`<arc-icon name=${child.icon} size="16" class="item-icon" aria-hidden="true"></arc-icon>` : ''}
+              <span class="item-label">${child.label}</span>
+              ${child.shortcut ? html`<span class="item-shortcut">${child.shortcut}</span>` : ''}
+            </button>
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-context-menu', ArcContextMenu);