@visitwonders/assembly 0.1.0

package/dist/status/tag.css

@@ -0,0 +1,352 @@
+/* ===================================
+ * Tag Component
+ * =================================== */
+
+.tag {
+  /* Layout */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+
+  /* Shape */
+  border-radius: var(--radius-full);
+
+  /* Typography */
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+
+  /* Transitions */
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* ===================================
+ * Tag Content (inner interactive/static element)
+ * =================================== */
+
+.tag-content {
+  /* Reset */
+  appearance: none;
+  border: none;
+  background: none;
+  font: inherit;
+  text-decoration: none;
+  color: inherit;
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Interactive content */
+button.tag-content,
+a.tag-content {
+  cursor: pointer;
+}
+
+button.tag-content:focus-visible,
+a.tag-content:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo);
+}
+
+/* ===================================
+ * Sizes
+ * =================================== */
+
+.tag[data-size="sm"] {
+  height: var(--spacing-5);
+  font-size: var(--font-size-xs);
+}
+
+.tag[data-size="sm"] .tag-content {
+  padding: 0 var(--spacing-2);
+}
+
+.tag[data-size="md"] {
+  height: var(--spacing-6);
+  font-size: var(--font-size-sm);
+}
+
+.tag[data-size="md"] .tag-content {
+  padding: 0 var(--spacing-2-5);
+}
+
+.tag[data-size="lg"] {
+  height: var(--spacing-7);
+  font-size: var(--font-size-sm);
+}
+
+.tag[data-size="lg"] .tag-content {
+  padding: 0 var(--spacing-3);
+}
+
+/* Adjust padding when has accent bar */
+.tag[data-has-accent="true"][data-size="sm"] .tag-content {
+  padding-left: var(--spacing-2);
+}
+
+.tag[data-has-accent="true"][data-size="md"] .tag-content {
+  padding-left: var(--spacing-2-5);
+}
+
+.tag[data-has-accent="true"][data-size="lg"] .tag-content {
+  padding-left: var(--spacing-3);
+}
+
+/* Adjust padding when removable */
+.tag[data-removable="true"][data-size="sm"] .tag-content {
+  padding-right: var(--spacing-1);
+}
+
+.tag[data-removable="true"][data-size="md"] .tag-content {
+  padding-right: var(--spacing-1);
+}
+
+.tag[data-removable="true"][data-size="lg"] .tag-content {
+  padding-right: var(--spacing-1-5);
+}
+
+/* ===================================
+ * Tones
+ * =================================== */
+
+/* Neutral */
+.tag[data-tone="neutral"] {
+  background: var(--color-bg-neutral-subtle);
+  color: var(--color-text);
+}
+
+.tag[data-tone="neutral"][data-interactive="true"]:hover:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-neutral-subtle-hover);
+}
+
+.tag[data-tone="neutral"][data-interactive="true"]:active:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-neutral-subtle-active);
+}
+
+.tag[data-tone="neutral"][data-selected="true"] {
+  background: var(--color-bg-fill-neutral);
+  color: var(--color-text-on-neutral);
+}
+
+/* Primary */
+.tag[data-tone="primary"] {
+  background: var(--color-bg-primary-subtle);
+  color: var(--color-text-primary);
+}
+
+.tag[data-tone="primary"][data-interactive="true"]:hover:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-primary-subtle-hover);
+}
+
+.tag[data-tone="primary"][data-interactive="true"]:active:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-primary-subtle-active);
+}
+
+.tag[data-tone="primary"][data-selected="true"] {
+  background: var(--color-bg-fill-primary);
+  color: var(--color-text-on-primary);
+}
+
+/* Success */
+.tag[data-tone="success"] {
+  background: var(--color-bg-success-subtle);
+  color: var(--color-text-success);
+}
+
+.tag[data-tone="success"][data-interactive="true"]:hover:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-success-subtle-hover);
+}
+
+.tag[data-tone="success"][data-interactive="true"]:active:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-success-subtle-active);
+}
+
+.tag[data-tone="success"][data-selected="true"] {
+  background: var(--color-bg-fill-success);
+  color: var(--color-text-on-success);
+}
+
+/* Warning */
+.tag[data-tone="warning"] {
+  background: var(--color-bg-warning-subtle);
+  color: var(--color-text-warning);
+}
+
+.tag[data-tone="warning"][data-interactive="true"]:hover:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-warning-subtle-hover);
+}
+
+.tag[data-tone="warning"][data-interactive="true"]:active:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-warning-subtle-active);
+}
+
+.tag[data-tone="warning"][data-selected="true"] {
+  background: var(--color-bg-fill-warning);
+  color: var(--color-text-on-warning);
+}
+
+/* Critical */
+.tag[data-tone="critical"] {
+  background: var(--color-bg-critical-subtle);
+  color: var(--color-text-critical);
+}
+
+.tag[data-tone="critical"][data-interactive="true"]:hover:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-critical-subtle-hover);
+}
+
+.tag[data-tone="critical"][data-interactive="true"]:active:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-critical-subtle-active);
+}
+
+.tag[data-tone="critical"][data-selected="true"] {
+  background: var(--color-bg-fill-critical);
+  color: var(--color-text-on-critical);
+}
+
+/* Info */
+.tag[data-tone="info"] {
+  background: var(--color-bg-info-subtle);
+  color: var(--color-text-info);
+}
+
+.tag[data-tone="info"][data-interactive="true"]:hover:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-info-subtle-hover);
+}
+
+.tag[data-tone="info"][data-interactive="true"]:active:not(
+    [data-disabled="true"]
+  ) {
+  background: var(--color-bg-info-subtle-active);
+}
+
+.tag[data-tone="info"][data-selected="true"] {
+  background: var(--color-bg-fill-info);
+  color: var(--color-text-on-info);
+}
+
+/* ===================================
+ * States
+ * =================================== */
+
+/* Disabled */
+.tag[data-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ===================================
+ * Inner Elements
+ * =================================== */
+
+.tag-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.tag-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Accent bar */
+.tag-accent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--tag-accent-color);
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+/* Remove button */
+.tag-remove {
+  /* Reset */
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* Size */
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  margin-right: var(--spacing-1);
+
+  /* Shape */
+  border-radius: var(--radius-full);
+
+  /* Color */
+  color: currentColor;
+  opacity: 0.7;
+
+  /* Transitions */
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.tag-remove:hover:not(:disabled) {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.tag-remove:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--color-focus-ring-halo);
+}
+
+.tag-remove:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Selected state remove button styling */
+.tag[data-selected="true"] .tag-remove:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}

