@visitwonders/assembly 0.1.0

package/dist/form/select.js

@@ -0,0 +1,394 @@
+import "./select.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+import Popover from '../overlay/popover.js';
+import Icon from '../media/icon.js';
+import { ChevronDown } from 'lucide';
+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';
+
+;
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+let optionIdCounter = 0;
+class SelectOption extends Component {
+  optionId = `select-option-${++optionIdCounter}`;
+  element = null;
+  label = '';
+  get ctx() {
+    return this.args.ctx;
+  }
+  get isSelected() {
+    return this.ctx.selectedValue === this.args.value;
+  }
+  get isActive() {
+    return this.ctx.activeId === this.optionId;
+  }
+  get ariaSelected() {
+    return this.isSelected ? 'true' : 'false';
+  }
+  get ariaDisabled() {
+    return this.args.disabled ? 'true' : undefined;
+  }
+  registerElement = modifier(element => {
+    this.element = element;
+    // Get the text content for typeahead
+    this.label = element.textContent?.trim() ?? '';
+    this.ctx.registerOption({
+      id: this.optionId,
+      value: this.args.value,
+      label: this.label,
+      disabled: this.args.disabled ?? false,
+      element: element
+    });
+    return () => {
+      this.ctx.unregisterOption(this.optionId);
+      this.element = null;
+    };
+  });
+  handleClick = event => {
+    event.preventDefault();
+    if (!this.args.disabled) {
+      this.ctx.selectOption(this.args.value);
+    }
+  };
+  handleMouseEnter = () => {
+    if (!this.args.disabled) {
+      this.ctx.setActiveId(this.optionId);
+    }
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<div id={{this.optionId}} role=\"option\" class=\"select-option_ebb583c5d\" aria-selected={{this.ariaSelected}} aria-disabled={{this.ariaDisabled}} data-active={{if this.isActive \"true\"}} data-selected={{if this.isSelected \"true\"}} data-disabled={{if @disabled \"true\"}} {{this.registerElement}} {{on \"click\" this.handleClick}} {{on \"mouseenter\" this.handleMouseEnter}} data-test-select-option ...attributes>\n  <span class=\"select-option-content_ebb583c5d\">\n    {{yield}}\n  </span>\n  {{#if this.isSelected}}\n    <span class=\"select-option-check_ebb583c5d\" aria-hidden=\"true\"></span>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+const SelectOptionGroup = setComponentTemplate(precompileTemplate("<div role=\"group\" aria-label={{@label}} class=\"select-option-group_ebb583c5d\" data-test-select-option-group ...attributes>\n  <div class=\"select-option-group-label_ebb583c5d\" data-test-select-option-group-label>{{@label}}</div>\n  {{yield}}\n</div>", {
+  strictMode: true
+}), templateOnly());
+// ============================================================================
+// Main Component
+// ============================================================================
+let selectIdCounter = 0;
+class Select extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "activeId", [tracked], function () {
+      return null;
+    });
+  }
+  #activeId = (i(this, "activeId"), void 0);
+  static {
+    g(this.prototype, "_optionsVersion", [tracked], function () {
+      return 0;
+    });
+  }
+  #_optionsVersion = (i(this, "_optionsVersion"), void 0);
+  // Non-tracked internal storage for options - avoids autotracking conflicts during render
+  _optionsMap = new Map();
+  // Cache for selected label - persists even when options are unregistered (dropdown closed)
+  _selectedLabelCache = new Map();
+  listboxId = `select-listbox-${++selectIdCounter}`;
+  triggerElement = null;
+  // Typeahead state
+  typeaheadBuffer = '';
+  typeaheadTimeout = null;
+  willDestroy() {
+    super.willDestroy();
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+    }
+  }
+  get selectedValue() {
+    return this.args.value;
+  }
+  get options() {
+    // Return options from non-tracked map
+    // This is intentionally non-reactive to avoid autotracking conflicts during render
+    return Array.from(this._optionsMap.values());
+  }
+  get selectedLabel() {
+    // Reference version to create tracking dependency
+    void this._optionsVersion;
+    if (!this.selectedValue) return undefined;
+    // First check currently registered options
+    for (const opt of this._optionsMap.values()) {
+      if (opt.value === this.selectedValue) {
+        return opt.label;
+      }
+    }
+    // Fall back to cached label (for when dropdown is closed and options are unregistered)
+    return this._selectedLabelCache.get(this.selectedValue);
+  }
+  get triggerDisplayText() {
+    return this.selectedLabel ?? this.args.placeholder ?? '';
+  }
+  get enabledOptions() {
+    return this.options.filter(o => !o.disabled);
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  // Setup keyboard and focus handling
+  setupTrigger = modifier(element => {
+    this.triggerElement = element;
+    element.addEventListener('keydown', this.handleTriggerKeyDown);
+    element.addEventListener('focus', this.handleFocus);
+    element.addEventListener('blur', this.handleBlur);
+    return () => {
+      element.removeEventListener('keydown', this.handleTriggerKeyDown);
+      element.removeEventListener('focus', this.handleFocus);
+      element.removeEventListener('blur', this.handleBlur);
+      this.triggerElement = null;
+    };
+  });
+  handleFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleBlur = event => {
+    this.args.onBlur?.(event);
+  };
+  handleTriggerKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown':
+      case 'ArrowUp':
+        if (!this.isOpen) {
+          event.preventDefault();
+          this.openDropdown();
+          // Set active to selected or first option
+          if (this.selectedValue) {
+            const selectedOption = this.options.find(o => o.value === this.selectedValue);
+            if (selectedOption) {
+              this.activeId = selectedOption.id;
+            }
+          } else if (this.enabledOptions.length > 0) {
+            this.activeId = this.enabledOptions[0].id;
+          }
+        } else {
+          this.handleListboxKeyDown(event);
+        }
+        break;
+      case 'Home':
+      case 'End':
+        if (this.isOpen) {
+          this.handleListboxKeyDown(event);
+        }
+        break;
+      case 'Escape':
+        if (this.isOpen) {
+          event.preventDefault();
+          this.closeDropdown();
+        }
+        break;
+      case 'Tab':
+        if (this.isOpen) {
+          this.closeDropdown();
+        }
+        break;
+      default:
+        // Typeahead - handle printable characters
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          event.preventDefault();
+          this.handleTypeahead(event.key);
+          if (!this.isOpen) {
+            this.openDropdown();
+          }
+        }
+    }
+  };
+  handleListboxKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          this.moveActiveOption(1);
+          break;
+        }
+      case 'ArrowUp':
+        {
+          event.preventDefault();
+          this.moveActiveOption(-1);
+          break;
+        }
+      case 'Home':
+        {
+          event.preventDefault();
+          if (this.enabledOptions.length > 0) {
+            this.activeId = this.enabledOptions[0].id;
+            this.scrollActiveIntoView();
+          }
+          break;
+        }
+      case 'End':
+        {
+          event.preventDefault();
+          if (this.enabledOptions.length > 0) {
+            this.activeId = this.enabledOptions[this.enabledOptions.length - 1].id;
+            this.scrollActiveIntoView();
+          }
+          break;
+        }
+      case 'Enter':
+      case ' ':
+        {
+          event.preventDefault();
+          if (this.activeId) {
+            const activeOption = this.options.find(o => o.id === this.activeId);
+            if (activeOption && !activeOption.disabled) {
+              this.selectOptionByValue(activeOption.value);
+            }
+          }
+          break;
+        }
+      default:
+        // Typeahead
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          event.preventDefault();
+          this.handleTypeahead(event.key);
+        }
+    }
+  };
+  moveActiveOption(direction) {
+    if (this.enabledOptions.length === 0) return;
+    const currentIndex = this.activeId ? this.enabledOptions.findIndex(o => o.id === this.activeId) : -1;
+    let newIndex;
+    if (currentIndex === -1) {
+      newIndex = direction === 1 ? 0 : this.enabledOptions.length - 1;
+    } else {
+      newIndex = currentIndex + direction;
+      if (newIndex < 0) newIndex = this.enabledOptions.length - 1;
+      if (newIndex >= this.enabledOptions.length) newIndex = 0;
+    }
+    this.activeId = this.enabledOptions[newIndex].id;
+    this.scrollActiveIntoView();
+  }
+  scrollActiveIntoView() {
+    if (!this.activeId) return;
+    const option = this.options.find(o => o.id === this.activeId);
+    option?.element?.scrollIntoView({
+      block: 'nearest'
+    });
+  }
+  handleTypeahead(key) {
+    // Clear existing timeout
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+    }
+    // Add to buffer
+    this.typeaheadBuffer += key.toLowerCase();
+    // Find matching option
+    const match = this.enabledOptions.find(o => o.label.toLowerCase().startsWith(this.typeaheadBuffer));
+    if (match) {
+      this.activeId = match.id;
+      this.scrollActiveIntoView();
+    }
+    // Clear buffer after delay
+    this.typeaheadTimeout = setTimeout(() => {
+      this.typeaheadBuffer = '';
+      this.typeaheadTimeout = null;
+    }, 500);
+  }
+  openDropdown = () => {
+    if (this.args.isDisabled) return;
+    this.isOpen = true;
+  };
+  closeDropdown = () => {
+    this.isOpen = false;
+    this.activeId = null;
+    this.typeaheadBuffer = '';
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+      this.typeaheadTimeout = null;
+    }
+  };
+  toggleDropdown = () => {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  registerOption = option => {
+    // Store in non-tracked map
+    this._optionsMap.set(option.id, option);
+    // Cache label for display when dropdown is closed
+    this._selectedLabelCache.set(option.value, option.label);
+    // Defer version bump to avoid autotracking conflicts during render
+    setTimeout(() => {
+      this._optionsVersion++;
+    }, 0);
+  };
+  unregisterOption = id => {
+    this._optionsMap.delete(id);
+    setTimeout(() => {
+      this._optionsVersion++;
+    }, 0);
+  };
+  selectOptionByValue = value => {
+    this.args.onChange?.(value);
+    this.closeDropdown();
+    this.triggerElement?.focus();
+  };
+  setActiveId = id => {
+    this.activeId = id;
+  };
+  get context() {
+    return {
+      isOpen: this.isOpen,
+      selectedValue: this.selectedValue,
+      activeId: this.activeId,
+      registerOption: this.registerOption,
+      unregisterOption: this.unregisterOption,
+      selectOption: this.selectOptionByValue,
+      setActiveId: this.setActiveId,
+      listboxId: this.listboxId
+    };
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<Popover @trigger=\"manual\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{true}} class=\"select_ebb583c5d\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-select ...attributes as |popover|>\n  {{!-- Hidden input for form submission --}}\n  {{#if @name}}\n    <input type=\"hidden\" name={{@name}} value={{this.selectedValue}} data-test-select-input />\n  {{/if}}\n\n  <popover.Trigger {{this.setupTrigger}} {{on \"click\" this.toggleDropdown}} class=\"select-trigger_ebb583c5d\" id={{@id}} role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.listboxId}} aria-activedescendant={{this.activeId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} disabled={{@isDisabled}} data-test-select-trigger>\n    <span class=\"select-trigger-text_ebb583c5d\" data-placeholder={{unless this.selectedValue \"true\"}} data-test-select-trigger-text>{{this.triggerDisplayText}}</span>\n    <Icon @icon={{ChevronDown}} @size=\"sm\" class=\"select-trigger-icon_ebb583c5d\" />\n  </popover.Trigger>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"select-popover-content_ebb583c5d\">\n    <div id={{this.listboxId}} role=\"listbox\" class=\"select-listbox_ebb583c5d\" tabindex=\"-1\" data-test-select-listbox>\n      {{yield (hash Option=(component SelectOption ctx=this.context) OptionGroup=SelectOptionGroup isOpen=this.isOpen selectedValue=this.selectedValue)}}\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        on,
+        Icon,
+        ChevronDown,
+        hash,
+        SelectOption,
+        SelectOptionGroup
+      })
+    }), this);
+  }
+}
+
+export { SelectOption, SelectOptionGroup, Select as default };
+//# sourceMappingURL=select.js.map

