@visitwonders/assembly 0.1.0

package/dist/overlay/toast.js

@@ -0,0 +1,123 @@
+import "./toast.css"
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { Info, AlertCircle, AlertTriangle, CheckCircle, X } from 'lucide';
+import Icon from '../media/icon.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Icon Mapping
+// ============================================================================
+const TONE_ICONS = {
+  success: CheckCircle,
+  warning: AlertTriangle,
+  critical: AlertCircle,
+  info: Info
+};
+// ============================================================================
+// ToastItem Component
+// ============================================================================
+class ToastItem extends Component {
+  get toast() {
+    return this.args.toast;
+  }
+  get icon() {
+    return this.toast.icon ?? TONE_ICONS[this.toast.tone];
+  }
+  get role() {
+    return this.toast.tone === 'critical' ? 'alert' : 'status';
+  }
+  handleDismiss = () => {
+    this.args.onDismiss(this.toast.id);
+  };
+  handleMouseEnter = () => {
+    this.args.onMouseEnter(this.toast.id);
+  };
+  handleMouseLeave = () => {
+    this.args.onMouseLeave(this.toast.id);
+  };
+  handleActionClick = () => {
+    this.toast.action?.onClick();
+    this.args.onDismiss(this.toast.id);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"toast-item\" role={{this.role}} data-tone={{this.toast.tone}} data-state={{this.toast.state}} data-test-toast data-test-toast-id={{this.toast.id}} {{on \"mouseenter\" this.handleMouseEnter}} {{on \"mouseleave\" this.handleMouseLeave}} ...attributes>\n  {{#if this.icon}}\n    <span class=\"toast-icon\" data-test-toast-icon>\n      <Icon @icon={{this.icon}} @size=\"sm\" />\n    </span>\n  {{/if}}\n\n  <div class=\"toast-content\">\n    <p class=\"toast-title\" data-test-toast-title>{{this.toast.title}}</p>\n    {{#if this.toast.description}}\n      <p class=\"toast-description\" data-test-toast-description>\n        {{this.toast.description}}\n      </p>\n    {{/if}}\n  </div>\n\n  {{#if this.toast.action}}\n    <button type=\"button\" class=\"toast-action\" data-test-toast-action {{on \"click\" this.handleActionClick}}>\n      {{this.toast.action.label}}\n    </button>\n  {{/if}}\n\n  {{#if this.toast.dismissible}}\n    <button type=\"button\" class=\"toast-close\" aria-label=\"Dismiss notification\" data-test-toast-close {{on \"click\" this.handleDismiss}}>\n      <Icon @icon={{X}} @size=\"xs\" />\n    </button>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        Icon,
+        X
+      })
+    }), this);
+  }
+}
+// ============================================================================
+// Toast Component
+// ============================================================================
+class Toast extends Component {
+  static {
+    g(this.prototype, "toast", [service]);
+  }
+  #toast = (i(this, "toast"), void 0);
+  get position() {
+    return this.args.position ?? 'bottom-right';
+  }
+  get maxToasts() {
+    return this.args.maxToasts ?? 5;
+  }
+  get gap() {
+    return this.args.gap ?? 8;
+  }
+  get offset() {
+    return this.args.offset ?? 16;
+  }
+  get visibleToasts() {
+    return this.toast.toasts.slice(-this.maxToasts);
+  }
+  get destinationElement() {
+    return document.body;
+  }
+  get containerStyle() {
+    return `--toast-gap: ${this.gap}px; --toast-offset: ${this.offset}px;`;
+  }
+  handleDismiss = id => {
+    this.toast.dismiss(id);
+  };
+  handleMouseEnter = id => {
+    this.toast.pauseTimer(id);
+  };
+  handleMouseLeave = id => {
+    this.toast.resumeTimer(id);
+  };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setupWindowListeners = modifier(_element => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        this.toast.toasts.forEach(t => this.toast.pauseTimer(t.id));
+      } else {
+        this.toast.toasts.forEach(t => this.toast.resumeTimer(t.id));
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.visibleToasts.length}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    <div class=\"toast-container\" role=\"region\" aria-label=\"Notifications\" aria-live=\"polite\" data-position={{this.position}} style={{this.containerStyle}} {{this.setupWindowListeners}} data-test-toast-container ...attributes>\n      {{#each this.visibleToasts as |toastItem|}}\n        <ToastItem @toast={{toastItem}} @onDismiss={{this.handleDismiss}} @onMouseEnter={{this.handleMouseEnter}} @onMouseLeave={{this.handleMouseLeave}} />\n      {{/each}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        ToastItem
+      })
+    }), this);
+  }
+}
+
+export { ToastItem, Toast as default };
+//# sourceMappingURL=toast.js.map

package/dist/overlay/toast.js.map

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

package/dist/overlay/tooltip.css

