@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/components/xsurfaceregion.js

@@ -0,0 +1,285 @@
+class XSurfaceRegion extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      'surface-id',
+      'label',
+      'kind',
+      'open',
+      'active',
+      'hidden',
+      'mode',
+      'placement',
+      'initial-x',
+      'initial-y',
+      'initial-width',
+      'initial-height',
+      'role'
+    ];
+  }
+
+  static get xtendComponentContract() {
+    return {
+      schema: 'xtend.component.contract.v2',
+      tag: 'x-surface-region',
+      maturity: 'experimental',
+      source: {
+        strategy: 'xtend.legacy-esm.component-source',
+        state: 'js-runtime',
+        sourcePath: 'components/xsurfaceregion.js'
+      },
+      runtime: {
+        format: 'esm',
+        artifact: 'components/xsurfaceregion.js',
+        declaration: 'components/xsurfaceregion.d.ts',
+        localOnly: true,
+        cdnAllowed: false
+      },
+      rmt: {
+        adapter: 'xtend.component',
+        surfaceContract: 'xtend.surface.record.v1',
+        kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'
+      },
+      fabric: {
+        api: '@xtend-fabric',
+        defaultLane: 'visible',
+        diagnosticsLane: 'diagnostics'
+      }
+    };
+  }
+
+  static get xtendRmtMetadata() {
+    return {
+      schema: 'xtend.rmt.component-contract.v1',
+      adapter: 'xtend.component',
+      tag: 'x-surface-region',
+      componentRecordKind: 'custom_element',
+      templateMode: 'dom_descriptor',
+      eventBindingMode: 'dom-event-to-rmt-command',
+      schedules: ['surface.visible.render', 'surface.user-blocking.open', 'surface.transition.layout', 'surface.diagnostics.snapshot'],
+      hydration: { policy: 'visible', lane: 'visible' },
+      surface: {
+        schema: 'xtend.surface.record.v1',
+        type: 'region',
+        kinds: ['root', 'workspace', 'page', 'card', 'list', 'region', 'overlay-host'],
+        controller: 'xtend.surface.controller.v1'
+      },
+      kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'
+    };
+  }
+
+  static get xtendScaffoldPerformanceProfile() {
+    return {
+      schema: 'xtend.performance.component-profile.v1',
+      budgetClass: 'surface-content',
+      lane: 'surface.region.visible',
+      hydrationPolicy: 'visible',
+      measurements: ['surface-record-sync', 'bounds-application', 'command-dispatch']
+    };
+  }
+
+  constructor() {
+    super();
+    this.surfaceManager = null;
+    this._applyingSnapshot = false;
+    this._onPointerDown = this.focusRegion.bind(this);
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --surface-region-x: 0px;
+          --surface-region-y: 0px;
+          --surface-region-width: auto;
+          --surface-region-height: auto;
+          --surface-region-z: 0;
+          display: block;
+          position: relative;
+          min-width: 0;
+          min-height: 0;
+          z-index: var(--surface-region-z);
+          box-sizing: border-box;
+        }
+        :host([mode="floating"]) {
+          position: absolute;
+          left: var(--surface-region-x);
+          top: var(--surface-region-y);
+          width: var(--surface-region-width);
+          height: var(--surface-region-height);
+        }
+        :host([hidden]),
+        :host(:not([open])) {
+          display: none;
+        }
+        :host([active]) {
+          outline: var(--surface-region-active-outline, 0);
+        }
+        .region {
+          box-sizing: border-box;
+          min-width: 0;
+          min-height: 0;
+          width: 100%;
+          height: 100%;
+        }
+        :host(:not([mode="floating"])) .region {
+          width: auto;
+          height: auto;
+        }
+      </style>
+      <section class="region" part="region" tabindex="-1">
+        <slot></slot>
+      </section>
+    `;
+    this._region = this.shadowRoot.querySelector('.region');
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute('surface-id') && this.id) this.setAttribute('surface-id', this.id);
+    if (!this.hasAttribute('kind')) this.setAttribute('kind', this.getAttribute('data-surface-kind') || 'region');
+    if (!this.hasAttribute('open') && !this.hasAttribute('hidden')) this.setAttribute('open', '');
+    this._syncA11y();
+    this._applyInitialBounds();
+    this.addEventListener('pointerdown', this._onPointerDown);
+    this.surfaceManager = this.closest('x-surface-manager');
+    if (this.surfaceManager && typeof this.surfaceManager.registerSurface === 'function') {
+      this.surfaceManager.registerSurface(this);
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('pointerdown', this._onPointerDown);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === 'label' || name === 'surface-id' || name === 'role') this._syncA11y();
+    if (name.startsWith('initial-')) this._applyInitialBounds();
+    if (this._applyingSnapshot || !this.isConnected) return;
+    if (name === 'open') {
+      this.hasAttribute('open') ? this.openRegion() : this.closeRegion('attribute');
+    }
+  }
+
+  get surfaceId() {
+    return this.getAttribute('surface-id') || this.id || 'surface.region';
+  }
+
+  get kind() {
+    return this.getAttribute('kind') || this.getAttribute('data-surface-kind') || 'region';
+  }
+
+  get open() {
+    return this.hasAttribute('open') && !this.hasAttribute('hidden');
+  }
+
+  set open(value) {
+    this.toggleAttribute('open', Boolean(value));
+    this.toggleAttribute('hidden', !value);
+  }
+
+  toSurfaceRecord(managerId) {
+    const mode = this.getAttribute('mode') || 'region';
+    return {
+      schema: 'xtend.surface.record.v1',
+      id: this.surfaceId,
+      type: 'region',
+      kind: this.kind,
+      manager: managerId,
+      label: this.getAttribute('label') || this.surfaceId,
+      placement: this.getAttribute('placement') || null,
+      mode,
+      initialBounds: this._readBounds(),
+      capabilities: ['open', 'focus', 'close', 'update', 'restore', 'snapshot'],
+      defaultOpen: this.open,
+      modal: false,
+      metadata: {
+        source: 'x-surface-region',
+        surfaceKind: this.kind
+      }
+    };
+  }
+
+  applySurfaceSnapshot(record) {
+    this._applyingSnapshot = true;
+    const bounds = record.bounds || this._readBounds();
+    this.style.setProperty('--surface-region-x', `${Number(bounds.x) || 0}px`);
+    this.style.setProperty('--surface-region-y', `${Number(bounds.y) || 0}px`);
+    this.style.setProperty('--surface-region-width', `${Number(bounds.width) || 640}px`);
+    this.style.setProperty('--surface-region-height', `${Number(bounds.height) || 360}px`);
+    this.style.setProperty('--surface-region-z', String(record.zIndex || 0));
+    this.toggleAttribute('open', record.status !== 'closed');
+    this.toggleAttribute('hidden', record.status === 'closed');
+    this.toggleAttribute('active', Boolean(record.active));
+    if (record.kind) this.setAttribute('kind', record.kind);
+    if (record.mode) this.setAttribute('mode', record.mode);
+    if (record.placement) this.setAttribute('placement', record.placement);
+    this._syncA11y(record);
+    this._applyingSnapshot = false;
+  }
+
+  openRegion() {
+    return this._command('open');
+  }
+
+  closeRegion(reason) {
+    return this._command('close', { reason });
+  }
+
+  focusRegion() {
+    return this._command('focus');
+  }
+
+  restoreRegion() {
+    return this._command('restore');
+  }
+
+  updateRegion(payload = {}) {
+    return this._command('update', payload);
+  }
+
+  _readBounds() {
+    return {
+      x: Number(this.getAttribute('initial-x') || 0),
+      y: Number(this.getAttribute('initial-y') || 0),
+      width: Number(this.getAttribute('initial-width') || 640),
+      height: Number(this.getAttribute('initial-height') || 360),
+      minWidth: 160,
+      minHeight: 96
+    };
+  }
+
+  _applyInitialBounds() {
+    const bounds = this._readBounds();
+    this.style.setProperty('--surface-region-x', `${bounds.x}px`);
+    this.style.setProperty('--surface-region-y', `${bounds.y}px`);
+    this.style.setProperty('--surface-region-width', `${bounds.width}px`);
+    this.style.setProperty('--surface-region-height', `${bounds.height}px`);
+  }
+
+  _syncA11y(record = null) {
+    if (!this._region) return;
+    const label = this.getAttribute('label') || this.surfaceId;
+    const role = this.getAttribute('role') || (this.kind === 'page' ? 'main' : 'region');
+    this._region.setAttribute('role', role);
+    this._region.setAttribute('aria-label', label);
+    this._region.setAttribute('aria-hidden', record && record.status === 'closed' || this.hasAttribute('hidden') ? 'true' : 'false');
+  }
+
+  _command(command, payload = {}) {
+    const detail = {
+      surfaceId: this.surfaceId,
+      command,
+      payload
+    };
+    this.dispatchEvent(new CustomEvent('surface-region-command', {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+    return detail;
+  }
+}
+
+if (!customElements.get('x-surface-region')) {
+  customElements.define('x-surface-region', XSurfaceRegion);
+}
+
+export { XSurfaceRegion };

package/components/xsurfacewindow.js

@@ -246,7 +246,8 @@ class XSurfaceWindow extends HTMLElement {
         .content {
           flex: 1;
           min-height: 0;
-          overflow: auto;
+          overflow-y: auto;
+          overflow-x: hidden;
           padding: var(--surface-window-content-padding, 1rem);
         }
         .resize {

package/components/xtooltip.js

@@ -139,7 +139,7 @@ class XTooltip extends HTMLElement {
       escapeBehavior: 'dismiss-visible-tooltip',
       outsideClick: 'anchor-blur-or-hover-leave',
       scrollLock: 'not-applicable',
-      portalStrategy: 'anchor-local-layer',
+      portalStrategy: 'viewport-fixed-layer',
       events: ['tooltip-opened', 'tooltip-closed'],
       commands: ['show', 'hide', 'toggle', 'snapshot'],
       stateKey: 'xtooltip-open-<id>',
@@ -157,7 +157,8 @@ class XTooltip extends HTMLElement {
       overlaySemantics: {
         escapeDismissesVisibleTooltip: true,
         describedbyRequired: true,
-        anchorLocalPortal: true
+        anchorLocalPortal: false,
+        viewportFixedLayer: true
       }
     };
   }
@@ -168,12 +169,14 @@ class XTooltip extends HTMLElement {
     this._open = false;
     this._showTimer = 0;
     this._hideTimer = 0;
+    this._positionFrame = 0;
     this._unsubscribeState = null;
     this._synchronizingAttribute = false;
     this._onAnchorEnter = () => this.show({ source: 'anchor' });
     this._onAnchorLeave = () => this.hide({ source: 'anchor' });
     this._onAnchorFocus = () => this.show({ source: 'focus' });
     this._onAnchorBlur = () => this.hide({ source: 'blur' });
+    this._onViewportChange = () => this._schedulePositionUpdate();
     this._onKeyDown = this._handleKeyDown.bind(this);
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
@@ -201,9 +204,15 @@ class XTooltip extends HTMLElement {
           display: none;
         }
         .tooltip {
-          position: absolute;
+          position: fixed;
+          top: var(--xtooltip-top, -9999px);
+          left: var(--xtooltip-left, -9999px);
+          right: auto;
+          bottom: auto;
           z-index: var(--xtend-overlay-z);
-          max-width: min(18rem, 80vw);
+          box-sizing: border-box;
+          width: max-content;
+          max-width: min(18rem, calc(100vw - 1rem));
           padding: 0.5rem 0.625rem;
           border-radius: var(--xtooltip-radius);
           background: var(--xtooltip-bg);
@@ -221,41 +230,30 @@ class XTooltip extends HTMLElement {
           pointer-events: auto;
         }
         :host([placement="bottom"]) .tooltip {
-          top: calc(100% + 0.5rem);
-          left: 50%;
-          transform: translate(-50%, 2px);
+          transform: translateY(2px);
         }
         :host([placement="bottom"][open]) .tooltip {
-          transform: translate(-50%, 0);
+          transform: translateY(0);
         }
         :host([placement="top"]) .tooltip,
         .tooltip {
-          bottom: calc(100% + 0.5rem);
-          left: 50%;
-          transform: translate(-50%, 2px);
+          transform: translateY(-2px);
         }
         :host([placement="top"][open]) .tooltip,
         :host([open]) .tooltip {
-          transform: translate(-50%, 0);
+          transform: translateY(0);
         }
         :host([placement="left"]) .tooltip {
-          right: calc(100% + 0.5rem);
-          top: 50%;
-          bottom: auto;
-          left: auto;
-          transform: translate(-2px, -50%);
+          transform: translateX(-2px);
         }
         :host([placement="left"][open]) .tooltip {
-          transform: translate(0, -50%);
+          transform: translateX(0);
         }
         :host([placement="right"]) .tooltip {
-          left: calc(100% + 0.5rem);
-          top: 50%;
-          bottom: auto;
-          transform: translate(2px, -50%);
+          transform: translateX(2px);
         }
         :host([placement="right"][open]) .tooltip {
-          transform: translate(0, -50%);
+          transform: translateX(0);
         }
         .tooltip:focus-visible {
           outline: 2px solid currentColor;
@@ -310,6 +308,12 @@ class XTooltip extends HTMLElement {
     if (this._unsubscribeState) this._unsubscribeState();
     window.clearTimeout(this._showTimer);
     window.clearTimeout(this._hideTimer);
+    window.removeEventListener('resize', this._onViewportChange);
+    window.removeEventListener('scroll', this._onViewportChange, true);
+    if (this._positionFrame) {
+      window.cancelAnimationFrame(this._positionFrame);
+      this._positionFrame = 0;
+    }
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -323,6 +327,9 @@ class XTooltip extends HTMLElement {
     if (name === 'label') {
       this._tooltip.setAttribute('aria-label', this.label);
     }
+    if (name === 'placement' && this.isConnected && this.open) {
+      this._schedulePositionUpdate();
+    }
   }
 
   get open() {
@@ -383,11 +390,22 @@ class XTooltip extends HTMLElement {
 
   _setOpen(isOpen, source) {
     if (this._open === isOpen) return;
+    if (isOpen) {
+      this._updatePosition();
+    }
     this._open = isOpen;
     this._synchronizingAttribute = true;
     this.toggleAttribute('open', isOpen);
     this._synchronizingAttribute = false;
     this._tooltip.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
+    if (isOpen) {
+      window.addEventListener('resize', this._onViewportChange);
+      window.addEventListener('scroll', this._onViewportChange, true);
+      this._schedulePositionUpdate();
+    } else {
+      window.removeEventListener('resize', this._onViewportChange);
+      window.removeEventListener('scroll', this._onViewportChange, true);
+    }
     xstate.set(`xtooltip-open-${this.id}`, isOpen);
     this.dispatchEvent(new CustomEvent(isOpen ? 'tooltip-opened' : 'tooltip-closed', {
       detail: { id: this.id, open: isOpen, source, placement: this.getAttribute('placement') || 'top' },
@@ -406,6 +424,9 @@ class XTooltip extends HTMLElement {
     this._anchor.addEventListener('focus', this._onAnchorFocus);
     this._anchor.addEventListener('blur', this._onAnchorBlur);
     this._anchor.setAttribute('aria-describedby', this._tooltip.id);
+    if (this.open) {
+      this._schedulePositionUpdate();
+    }
   }
 
   _unbindAnchor() {
@@ -425,6 +446,51 @@ class XTooltip extends HTMLElement {
       this.hide({ source: 'escape', immediate: true });
     }
   }
+
+  _schedulePositionUpdate() {
+    if (!this.open || this._positionFrame) return;
+    this._positionFrame = window.requestAnimationFrame(() => {
+      this._positionFrame = 0;
+      this._updatePosition();
+    });
+  }
+
+  _updatePosition() {
+    const anchor = this._anchor || this.shadowRoot.querySelector('.trigger');
+    if (!anchor || !this._tooltip) return;
+
+    const anchorRect = anchor.getBoundingClientRect();
+    if (!anchorRect.width && !anchorRect.height) return;
+
+    const tooltipRect = this._tooltip.getBoundingClientRect();
+    const width = tooltipRect.width || this._tooltip.offsetWidth;
+    const height = tooltipRect.height || this._tooltip.offsetHeight;
+    if (!width || !height) return;
+
+    const gap = 8;
+    const margin = 8;
+    const placement = this.getAttribute('placement') || 'top';
+    let left = anchorRect.left + (anchorRect.width / 2) - (width / 2);
+    let top = anchorRect.top - height - gap;
+
+    if (placement === 'bottom') {
+      top = anchorRect.bottom + gap;
+    } else if (placement === 'left') {
+      left = anchorRect.left - width - gap;
+      top = anchorRect.top + (anchorRect.height / 2) - (height / 2);
+    } else if (placement === 'right') {
+      left = anchorRect.right + gap;
+      top = anchorRect.top + (anchorRect.height / 2) - (height / 2);
+    }
+
+    const maxLeft = Math.max(margin, window.innerWidth - width - margin);
+    const maxTop = Math.max(margin, window.innerHeight - height - margin);
+    const clampedLeft = Math.min(Math.max(left, margin), maxLeft);
+    const clampedTop = Math.min(Math.max(top, margin), maxTop);
+
+    this._tooltip.style.setProperty('--xtooltip-left', `${Math.round(clampedLeft)}px`);
+    this._tooltip.style.setProperty('--xtooltip-top', `${Math.round(clampedTop)}px`);
+  }
 }
 
 if (!customElements.get('x-tooltip')) {