package/dist/form/select.js.map

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

package/dist/form/text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css

@@ -0,0 +1,31 @@
+/* <inline>/src/form/text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css */
+
+  .text-field_e2680f9ba {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    width: 100%;
+  }
+
+  .text-field-footer_e2680f9ba {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--spacing-2);
+    min-height: var(--line-height-normal);
+  }
+
+  .text-field-footer_e2680f9ba:empty {
+    display: none;
+  }
+
+  .text-field-character-count_e2680f9ba {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .text-field_e2680f9ba[data-over-limit="true"] .text-field-character-count_e2680f9ba {
+    color: var(--color-text-critical);
+  }

package/dist/form/text-field.js

@@ -0,0 +1,141 @@
+import "./text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import Label from './label.js';
+import Input from './input.js';
+import Textarea from './textarea.js';
+import HelpText from './help-text.js';
+import ErrorMessage from './error-message.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class TextField extends Component {
+  static {
+    g(this.prototype, "internalValue", [tracked]);
+  }
+  #internalValue = (i(this, "internalValue"), void 0);
+  id = this.args.id ?? guidFor(this);
+  constructor(owner, args) {
+    super(owner, args);
+    this.internalValue = args.value ?? args.defaultValue ?? '';
+  }
+  get helpTextId() {
+    return `${this.id}-help-text`;
+  }
+  get errorMessageId() {
+    return `${this.id}-error-message`;
+  }
+  get ariaDescribedBy() {
+    const ids = [];
+    if (this.args.helpText) {
+      ids.push(this.helpTextId);
+    }
+    if (this.args.error) {
+      ids.push(this.errorMessageId);
+    }
+    return ids.length > 0 ? ids.join(' ') : '';
+  }
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get isDisabled() {
+    return this.args.isDisabled ?? false;
+  }
+  get isRequired() {
+    return this.args.isRequired ?? false;
+  }
+  get isReadOnly() {
+    return this.args.isReadOnly ?? false;
+  }
+  get isLabelHidden() {
+    return this.args.labelVisibility === 'hidden';
+  }
+  get rows() {
+    return this.args.rows ?? 3;
+  }
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  get currentValue() {
+    return this.isControlled ? this.args.value ?? '' : this.internalValue;
+  }
+  get characterCount() {
+    return this.currentValue.length;
+  }
+  get isOverLimit() {
+    if (this.args.maxLength === undefined) return false;
+    return this.characterCount > this.args.maxLength;
+  }
+  get showFooter() {
+    return !!this.args.error || !!this.args.helpText || !!this.args.showCharacterCount;
+  }
+  // Handler for Textarea (receives value as first arg)
+  handleTextareaInput(value, event) {
+    if (!this.isControlled) {
+      this.internalValue = value;
+    }
+    this.args.onInput?.(value, event);
+  }
+  static {
+    n(this.prototype, "handleTextareaInput", [action]);
+  }
+  handleTextareaChange(value, event) {
+    this.args.onChange?.(value, event);
+  }
+  // Handler for Input (receives native DOM event)
+  static {
+    n(this.prototype, "handleTextareaChange", [action]);
+  }
+  handleInputEvent(event) {
+    const target = event.target;
+    const value = target.value;
+    if (!this.isControlled) {
+      this.internalValue = value;
+    }
+    this.args.onInput?.(value, event);
+  }
+  static {
+    n(this.prototype, "handleInputEvent", [action]);
+  }
+  handleChangeEvent(event) {
+    const target = event.target;
+    this.args.onChange?.(target.value, event);
+  }
+  static {
+    n(this.prototype, "handleChangeEvent", [action]);
+  }
+  handleFocus(event) {
+    this.args.onFocus?.(event);
+  }
+  static {
+    n(this.prototype, "handleFocus", [action]);
+  }
+  handleBlur(event) {
+    this.args.onBlur?.(event);
+  }
+  static {
+    n(this.prototype, "handleBlur", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"text-field_e2680f9ba\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-over-limit={{if this.isOverLimit \"true\" \"false\"}} data-test-text-field ...attributes>\n  <Label @for={{this.id}} @isRequired={{this.isRequired}} @isDisabled={{this.isDisabled}} @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </Label>\n\n  {{#if @multiline}}\n    <FormTextarea id={{this.id}} @size={{@size}} @variant={{@variant}} @value={{this.currentValue}} @placeholder={{@placeholder}} @isDisabled={{this.isDisabled}} @isReadOnly={{this.isReadOnly}} @isRequired={{this.isRequired}} @isInvalid={{this.isInvalid}} @rows={{this.rows}} @autoGrow={{@autoResize}} @maxLength={{@maxLength}} @name={{@name}} @onInput={{this.handleTextareaInput}} @onChange={{this.handleTextareaChange}} @onFocus={{this.handleFocus}} @onBlur={{this.handleBlur}} aria-describedby={{if this.ariaDescribedBy this.ariaDescribedBy}} />\n  {{else}}\n    <FormInput id={{this.id}} @type={{@type}} @size={{@size}} @variant={{@variant}} @value={{this.currentValue}} @placeholder={{@placeholder}} @isDisabled={{this.isDisabled}} @isReadOnly={{this.isReadOnly}} @isRequired={{this.isRequired}} @isInvalid={{this.isInvalid}} @maxLength={{@maxLength}} @autoComplete={{@autoComplete}} @name={{@name}} aria-describedby={{if this.ariaDescribedBy this.ariaDescribedBy}} {{on \"input\" this.handleInputEvent}} {{on \"change\" this.handleChangeEvent}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}}>\n      <:prefix>{{yield to=\"prefix\"}}{{@prefix}}</:prefix>\n      <:suffix>{{yield to=\"suffix\"}}{{@suffix}}</:suffix>\n    </FormInput>\n  {{/if}}\n\n  {{#if this.showFooter}}\n    <div class=\"text-field-footer_e2680f9ba\" data-test-text-field-footer>\n      {{#if @error}}\n        <ErrorMessage id={{this.errorMessageId}} @isInvalid={{this.isInvalid}}>\n          {{@error}}\n        </ErrorMessage>\n      {{else if @helpText}}\n        <HelpText id={{this.helpTextId}}>\n          {{@helpText}}\n        </HelpText>\n      {{/if}}\n\n      {{#if @showCharacterCount}}\n        <span class=\"text-field-character-count_e2680f9ba\" aria-live=\"polite\" data-test-character-count>\n          {{this.characterCount}}{{#if @maxLength}}/{{@maxLength}}{{/if}}\n        </span>\n      {{/if}}\n    </div>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        Label,
+        FormTextarea: Textarea,
+        FormInput: Input,
+        on,
+        ErrorMessage,
+        HelpText
+      })
+    }), this);
+  }
+}
+
+export { TextField as default };
+//# sourceMappingURL=text-field.js.map

package/dist/form/text-field.js.map

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