@@ -0,0 +1,246 @@
+/* ===================================
+ * Tooltip Component
+ * =================================== */
+
+.tooltip {
+  display: inline-flex;
+}
+
+.tooltip-provider {
+  display: contents;
+}
+
+/* ===================================
+ * Trigger
+ * =================================== */
+
+.tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ===================================
+ * Content - Dark variant (default)
+ * =================================== */
+
+.tooltip-content {
+  /* Positioning */
+  position: absolute;
+  z-index: var(--z-tooltip, 9999);
+
+  /* Visual - Dark theme by default */
+  background: var(--gray-900, #161a2e);
+  color: var(--white, #fff);
+  border-radius: var(--radius-md, 6px);
+  box-shadow: var(
+    --shadow-md,
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1)
+  );
+
+  /* Typography */
+  font-size: var(--font-size-sm, 14px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--line-height-tight, 1.25);
+
+  /* Sizing */
+  max-width: 240px;
+  padding: 6px 10px;
+
+  /* Animation */
+  animation: tooltip-fade-in var(--duration-150, 150ms)
+    var(--easing-out, ease-out);
+
+  /* Prevent text selection */
+  user-select: none;
+  pointer-events: auto;
+}
+
+/* Light variant */
+.tooltip-content[data-variant="light"] {
+  background: var(--white, #fff);
+  color: var(--gray-900, #161a2e);
+  border: 1px solid var(--gray-200, #d8dcea);
+}
+
+/* Transform origin based on side */
+.tooltip-content[data-side="top"] {
+  --transform-origin: bottom center;
+}
+
+.tooltip-content[data-side="bottom"] {
+  --transform-origin: top center;
+}
+
+.tooltip-content[data-side="left"] {
+  --transform-origin: right center;
+}
+
+.tooltip-content[data-side="right"] {
+  --transform-origin: left center;
+}
+
+/* ===================================
+ * Animation
+ * =================================== */
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ===================================
+ * Arrow (Caret)
+ * =================================== */
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Arrow pointing down (tooltip on top) */
+.tooltip-arrow[data-side="top"] {
+  border-width: 6px 6px 0 6px;
+  border-color: var(--gray-900, #161a2e) transparent transparent transparent;
+}
+
+/* Arrow pointing up (tooltip on bottom) */
+.tooltip-arrow[data-side="bottom"] {
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--gray-900, #161a2e) transparent;
+}
+
+/* Arrow pointing right (tooltip on left) */
+.tooltip-arrow[data-side="left"] {
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--gray-900, #161a2e);
+}
+
+/* Arrow pointing left (tooltip on right) */
+.tooltip-arrow[data-side="right"] {
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--gray-900, #161a2e) transparent transparent;
+}
+
+/* Light variant arrow - uses pseudo-element for border effect */
+.tooltip-content[data-variant="light"] .tooltip-arrow {
+  /* Hide the default arrow, we'll use pseudo-elements instead */
+  border-color: transparent;
+}
+
+.tooltip-content[data-variant="light"] .tooltip-arrow::before,
+.tooltip-content[data-variant="light"] .tooltip-arrow::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Border layer (behind) */
+.tooltip-content[data-variant="light"] .tooltip-arrow::before {
+  z-index: 0;
+}
+
+/* Fill layer (in front) */
+.tooltip-content[data-variant="light"] .tooltip-arrow::after {
+  z-index: 1;
+}
+
+/* Top arrow (pointing down) - light variant */
+.tooltip-content[data-variant="light"] .tooltip-arrow[data-side="top"]::before {
+  border-width: 7px 7px 0 7px;
+  border-color: var(--gray-200, #d8dcea) transparent transparent transparent;
+  top: 0;
+  left: -1px;
+}
+
+.tooltip-content[data-variant="light"] .tooltip-arrow[data-side="top"]::after {
+  border-width: 6px 6px 0 6px;
+  border-color: var(--white, #fff) transparent transparent transparent;
+  top: 0;
+  left: 0;
+}
+
+/* Bottom arrow (pointing up) - light variant */
+.tooltip-content[data-variant="light"]
+  .tooltip-arrow[data-side="bottom"]::before {
+  border-width: 0 7px 7px 7px;
+  border-color: transparent transparent var(--gray-200, #d8dcea) transparent;
+  bottom: 0;
+  left: -1px;
+}
+
+.tooltip-content[data-variant="light"]
+  .tooltip-arrow[data-side="bottom"]::after {
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--white, #fff) transparent;
+  bottom: 0;
+  left: 0;
+}
+
+/* Left arrow (pointing right) - light variant */
+.tooltip-content[data-variant="light"]
+  .tooltip-arrow[data-side="left"]::before {
+  border-width: 7px 0 7px 7px;
+  border-color: transparent transparent transparent var(--gray-200, #d8dcea);
+  top: -1px;
+  left: 0;
+}
+
+.tooltip-content[data-variant="light"] .tooltip-arrow[data-side="left"]::after {
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--white, #fff);
+  top: 0;
+  left: 0;
+}
+
+/* Right arrow (pointing left) - light variant */
+.tooltip-content[data-variant="light"]
+  .tooltip-arrow[data-side="right"]::before {
+  border-width: 7px 7px 7px 0;
+  border-color: transparent var(--gray-200, #d8dcea) transparent transparent;
+  top: -1px;
+  right: 0;
+}
+
+.tooltip-content[data-variant="light"]
+  .tooltip-arrow[data-side="right"]::after {
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--white, #fff) transparent transparent;
+  top: 0;
+  right: 0;
+}
+
+/* ===================================
+ * Keyboard Shortcut Badge
+ * =================================== */
+
+.tooltip-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--spacing-1, 4px);
+  margin-left: var(--spacing-2, 8px);
+  background: var(--gray-800, #252a40);
+  border-radius: var(--radius-sm, 4px);
+  font-size: var(--font-size-xs, 12px);
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--gray-300, #c2c7d9);
+}
+
+.tooltip-kbd + .tooltip-kbd {
+  margin-left: var(--spacing-1, 4px);
+}