@visitwonders/assembly 0.1.0

package/dist/media/image-css-6bc4899d3a8b992c3d4d2f1a796ce0fc.css

@@ -0,0 +1,78 @@
+/* <inline>/src/media/image-css-6bc4899d3a8b992c3d4d2f1a796ce0fc.css */
+
+  .image_e1a54b413 {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Object Fit */
+  .image_e1a54b413[data-fit="cover"] {
+    object-fit: cover;
+  }
+  .image_e1a54b413[data-fit="contain"] {
+    object-fit: contain;
+  }
+  .image_e1a54b413[data-fit="fill"] {
+    object-fit: fill;
+  }
+  .image_e1a54b413[data-fit="none"] {
+    object-fit: none;
+  }
+  .image_e1a54b413[data-fit="scale-down"] {
+    object-fit: scale-down;
+  }
+
+  /* Object Position */
+  .image_e1a54b413[data-position="center"] {
+    object-position: center;
+  }
+  .image_e1a54b413[data-position="top"] {
+    object-position: top;
+  }
+  .image_e1a54b413[data-position="bottom"] {
+    object-position: bottom;
+  }
+  .image_e1a54b413[data-position="left"] {
+    object-position: left;
+  }
+  .image_e1a54b413[data-position="right"] {
+    object-position: right;
+  }
+
+  /* Border Radius */
+  .image_e1a54b413[data-radius="none"] {
+    border-radius: 0;
+  }
+  .image_e1a54b413[data-radius="sm"] {
+    border-radius: var(--radius-sm);
+  }
+  .image_e1a54b413[data-radius="md"] {
+    border-radius: var(--radius-md);
+  }
+  .image_e1a54b413[data-radius="lg"] {
+    border-radius: var(--radius-lg);
+  }
+  .image_e1a54b413[data-radius="full"] {
+    border-radius: var(--radius-full);
+  }
+
+  /* Aspect Ratio */
+  .image_e1a54b413[data-aspect="1/1"] {
+    aspect-ratio: 1 / 1;
+  }
+  .image_e1a54b413[data-aspect="4/3"] {
+    aspect-ratio: 4 / 3;
+  }
+  .image_e1a54b413[data-aspect="16/9"] {
+    aspect-ratio: 16 / 9;
+  }
+  .image_e1a54b413[data-aspect="3/2"] {
+    aspect-ratio: 3 / 2;
+  }
+  .image_e1a54b413[data-aspect="2/3"] {
+    aspect-ratio: 2 / 3;
+  }
+  .image_e1a54b413[data-aspect="auto"] {
+    aspect-ratio: auto;
+  }

package/dist/media/image.js

@@ -0,0 +1,47 @@
+import "./image-css-6bc4899d3a8b992c3d4d2f1a796ce0fc.css"
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime';
+
+;
+
+class Image extends Component {
+  get fit() {
+    return this.args.objectFit ?? 'cover';
+  }
+  get position() {
+    return this.args.objectPosition ?? 'center';
+  }
+  get radius() {
+    return this.args.radius ?? 'none';
+  }
+  get loading() {
+    return this.args.loading ?? 'lazy';
+  }
+  handleLoad() {
+    this.args.onLoad?.();
+  }
+  static {
+    n(this.prototype, "handleLoad", [action]);
+  }
+  handleError() {
+    this.args.onError?.();
+  }
+  static {
+    n(this.prototype, "handleError", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<img class=\"image_e1a54b413\" src={{@src}} alt={{@alt}} loading={{this.loading}} data-fit={{this.fit}} data-position={{this.position}} data-radius={{this.radius}} data-aspect={{@aspectRatio}} {{on \"load\" this.handleLoad}} {{on \"error\" this.handleError}} ...attributes />", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+
+export { Image as default };
+//# sourceMappingURL=image.js.map

package/dist/media/image.js.map

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

package/dist/media/index.js

@@ -0,0 +1,3 @@
+export { default as Icon } from './icon.js';
+export { default as Image } from './image.js';
+//# sourceMappingURL=index.js.map

package/dist/media/index.js.map

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

package/dist/overlay/blanket.css

@@ -0,0 +1,67 @@
+/* ===================================
+ * Blanket Component
+ * Full-screen overlay backdrop
+ * =================================== */
+
+.blanket {
+  /* Positioning */
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+
+  /* Default background */
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* ===================================
+ * Opacity Variants
+ * =================================== */
+
+.blanket[data-opacity="light"] {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.blanket[data-opacity="default"] {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.blanket[data-opacity="heavy"] {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+/* ===================================
+ * Animations
+ * =================================== */
+
+/* Fade in (visible state) */
+.blanket[data-animated="true"][data-state="visible"] {
+  animation: blanket-fade-in var(--duration-200) var(--easing-out);
+}
+
+/* Fade out (hidden state) */
+.blanket[data-animated="true"][data-state="hidden"] {
+  animation: blanket-fade-out var(--duration-150) var(--easing-in) forwards;
+}
+
+@keyframes blanket-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes blanket-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* No animation */
+.blanket[data-animated="false"] {
+  animation: none;
+}

package/dist/overlay/blanket.js

@@ -0,0 +1,139 @@
+import "./blanket.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Component
+// ============================================================================
+class Blanket extends Component {
+  static {
+    g(this.prototype, "exitAnimationActive", [tracked], function () {
+      return false;
+    });
+  }
+  #exitAnimationActive = (i(this, "exitAnimationActive"), void 0);
+  /**
+  * Track whether we're in exit animation mode.
+  * When visible goes from true to false with animation enabled,
+  * we stay rendered until animationend fires.
+  */
+  /**
+  * Track the previous visible state to detect transitions.
+  */
+  previousVisible = undefined;
+  // ============================================================================
+  // Getters
+  // ============================================================================
+  get closeOnClick() {
+    return this.args.closeOnClick ?? true;
+  }
+  get lockScroll() {
+    return this.args.lockScroll ?? true;
+  }
+  get opacity() {
+    return this.args.opacity ?? 'default';
+  }
+  get animated() {
+    return this.args.animated ?? true;
+  }
+  get destinationElement() {
+    return this.args.container ?? document.body;
+  }
+  get zIndexStyle() {
+    if (this.args.zIndex !== undefined) {
+      return `z-index: ${this.args.zIndex}`;
+    }
+    return undefined;
+  }
+  get shouldRender() {
+    // Render if visible or if we're in exit animation mode
+    return this.args.visible || this.exitAnimationActive;
+  }
+  get dataState() {
+    // Show hidden state when visible is false (for exit animation)
+    return this.args.visible ? 'visible' : 'hidden';
+  }
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleClick = event => {
+    // Only trigger close if clicking directly on the blanket, not children
+    if (this.closeOnClick && event.target === event.currentTarget && this.args.onClose) {
+      this.args.onClose();
+    }
+  };
+  handleAnimationEnd = () => {
+    // When exit animation completes, clear the exit animation flag
+    if (!this.args.visible) {
+      this.exitAnimationActive = false;
+    }
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  /**
+  * Tracks visibility changes and manages exit animation state.
+  * This modifier detects when visible transitions from true to false
+  * and sets up the exit animation mode.
+  */
+  trackVisibility = modifier((_element, _positional, named) => {
+    const wasVisible = this.previousVisible;
+    this.previousVisible = named.visible;
+    // Detect transition from visible to hidden
+    if (wasVisible === true && named.visible === false) {
+      if (named.animated) {
+        // Start exit animation - component stays rendered
+        this.exitAnimationActive = true;
+      }
+      // If not animated, exitAnimationActive stays false, component unmounts
+    } else if (named.visible) {
+      // Opening - ensure exit animation flag is cleared
+      this.exitAnimationActive = false;
+    }
+  });
+  /**
+  * Locks body scroll when the blanket is visible.
+  * Compensates for scrollbar width to prevent layout shift.
+  */
+  scrollLock = modifier((_element, _positional, named) => {
+    if (!named.enabled) {
+      return;
+    }
+    // Store original values
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    // Calculate scrollbar width
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    // Apply scroll lock
+    document.body.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      // Restore original values
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  });
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- Track visibility changes to manage exit animation state --}}\n<span hidden {{this.trackVisibility visible=@visible animated=this.animated}} data-test-blanket-tracker></span>\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"blanket\" aria-hidden=\"true\" data-opacity={{this.opacity}} data-animated={{if this.animated \"true\" \"false\"}} data-state={{this.dataState}} style={{this.zIndexStyle}} {{on \"click\" this.handleClick}} {{on \"animationend\" this.handleAnimationEnd}} {{this.scrollLock enabled=this.lockScroll}} data-test-blanket ...attributes>\n      {{yield}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+
+export { Blanket as default };
+//# sourceMappingURL=blanket.js.map

package/dist/overlay/blanket.js.map

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

package/dist/overlay/drawer.css

@@ -0,0 +1,369 @@
+/* ===================================
+ * Drawer Component
+ * Slide-in panel from screen edge
+ * =================================== */
+
+/* ===================================
+ * Drawer Container (Portal)
+ * =================================== */
+
+.drawer-container {
+  /* Positioning - fixed, z-index shared with modal */
+  position: fixed;
+  z-index: var(--z-modal);
+
+  /* Flex container for content */
+  display: flex;
+  flex-direction: column;
+
+  /* Base visual */
+  background: var(--color-bg-surface-raised);
+  box-shadow: var(--shadow-xl);
+}
+
+/* Focus reset for container */
+.drawer-container:focus {
+  outline: none;
+}
+
+/* ===================================
+ * Side Positioning
+ * =================================== */
+
+/* Right side (default) */
+.drawer-container[data-side="right"] {
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-height: 100vh;
+  border-left: 1px solid var(--color-border-subtle);
+}
+
+/* Left side */
+.drawer-container[data-side="left"] {
+  top: 0;
+  left: 0;
+  height: 100vh;
+  max-height: 100vh;
+  border-right: 1px solid var(--color-border-subtle);
+}
+
+/* Top side */
+.drawer-container[data-side="top"] {
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-width: 100vw;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+/* Bottom side */
+.drawer-container[data-side="bottom"] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-width: 100vw;
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+/* ===================================
+ * Size Variants - Horizontal (left/right)
+ * =================================== */
+
+.drawer-container[data-side="right"][data-size="sm"],
+.drawer-container[data-side="left"][data-size="sm"] {
+  width: 320px;
+  max-width: 100vw;
+}
+
+.drawer-container[data-side="right"][data-size="md"],
+.drawer-container[data-side="left"][data-size="md"] {
+  width: 400px;
+  max-width: 100vw;
+}
+
+.drawer-container[data-side="right"][data-size="lg"],
+.drawer-container[data-side="left"][data-size="lg"] {
+  width: 560px;
+  max-width: 100vw;
+}
+
+.drawer-container[data-side="right"][data-size="xl"],
+.drawer-container[data-side="left"][data-size="xl"] {
+  width: 720px;
+  max-width: 100vw;
+}
+
+.drawer-container[data-side="right"][data-size="full"],
+.drawer-container[data-side="left"][data-size="full"] {
+  width: 100vw;
+}
+
+/* ===================================
+ * Size Variants - Vertical (top/bottom)
+ * =================================== */
+
+.drawer-container[data-side="top"][data-size="sm"],
+.drawer-container[data-side="bottom"][data-size="sm"] {
+  height: 200px;
+  max-height: 100vh;
+}
+
+.drawer-container[data-side="top"][data-size="md"],
+.drawer-container[data-side="bottom"][data-size="md"] {
+  height: 320px;
+  max-height: 100vh;
+}
+
+.drawer-container[data-side="top"][data-size="lg"],
+.drawer-container[data-side="bottom"][data-size="lg"] {
+  height: 480px;
+  max-height: 100vh;
+}
+
+.drawer-container[data-side="top"][data-size="xl"],
+.drawer-container[data-side="bottom"][data-size="xl"] {
+  height: 640px;
+  max-height: 100vh;
+}
+
+.drawer-container[data-side="top"][data-size="full"],
+.drawer-container[data-side="bottom"][data-size="full"] {
+  height: 100vh;
+}
+
+/* ===================================
+ * Drawer Content
+ * =================================== */
+
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ===================================
+ * Drawer Header
+ * =================================== */
+
+.drawer-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;
+}
+
+.drawer-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;
+}
+
+.drawer-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);
+}
+
+.drawer-header-close:hover {
+  color: var(--color-text);
+  background: var(--color-bg-neutral-subtle);
+}
+
+.drawer-header-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ===================================
+ * Drawer Body
+ * =================================== */
+
+.drawer-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);
+}
+
+/* ===================================
+ * Drawer Footer
+ * =================================== */
+
+.drawer-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 - Right Side
+ * =================================== */
+
+@keyframes drawer-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.drawer-container[data-side="right"][data-state="open"] {
+  animation: drawer-slide-in-right var(--duration-200) var(--easing-out)
+    forwards;
+}
+
+.drawer-container[data-side="right"][data-state="closed"] {
+  animation: drawer-slide-out-right var(--duration-150) var(--easing-in)
+    forwards;
+}
+
+/* ===================================
+ * Animations - Left Side
+ * =================================== */
+
+@keyframes drawer-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.drawer-container[data-side="left"][data-state="open"] {
+  animation: drawer-slide-in-left var(--duration-200) var(--easing-out) forwards;
+}
+
+.drawer-container[data-side="left"][data-state="closed"] {
+  animation: drawer-slide-out-left var(--duration-150) var(--easing-in) forwards;
+}
+
+/* ===================================
+ * Animations - Top Side
+ * =================================== */
+
+@keyframes drawer-slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes drawer-slide-out-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+.drawer-container[data-side="top"][data-state="open"] {
+  animation: drawer-slide-in-top var(--duration-200) var(--easing-out) forwards;
+}
+
+.drawer-container[data-side="top"][data-state="closed"] {
+  animation: drawer-slide-out-top var(--duration-150) var(--easing-in) forwards;
+}
+
+/* ===================================
+ * Animations - Bottom Side
+ * =================================== */
+
+@keyframes drawer-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes drawer-slide-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.drawer-container[data-side="bottom"][data-state="open"] {
+  animation: drawer-slide-in-bottom var(--duration-200) var(--easing-out)
+    forwards;
+}
+
+.drawer-container[data-side="bottom"][data-state="closed"] {
+  animation: drawer-slide-out-bottom var(--duration-150) var(--easing-in)
+    forwards;
+}