package/dist/status/tag.js

@@ -0,0 +1,81 @@
+import "./tag.css"
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { X } from 'lucide';
+import Icon from '../media/icon.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Tag extends Component {
+  get tone() {
+    return this.args.tone ?? 'neutral';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get iconSize() {
+    return this.size === 'sm' ? 'xs' : 'sm';
+  }
+  get isInteractive() {
+    return !!(this.args.onClick || this.args.href);
+  }
+  get isLink() {
+    return !!this.args.href;
+  }
+  get removeLabel() {
+    return this.args.removeLabel ?? 'Remove';
+  }
+  get ariaPressed() {
+    if (this.args.selected === undefined || !this.args.onClick) {
+      return undefined;
+    }
+    return this.args.selected ? 'true' : 'false';
+  }
+  get isValidHexColor() {
+    return !!this.args.color && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.args.color);
+  }
+  get accentStyle() {
+    if (this.isValidHexColor) {
+      return `--tag-accent-color: ${this.args.color}`;
+    }
+    return undefined;
+  }
+  handleClick = event => {
+    if (this.args.disabled) {
+      event.preventDefault();
+      return;
+    }
+    this.args.onClick?.();
+  };
+  handleRemove = event => {
+    event.stopPropagation();
+    if (this.args.disabled) {
+      return;
+    }
+    this.args.onRemove?.();
+  };
+  handleKeyDown = event => {
+    if (this.args.disabled) {
+      return;
+    }
+    if ((event.key === 'Backspace' || event.key === 'Delete') && this.args.onRemove) {
+      event.preventDefault();
+      this.args.onRemove();
+    }
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<span class=\"tag\" style={{this.accentStyle}} data-tone={{this.tone}} data-size={{this.size}} data-selected={{if @selected \"true\"}} data-disabled={{if @disabled \"true\"}} data-has-accent={{if @color \"true\"}} data-removable={{if @onRemove \"true\"}} data-interactive={{if this.isInteractive \"true\"}} data-test-tag ...attributes>\n  {{#if this.isValidHexColor}}\n    <span class=\"tag-accent\" data-test-tag-accent></span>\n  {{/if}}\n\n  {{#if this.isLink}}\n    <a class=\"tag-content\" href={{@href}} tabindex={{if @disabled \"-1\"}} data-test-tag-link {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n    </a>\n  {{else if this.isInteractive}}\n    <button type=\"button\" class=\"tag-content\" disabled={{@disabled}} aria-pressed={{this.ariaPressed}} data-test-tag-button {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n    </button>\n  {{else}}\n    <span class=\"tag-content\" tabindex={{if @onRemove \"0\"}} data-test-tag-content {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n    </span>\n  {{/if}}\n\n  {{#if @onRemove}}\n    <button type=\"button\" class=\"tag-remove\" aria-label={{this.removeLabel}} disabled={{@disabled}} data-test-tag-remove {{on \"click\" this.handleRemove}}>\n      <Icon @icon={{X}} @size={{this.iconSize}} />\n    </button>\n  {{/if}}\n</span>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        Icon,
+        X
+      })
+    }), this);
+  }
+}
+
+export { Tag as default };
+//# sourceMappingURL=tag.js.map

