@visitwonders/assembly 0.1.0

package/dist/overlay/drawer.js

@@ -0,0 +1,275 @@
+import "./drawer.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 Blanket from './blanket.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Focusable elements selector
+// ============================================================================
+const FOCUSABLE_SELECTOR = ['a[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(', ');
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+// ============================================================================
+// Sub-Components
+// ============================================================================
+class DrawerHeader extends Component {
+  get ctx() {
+    return this.args.ctx;
+  }
+  get isCloseButtonVisible() {
+    return this.args.isCloseButtonVisible ?? true;
+  }
+  handleClose = event => {
+    event.preventDefault();
+    this.ctx.closeDrawer();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"drawer-header\" data-test-drawer-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"drawer-title\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"drawer-header-close\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-drawer-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+const DrawerBody = setComponentTemplate(precompileTemplate("<div class=\"drawer-body\" data-test-drawer-body ...attributes>\n  {{yield}}\n</div>", {
+  strictMode: true
+}), templateOnly());
+const DrawerFooter = setComponentTemplate(precompileTemplate("<div class=\"drawer-footer\" data-test-drawer-footer ...attributes>\n  {{yield}}\n</div>", {
+  strictMode: true
+}), templateOnly());
+class DrawerClose extends Component {
+  get ctx() {
+    return this.args.ctx;
+  }
+  handleClick = event => {
+    event.preventDefault();
+    this.ctx.closeDrawer();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"drawer-close\" {{on \"click\" this.handleClick}} data-test-drawer-close ...attributes>\n  {{yield}}\n</button>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+let drawerIdCounter = 0;
+class Drawer extends Component {
+  static {
+    g(this.prototype, "_isOpenInternal", [tracked], function () {
+      return undefined;
+    });
+  }
+  #_isOpenInternal = (i(this, "_isOpenInternal"), void 0);
+  static {
+    g(this.prototype, "exitAnimationActive", [tracked], function () {
+      return false;
+    });
+  }
+  #exitAnimationActive = (i(this, "exitAnimationActive"), void 0);
+  previousVisible = undefined;
+  contentElement = null;
+  previousActiveElement = null;
+  titleId = `drawer-title-${++drawerIdCounter}`;
+  // ============================================================================
+  // Getters
+  // ============================================================================
+  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 side() {
+    return this.args.side ?? 'right';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get showBlanket() {
+    return this.args.showBlanket ?? true;
+  }
+  get closeOnBackdropClick() {
+    if (this.args.preventClose) return false;
+    return this.args.closeOnBackdropClick ?? true;
+  }
+  get closeOnEscape() {
+    if (this.args.preventClose) return false;
+    return this.args.closeOnEscape ?? true;
+  }
+  get destinationElement() {
+    return this.args.container ?? document.body;
+  }
+  get shouldRender() {
+    return this.isOpen || this.exitAnimationActive;
+  }
+  get dataState() {
+    return this.isOpen ? 'open' : 'closed';
+  }
+  // ============================================================================
+  // Actions
+  // ============================================================================
+  setOpen = value => {
+    if (!this.isControlled) {
+      this.isOpenInternal = value;
+    }
+    this.args.onOpenChange?.(value);
+  };
+  closeDrawer = () => {
+    this.setOpen(false);
+  };
+  handleBackdropClose = () => {
+    if (this.closeOnBackdropClick) {
+      this.closeDrawer();
+    }
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  trackVisibility = modifier((_element, _positional, named) => {
+    const wasVisible = this.previousVisible;
+    this.previousVisible = named.visible;
+    if (wasVisible === true && named.visible === false) {
+      this.exitAnimationActive = true;
+    } else if (named.visible) {
+      this.exitAnimationActive = false;
+    }
+  });
+  setupDrawer = modifier(element => {
+    this.contentElement = element;
+    // Store the element that had focus before drawer opened (for return focus)
+    this.previousActiveElement = document.activeElement;
+    // Lock scroll when blanket is shown
+    let originalOverflow = '';
+    let originalPaddingRight = '';
+    if (this.showBlanket) {
+      originalOverflow = document.body.style.overflow;
+      originalPaddingRight = document.body.style.paddingRight;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+    }
+    // Focus the first focusable element or the drawer itself
+    const focusables = getFocusableElements(element);
+    if (focusables.length > 0) {
+      focusables[0]?.focus();
+    } else {
+      element.focus();
+    }
+    // Event handlers
+    const handleKeyDown = event => {
+      if (event.key === 'Escape' && this.closeOnEscape) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeDrawer();
+        return;
+      }
+      // Focus trap (only when blanket is shown)
+      if (event.key === 'Tab' && this.showBlanket) {
+        const focusables = getFocusableElements(element);
+        if (focusables.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        // If focus is outside the drawer, move it inside
+        if (!element.contains(activeElement)) {
+          event.preventDefault();
+          firstFocusable?.focus();
+          return;
+        }
+        if (event.shiftKey) {
+          // Shift+Tab: if on first element, wrap to last
+          if (activeElement === firstFocusable) {
+            event.preventDefault();
+            lastFocusable?.focus();
+          }
+        } else {
+          // Tab: if on last element, wrap to first
+          if (activeElement === lastFocusable) {
+            event.preventDefault();
+            firstFocusable?.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      this.contentElement = null;
+      document.removeEventListener('keydown', handleKeyDown);
+      // Restore scroll if we locked it
+      if (this.showBlanket) {
+        document.body.style.overflow = originalOverflow;
+        document.body.style.paddingRight = originalPaddingRight;
+      }
+      // Return focus to the element that had focus before drawer opened
+      if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+        this.previousActiveElement.focus();
+        this.previousActiveElement = null;
+      }
+    };
+  });
+  handleAnimationEnd = () => {
+    if (!this.isOpen) {
+      this.exitAnimationActive = false;
+    }
+  };
+  // ============================================================================
+  // Context
+  // ============================================================================
+  get context() {
+    return {
+      isOpen: this.isOpen,
+      titleId: this.titleId,
+      closeDrawer: this.closeDrawer
+    };
+  }
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- Visibility tracker for exit animations --}}\n<span hidden {{this.trackVisibility visible=this.isOpen}} data-test-drawer-tracker></span>\n\n{{!-- Blanket is outside shouldRender so it can manage its own exit animation --}}\n{{#if this.showBlanket}}\n  <Blanket @visible={{this.isOpen}} @onClose={{this.handleBackdropClose}} @closeOnClick={{this.closeOnBackdropClick}} @lockScroll={{false}} @container={{this.destinationElement}} data-test-drawer-blanket />\n{{/if}}\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"drawer-container\" role=\"dialog\" aria-modal={{if this.showBlanket \"true\" \"false\"}} aria-labelledby={{this.titleId}} tabindex=\"-1\" data-side={{this.side}} data-size={{this.size}} data-state={{this.dataState}} {{this.setupDrawer}} {{on \"animationend\" this.handleAnimationEnd}} data-test-drawer-container ...attributes>\n      <div class=\"drawer-content\" data-test-drawer-content>\n        {{yield (hash Header=(component DrawerHeader ctx=this.context) Body=(component DrawerBody ctx=this.context) Footer=(component DrawerFooter ctx=this.context) Close=(component DrawerClose ctx=this.context) isOpen=this.isOpen close=this.closeDrawer)}}\n      </div>\n    </div>\n  {{/in-element}}\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        Blanket,
+        on,
+        hash,
+        DrawerHeader,
+        DrawerBody,
+        DrawerFooter,
+        DrawerClose
+      })
+    }), this);
+  }
+}
+
+export { DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, Drawer as default };
+//# sourceMappingURL=drawer.js.map

package/dist/overlay/drawer.js.map

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

package/dist/overlay/index.js

@@ -0,0 +1,7 @@
+export { default as Blanket } from './blanket.js';
+export { default as Drawer } from './drawer.js';
+export { default as Modal } from './modal.js';
+export { default as Popover } from './popover.js';
+export { default as Toast } from './toast.js';
+export { default as Tooltip, TooltipProvider } from './tooltip.js';
+//# sourceMappingURL=index.js.map

package/dist/overlay/index.js.map

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

package/dist/overlay/modal.css

@@ -0,0 +1,209 @@
+/* ===================================
+ * Modal Component
+ * Dialog overlay for focused tasks
+ * =================================== */
+
+/* ===================================
+ * Modal Container (Portal)
+ * =================================== */
+
+.modal-container {
+  /* Positioning - fixed center using flexbox */
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+
+  /* Centering */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+
+  /* Prevent pointer events on container, allow on content */
+  pointer-events: none;
+}
+
+/* Size variants - applied to content */
+.modal-container[data-size="sm"] .modal-content {
+  max-width: 400px;
+}
+
+.modal-container[data-size="md"] .modal-content {
+  max-width: 500px;
+}
+
+.modal-container[data-size="lg"] .modal-content {
+  max-width: 640px;
+}
+
+.modal-container[data-size="xl"] .modal-content {
+  max-width: 800px;
+}
+
+.modal-container[data-size="full"] .modal-content {
+  max-width: 100%;
+}
+
+/* ===================================
+ * Modal Content (Visual Container)
+ * =================================== */
+
+.modal-content {
+  /* Visual */
+  background: var(--color-bg-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+
+  /* Enable pointer events on content */
+  pointer-events: auto;
+}
+
+/* ===================================
+ * Modal Header
+ * =================================== */
+
+.modal-header {
+  /* Layout */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+
+  /* Border */
+  border-bottom: 1px solid var(--color-border-subtle);
+
+  /* Don't shrink */
+  flex-shrink: 0;
+}
+
+.modal-title {
+  /* Typography */
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+
+  /* Prevent overflow */
+  min-width: 0;
+  flex: 1;
+}
+
+.modal-header-close {
+  /* Reset button styles */
+  appearance: none;
+  background: none;
+  border: none;
+  padding: var(--spacing-1);
+  margin: calc(var(--spacing-1) * -1);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+
+  transition:
+    color var(--duration-150) var(--easing-out),
+    background-color var(--duration-150) var(--easing-out);
+}
+
+.modal-header-close:hover {
+  color: var(--color-text);
+  background: var(--color-bg-neutral-subtle);
+}
+
+.modal-header-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ===================================
+ * Modal Body
+ * =================================== */
+
+.modal-body {
+  /* Layout */
+  padding: var(--spacing-4);
+
+  /* Scrollable */
+  overflow-y: auto;
+  flex: 1;
+
+  /* Typography */
+  color: var(--color-text);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+}
+
+/* ===================================
+ * Modal Footer
+ * =================================== */
+
+.modal-footer {
+  /* Layout */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+
+  /* Border */
+  border-top: 1px solid var(--color-border-subtle);
+
+  /* Don't shrink */
+  flex-shrink: 0;
+}
+
+/* ===================================
+ * Animations
+ * =================================== */
+
+/* Enter animation */
+.modal-container[data-state="open"] .modal-content {
+  animation: modal-enter var(--duration-200) var(--easing-out) forwards;
+}
+
+/* Exit animation */
+.modal-container[data-state="closed"] .modal-content {
+  animation: modal-exit var(--duration-150) var(--easing-in) forwards;
+}
+
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* ===================================
+ * Focus visible reset for container
+ * =================================== */
+
+.modal-container:focus {
+  outline: none;
+}