@visitwonders/assembly 0.1.0

package/dist/overlay/popover.js

@@ -0,0 +1,396 @@
+import "./popover.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { hash } from '@ember/helper';
+import { autoUpdate, offset, flip, shift, arrow, computePosition } from '@floating-ui/dom';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+class PopoverTrigger extends Component {
+  get ctx() {
+    return this.args.ctx;
+  }
+  // Modifier to register this element with the parent
+  registerElement = modifier(element => {
+    this.ctx.registerTrigger(element);
+    return () => {
+      // Cleanup handled by parent
+    };
+  });
+  handleClick = event => {
+    if (this.ctx.triggerMode === 'click') {
+      event.preventDefault();
+      this.ctx.togglePopover();
+    }
+  };
+  handleKeyDown = event => {
+    if (this.ctx.triggerMode === 'click' && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      this.ctx.togglePopover();
+    }
+  };
+  handleMouseEnter = () => {
+    if (this.ctx.triggerMode === 'hover') {
+      this.ctx.openPopover();
+    }
+  };
+  handleMouseLeave = () => {
+    if (this.ctx.triggerMode === 'hover') {
+      this.ctx.closePopover();
+    }
+  };
+  handleFocus = () => {
+    if (this.ctx.triggerMode === 'focus') {
+      this.ctx.openPopover();
+    }
+  };
+  handleBlur = event => {
+    if (this.ctx.triggerMode === 'focus') {
+      // Check if focus is moving to the popover content
+      const relatedTarget = event.relatedTarget;
+      const contentElement = this.ctx.contentElement;
+      if (contentElement && relatedTarget && contentElement.contains(relatedTarget)) {
+        // Focus is moving to content, don't close
+        return;
+      }
+      this.ctx.closePopover();
+    }
+  };
+  get ariaExpanded() {
+    return this.ctx.isOpen ? 'true' : 'false';
+  }
+  get ariaControls() {
+    return this.ctx.isOpen ? this.ctx.contentId : undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"popover-trigger\" aria-haspopup=\"dialog\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.ariaControls}} {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}} {{on \"mouseenter\" this.handleMouseEnter}} {{on \"mouseleave\" this.handleMouseLeave}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{this.registerElement}} data-test-popover-trigger ...attributes>\n  {{yield}}\n</button>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+class PopoverContent extends Component {
+  arrowElement = null;
+  registerArrow = modifier(element => {
+    this.arrowElement = element;
+    return () => {
+      this.arrowElement = null;
+    };
+  });
+  get destinationElement() {
+    return document.body;
+  }
+  get ctx() {
+    return this.args.ctx;
+  }
+  get side() {
+    return this.args.side ?? 'bottom';
+  }
+  get align() {
+    return this.args.align ?? 'center';
+  }
+  get sideOffset() {
+    return this.args.sideOffset ?? 8;
+  }
+  get alignOffset() {
+    return this.args.alignOffset ?? 0;
+  }
+  get avoidCollisions() {
+    return this.args.avoidCollisions ?? true;
+  }
+  get collisionPadding() {
+    return this.args.collisionPadding ?? 8;
+  }
+  get animation() {
+    return this.args.animation ?? 'scale';
+  }
+  get showArrow() {
+    return this.args.showArrow ?? false;
+  }
+  get placement() {
+    if (this.align === 'center') {
+      return this.side;
+    }
+    return `${this.side}-${this.align}`;
+  }
+  get offsetOptions() {
+    return {
+      mainAxis: this.sideOffset,
+      crossAxis: this.alignOffset
+    };
+  }
+  get flipOptions() {
+    return this.avoidCollisions ? {
+      padding: this.collisionPadding
+    } : undefined;
+  }
+  get shiftOptions() {
+    return this.avoidCollisions ? {
+      padding: this.collisionPadding
+    } : undefined;
+  }
+  get dataState() {
+    return this.ctx.isOpen ? 'open' : 'closed';
+  }
+  // Custom modifier that applies floating-ui positioning
+  applyPositioning = modifier((element, _positional, named) => {
+    if (!named.trigger) {
+      return;
+    }
+    // Register content element with parent
+    named.onRegister?.(element);
+    const updatePosition = () => {
+      const middleware = [offset(named.offsetOptions), ...(named.flipOptions ? [flip(named.flipOptions)] : []), ...(named.shiftOptions ? [shift(named.shiftOptions)] : []), ...(named.arrowElement ? [arrow({
+        element: named.arrowElement
+      })] : [])];
+      void computePosition(named.trigger, element, {
+        placement: named.placement,
+        middleware
+      }).then(result => {
+        const {
+          x,
+          y,
+          middlewareData,
+          placement
+        } = result;
+        Object.assign(element.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+        // Position the arrow if present
+        if (named.arrowElement && middlewareData.arrow) {
+          const {
+            x: arrowX,
+            y: arrowY
+          } = middlewareData.arrow;
+          const side = placement.split('-')[0];
+          // Position arrow on the opposite side of the popover
+          const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right'
+          }[side];
+          Object.assign(named.arrowElement.style, {
+            left: arrowX != null ? `${arrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: '-5px'
+          });
+          // Update data-side attribute for correct border styling
+          named.arrowElement.setAttribute('data-side', side);
+        }
+      });
+    };
+    const cleanup = autoUpdate(named.trigger, element, updatePosition);
+    return () => {
+      cleanup();
+      named.onRegister?.(null);
+    };
+  });
+  handleMouseEnter = () => {
+    if (this.ctx.triggerMode === 'hover') {
+      this.ctx.openPopover();
+    }
+  };
+  handleMouseLeave = () => {
+    if (this.ctx.triggerMode === 'hover') {
+      this.ctx.closePopover();
+    }
+  };
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.ctx.isOpen}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    <div id={{this.ctx.contentId}} class=\"popover-content\" role=\"dialog\" aria-label={{@aria-label}} aria-labelledby={{@aria-labelledby}} data-state={{this.dataState}} data-side={{this.side}} data-animation={{this.animation}} {{on \"mouseenter\" this.handleMouseEnter}} {{on \"mouseleave\" this.handleMouseLeave}} {{this.applyPositioning trigger=this.ctx.triggerElement placement=this.placement offsetOptions=this.offsetOptions flipOptions=this.flipOptions shiftOptions=this.shiftOptions arrowElement=this.arrowElement onRegister=this.ctx.registerContent}} data-test-popover-content ...attributes>\n      {{yield}}\n      {{#if this.showArrow}}\n        <div class=\"popover-arrow\" data-side={{this.side}} {{this.registerArrow}} data-test-popover-arrow></div>\n      {{/if}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+class PopoverClose extends Component {
+  get ctx() {
+    return this.args.ctx;
+  }
+  handleClick = event => {
+    event.preventDefault();
+    this.ctx.closePopover();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"popover-close\" aria-label=\"Close\" {{on \"click\" this.handleClick}} data-test-popover-close ...attributes>\n  {{#if (has-block)}}\n    {{yield}}\n  {{else}}\n    <span aria-hidden=\"true\">&times;</span>\n  {{/if}}\n</button>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+// Unique ID counter for generating content IDs
+let popoverIdCounter = 0;
+class Popover extends Component {
+  static {
+    g(this.prototype, "_isOpenInternal", [tracked], function () {
+      return undefined;
+    });
+  }
+  #_isOpenInternal = (i(this, "_isOpenInternal"), void 0);
+  // Not tracked - trigger is always rendered before content needs it
+  triggerElement = null;
+  // Unique ID for linking trigger to content via aria-controls
+  contentId = `popover-content-${++popoverIdCounter}`;
+  // Element references for click outside detection
+  rootElement = null;
+  contentElement = null;
+  openTimeout = null;
+  closeTimeout = null;
+  setupEventListeners = modifier(element => {
+    this.rootElement = element;
+    document.addEventListener('click', this.handleClickOutside);
+    document.addEventListener('keydown', this.handleKeyDown);
+    return () => {
+      this.rootElement = null;
+      document.removeEventListener('click', this.handleClickOutside);
+      document.removeEventListener('keydown', this.handleKeyDown);
+      this.clearTimeouts();
+    };
+  });
+  registerTrigger = element => {
+    this.triggerElement = element;
+  };
+  get isOpenInternal() {
+    if (this._isOpenInternal === undefined) {
+      return this.args.defaultOpen ?? false;
+    }
+    return this._isOpenInternal;
+  }
+  set isOpenInternal(value) {
+    this._isOpenInternal = value;
+  }
+  get isControlled() {
+    return this.args.open !== undefined;
+  }
+  get isOpen() {
+    return this.isControlled ? this.args.open : this.isOpenInternal;
+  }
+  get triggerMode() {
+    return this.args.trigger ?? 'click';
+  }
+  get dismissOnClickOutside() {
+    return this.args.dismissOnClickOutside ?? true;
+  }
+  get dismissOnEscape() {
+    return this.args.dismissOnEscape ?? true;
+  }
+  get openDelay() {
+    return this.args.openDelay ?? 0;
+  }
+  get closeDelay() {
+    return this.args.closeDelay ?? 0;
+  }
+  setOpen = value => {
+    if (!this.isControlled) {
+      this.isOpenInternal = value;
+    }
+    this.args.onOpenChange?.(value);
+  };
+  openPopover = () => {
+    this.clearTimeouts();
+    if (this.openDelay > 0 && this.triggerMode === 'hover') {
+      this.openTimeout = setTimeout(() => {
+        this.setOpen(true);
+      }, this.openDelay);
+    } else {
+      this.setOpen(true);
+    }
+  };
+  closePopover = () => {
+    this.clearTimeouts();
+    if (this.closeDelay > 0 && this.triggerMode === 'hover') {
+      this.closeTimeout = setTimeout(() => {
+        this.setOpen(false);
+      }, this.closeDelay);
+    } else {
+      this.setOpen(false);
+    }
+  };
+  togglePopover = () => {
+    if (this.isOpen) {
+      this.closePopover();
+    } else {
+      this.openPopover();
+    }
+  };
+  clearTimeouts() {
+    if (this.openTimeout) {
+      clearTimeout(this.openTimeout);
+      this.openTimeout = null;
+    }
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+      this.closeTimeout = null;
+    }
+  }
+  handleClickOutside = event => {
+    if (!this.isOpen || !this.dismissOnClickOutside) return;
+    const target = event.target;
+    // Check if click is inside the popover root element (includes custom buttons)
+    const isInRoot = this.rootElement?.contains(target);
+    const isInContent = this.contentElement?.contains(target);
+    if (!isInRoot && !isInContent) {
+      this.closePopover();
+    }
+  };
+  handleKeyDown = event => {
+    if (!this.isOpen) return;
+    if (event.key === 'Escape' && this.dismissOnEscape) {
+      event.preventDefault();
+      this.closePopover();
+      // Return focus to trigger
+      this.triggerElement?.focus();
+    }
+  };
+  registerContentElement = element => {
+    this.contentElement = element;
+  };
+  get context() {
+    return {
+      isOpen: this.isOpen,
+      triggerMode: this.triggerMode,
+      triggerElement: this.triggerElement,
+      contentElement: this.contentElement,
+      contentId: this.contentId,
+      openPopover: this.openPopover,
+      closePopover: this.closePopover,
+      togglePopover: this.togglePopover,
+      registerTrigger: this.registerTrigger,
+      registerContent: this.registerContentElement
+    };
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"popover\" {{this.setupEventListeners}} data-test-popover ...attributes>\n  {{yield (hash Trigger=(component PopoverTrigger ctx=this.context) Content=(component PopoverContent ctx=this.context) Close=(component PopoverClose ctx=this.context) isOpen=this.isOpen open=this.openPopover close=this.closePopover toggle=this.togglePopover)}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        PopoverTrigger,
+        PopoverContent,
+        PopoverClose
+      })
+    }), this);
+  }
+}
+
+export { PopoverClose, PopoverContent, PopoverTrigger, Popover as default };
+//# sourceMappingURL=popover.js.map

package/dist/overlay/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/overlay/toast.css

@@ -0,0 +1,300 @@
+/* ===================================
+ * Toast Container
+ * =================================== */
+
+.toast-container {
+  position: fixed;
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-gap, 8px);
+  pointer-events: none;
+  max-width: 420px;
+  width: 100%;
+}
+
+/* Position variants */
+.toast-container[data-position="top-left"] {
+  top: var(--toast-offset, 16px);
+  left: var(--toast-offset, 16px);
+  align-items: flex-start;
+}
+
+.toast-container[data-position="top-center"] {
+  top: var(--toast-offset, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.toast-container[data-position="top-right"] {
+  top: var(--toast-offset, 16px);
+  right: var(--toast-offset, 16px);
+  align-items: flex-end;
+}
+
+.toast-container[data-position="bottom-left"] {
+  bottom: var(--toast-offset, 16px);
+  left: var(--toast-offset, 16px);
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.toast-container[data-position="bottom-center"] {
+  bottom: var(--toast-offset, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.toast-container[data-position="bottom-right"] {
+  bottom: var(--toast-offset, 16px);
+  right: var(--toast-offset, 16px);
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+/* ===================================
+ * Toast Item
+ * =================================== */
+
+.toast-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+  max-width: 100%;
+  min-width: min(300px, 100vw - 32px);
+}
+
+/* ===================================
+ * Toast Icon
+ * =================================== */
+
+.toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+/* Icon colors by tone */
+.toast-item[data-tone="neutral"] .toast-icon {
+  color: var(--color-text-secondary);
+}
+
+.toast-item[data-tone="success"] .toast-icon {
+  color: var(--color-text-success);
+}
+
+.toast-item[data-tone="warning"] .toast-icon {
+  color: var(--color-text-warning);
+}
+
+.toast-item[data-tone="critical"] .toast-icon {
+  color: var(--color-text-critical);
+}
+
+.toast-item[data-tone="info"] .toast-icon {
+  color: var(--color-text-info);
+}
+
+/* ===================================
+ * Toast Content
+ * =================================== */
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-title {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  line-height: var(--line-height-tight);
+  overflow-wrap: break-word;
+}
+
+.toast-description {
+  margin: var(--spacing-1) 0 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+  overflow-wrap: break-word;
+}
+
+/* ===================================
+ * Toast Action Button
+ * =================================== */
+
+.toast-action {
+  flex-shrink: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+}
+
+.toast-action:hover {
+  background: var(--color-bg-primary-subtle);
+}
+
+.toast-action:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ===================================
+ * Toast Close Button
+ * =================================== */
+
+.toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.toast-close:hover {
+  background: var(--color-bg-neutral-subtle);
+  color: var(--color-text);
+}
+
+.toast-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ===================================
+ * Animations
+ * =================================== */
+
+/* Enter animation */
+@keyframes toast-enter-right {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toast-enter-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toast-enter-center {
+  from {
+    opacity: 0;
+    transform: translateY(-16px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toast-enter-center-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Exit animation */
+@keyframes toast-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* Apply enter animations based on position */
+.toast-container[data-position="top-right"] .toast-item[data-state="entering"],
+.toast-container[data-position="bottom-right"]
+  .toast-item[data-state="entering"] {
+  animation: toast-enter-right var(--duration-200) var(--easing-out);
+}
+
+.toast-container[data-position="top-left"] .toast-item[data-state="entering"],
+.toast-container[data-position="bottom-left"]
+  .toast-item[data-state="entering"] {
+  animation: toast-enter-left var(--duration-200) var(--easing-out);
+}
+
+.toast-container[data-position="top-center"]
+  .toast-item[data-state="entering"] {
+  animation: toast-enter-center var(--duration-200) var(--easing-out);
+}
+
+.toast-container[data-position="bottom-center"]
+  .toast-item[data-state="entering"] {
+  animation: toast-enter-center-bottom var(--duration-200) var(--easing-out);
+}
+
+/* Apply exit animation */
+.toast-item[data-state="exiting"] {
+  animation: toast-exit var(--duration-150) var(--easing-in) forwards;
+}
+
+/* ===================================
+ * Tone-specific borders (subtle accent)
+ * =================================== */
+
+.toast-item[data-tone="success"] {
+  border-left: 3px solid var(--color-border-success);
+}
+
+.toast-item[data-tone="warning"] {
+  border-left: 3px solid var(--color-border-warning);
+}
+
+.toast-item[data-tone="critical"] {
+  border-left: 3px solid var(--color-border-critical);
+}
+
+.toast-item[data-tone="info"] {
+  border-left: 3px solid var(--color-border-info);
+}