package/dist/status/tag.js.map

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

package/dist/styles/animations.css

@@ -0,0 +1,11 @@
+/* Global Animation Keyframes */
+
+@keyframes skeleton-pulse {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}

package/dist/styles/base/typography.css

@@ -0,0 +1,47 @@
+:root {
+  --font-color: var(--color-text);
+}
+
+h1 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-24);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+h2 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-20);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+h3 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-18);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+h4 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+body {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-13);
+  font-weight: var(--font-weight-400);
+  line-height: var(--line-height-1-5);
+}

package/dist/styles/ember-promise-modals.css

@@ -0,0 +1,43 @@
+:root {
+  /* Third-party library integration */
+  --epm-backdrop-background: var(--color-bg-overlay);
+}
+
+/* Drawer animation
+
+   These styles must be in a global (non-scoped) CSS file because:
+   1. EPM listens for animationend events where the animation name ends in "-out"
+      to know when to remove modals from the DOM
+   2. ember-scoped-css would mangle the keyframe names (e.g., drawer-animation-out__hash)
+      which breaks EPM's detection pattern
+   3. Additionally, ember-scoped-css has a bug where hyphens in animation names
+      are converted to underscores in references but not in @keyframes definitions
+*/
+
+.epm-modal.modal-drawer {
+  animation: drawer-animation-in 200ms;
+}
+
+.epm-modal.modal-drawer.epm-out {
+  animation: drawer-animation-out 200ms forwards;
+}
+
+@keyframes drawer-animation-in {
+  0% {
+    transform: translate(100%, 0);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes drawer-animation-out {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(100%, 0);
+  }
+}

package/dist/styles/primitive/colors.css

@@ -0,0 +1,86 @@
+:root {
+  /* Gray Scale - Indigo-tinted neutrals (hue ~228°) */
+  --gray-25: #f9f9fb;
+  --gray-50: #f4f6fb;
+  --gray-100: #ebeef6;
+  --gray-175: #dfe2ee;
+  --gray-200: #d8dcea;
+  --gray-300: #c2c7d9;
+  --gray-400: #9aa1b8;
+  --gray-500: #6b7394;
+  --gray-600: #4e5574;
+  --gray-700: #3a4060;
+  --gray-800: #252a40;
+  --gray-900: #161a2e;
+  --gray-950: #0a0c18;
+
+  /* Indigo Scale - Custom indigo (~228° hue) */
+  --indigo-50: #f1f3ff;
+  --indigo-100: #e4e8ff;
+  --indigo-200: #ccd3ff;
+  --indigo-300: #a8b4ff;
+  --indigo-400: #7c8bfc;
+  --indigo-500: #5865f5;
+  --indigo-600: #4650e5;
+  --indigo-700: #3840c9;
+  --indigo-800: #2f36a3;
+  --indigo-900: #2a3182;
+  --indigo-950: #1a1e4e;
+
+  /* Red Scale */
+  --red-50: #fff1f2;
+  --red-100: #ffe4e6;
+  --red-200: #fecdd3;
+  --red-300: #fda4af;
+  --red-400: #fb7185;
+  --red-500: #f43f5e;
+  --red-600: #e11d48;
+  --red-700: #be123c;
+  --red-800: #9f1239;
+  --red-900: #881337;
+  --red-950: #4c0519;
+
+  /* Green Scale */
+  --green-50: #ecfdf5;
+  --green-100: #d1fae5;
+  --green-200: #a7f3d0;
+  --green-300: #6ee7b7;
+  --green-400: #34d399;
+  --green-500: #05ac61;
+  --green-600: #0b8451;
+  --green-700: #0a6b42;
+  --green-800: #085536;
+  --green-900: #053f28;
+  --green-950: #032618;
+
+  /* Amber Scale */
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  --amber-950: #451a03;
+
+  /* Cyan Scale */
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-200: #a5f3fc;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0e7490;
+  --cyan-800: #155e75;
+  --cyan-900: #164e63;
+  --cyan-950: #083344;
+
+  /* Static Colors */
+  --white: #fff;
+  --black: #000;
+  --transparent: transparent;
+}

package/dist/styles/primitive/effects.css

@@ -0,0 +1,29 @@
+:root {
+  /* Shadows */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
+
+  /* Opacity */
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-75: 0.75;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-95: 0.95;
+  --opacity-100: 1;
+}

package/dist/styles/primitive/fonts.css

@@ -0,0 +1,19 @@
+/* Geist Mono - Web font for cross-platform monospace consistency */
+/* Loaded from jsDelivr CDN for zero-config usage */
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Regular.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Medium.woff2")
+    format("woff2");
+}

package/dist/styles/primitive/motion.css

@@ -0,0 +1,18 @@
+:root {
+  /* Duration */
+  --duration-0: 0ms;
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Easing */
+  --easing-linear: linear;
+  --easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}