@tachui/core 0.7.0-alpha1

package/dist/components/Menu.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");const y=require("../reactive/effect.cjs"),b=require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");require("../runtime/component.cjs");require("../runtime/context.cjs");require("../runtime/dev-tools.cjs");require("../runtime/dom-bridge.cjs");require("../runtime/error-boundary.cjs");require("../runtime/error-reporting.cjs");require("../runtime/performance.cjs");const d=require("../runtime/renderer.cjs");require("../runtime/element-override.cjs");require("../runtime/semantic-role-manager.cjs");require("../runtime/development-warnings.cjs");const g=require("../lifecycle/hooks.cjs"),I=require("./wrapper.cjs");var v=Object.defineProperty,O=(r,e,t)=>e in r?v(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,c=(r,e,t)=>O(r,typeof e!="symbol"?e+"":e,t);const f={colors:{background:"#FFFFFF",surface:"#F8F9FA",text:"#1A1A1A",textSecondary:"#6B7280",textDisabled:"#A0A0A0",textDestructive:"#FF3B30",border:"#E5E5E5",hover:"#F0F0F0",active:"#E3F2FD",separator:"#E5E5E5",shortcut:"#8E8E93",backdrop:"rgba(0, 0, 0, 0.1)"},spacing:{padding:8,itemPadding:12,gap:4},borderRadius:8,minWidth:200,maxWidth:320,itemHeight:36,shadow:"0 4px 12px rgba(0, 0, 0, 0.15)",backdropBlur:"blur(2px)"};class E{constructor(e){c(this,"type","component"),c(this,"id"),c(this,"props"),c(this,"cleanup",[]),c(this,"theme",f),c(this,"isOpenSignal",b.createSignal(!1)),c(this,"focusedIndex",-1),c(this,"menuElement",null),c(this,"triggerElement",null),c(this,"handleKeyDown",t=>{if(!this.isOpen())return;const i=this.getVisibleItems();switch(t.key){case"Escape":(this.props.escapeKeyCloses??!0)&&(t.preventDefault(),this.setIsOpenValue(!1));break;case"ArrowDown":t.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,i.length-1),this.updateItemFocus();break;case"ArrowUp":t.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.updateItemFocus();break;case"Enter":case" ":if(this.focusedIndex>=0&&this.focusedIndex<i.length){t.preventDefault();const n=this.menuElement?.querySelector(`[data-menu-item-index="${this.focusedIndex}"]`);n&&n.click()}break;case"Home":t.preventDefault(),this.focusedIndex=0,this.updateItemFocus();break;case"End":t.preventDefault(),this.focusedIndex=i.length-1,this.updateItemFocus();break}}),c(this,"handleClickOutside",t=>{if(!(this.props.closeOnClickOutside??!0))return;const i=t.target,n=this.menuElement?.contains(i),s=this.triggerElement?.contains(i);!n&&!s&&this.setIsOpenValue(!1)}),c(this,"setIsOpenValue",t=>{this.props.isOpen?typeof this.props.isOpen=="function"&&this.props.isOpen(t):this.setIsOpen(t)}),this.props=e,this.id=`menu-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,this.props.isOpen&&(this.isOpenSignal=[this.props.isOpen,(t=>{typeof this.props.isOpen=="function"&&this.props.isOpen(typeof t=="function"?t(this.props.isOpen()):t)})]),g.useLifecycle(this,{onDOMReady:(t,i)=>{i&&(this.setupMenuPositioning(i),this.setupMenuAnimations(i))}})}get isOpen(){return this.isOpenSignal[0]}get setIsOpen(){return this.isOpenSignal[1]}resolveValue(e){return b.isSignal(e)?e():e}setupMenuPositioning(e){this.cleanup||(this.cleanup=[]),g.setupPositioning(this,`[data-menu-trigger="${this.id}"]`,`[data-menu-content="${this.id}"]`,(t,i)=>this.calculatePosition(t,i))}setupMenuAnimations(e){this.cleanup||(this.cleanup=[])}getVisibleItems(){return this.props.items.filter(e=>e.title!=="---")}createMenuItem(e,t){if(e.title==="---")return d.h("div",{role:"separator",style:{height:"1px",backgroundColor:this.theme.colors.separator,margin:`${this.theme.spacing.gap}px 0`}});const i=this.resolveValue(e.disabled??!1),n=this.resolveValue(e.title),s=d.h("div",{role:"menuitem",tabindex:i?"-1":"0","aria-disabled":i,"data-menu-item-index":t,style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:`${this.theme.spacing.itemPadding}px`,minHeight:`${this.theme.itemHeight}px`,fontSize:"14px",fontWeight:"400",color:i?this.theme.colors.textDisabled:e.destructive||e.role==="destructive"?this.theme.colors.textDestructive:this.theme.colors.text,cursor:i?"default":"pointer",borderRadius:`${this.theme.borderRadius/2}px`,transition:"all 150ms ease-out",userSelect:"none"},onclick:async u=>{if(!i){if(u.preventDefault(),u.stopPropagation(),e.action)try{await e.action()}catch(o){console.error("Menu item action failed:",o)}(this.props.closeOnSelect??!0)&&this.setIsOpenValue(!1)}},onmouseenter:()=>{if(!i){this.focusedIndex=t,this.updateItemFocus();const u=s.element;u&&(u.style.backgroundColor=this.theme.colors.hover)}},onmouseleave:()=>{if(!i){const u=s.element;u&&(u.style.backgroundColor="transparent")}}}),a=d.h("div",{style:{display:"flex",alignItems:"center",gap:`${this.theme.spacing.gap*2}px`}});if(e.systemImage){const o=d.h("span",{style:{fontSize:"16px",color:"inherit"}}).element;o&&(o.textContent=e.systemImage);const x=a.element;x&&o&&x.appendChild(o)}const l=d.h("span").element;l&&(l.textContent=n);const h=a.element;h&&l&&h.appendChild(l);const m=s.element;if(m&&h&&m.appendChild(h),e.shortcut){const o=d.h("span",{style:{fontSize:"12px",color:this.theme.colors.shortcut,fontFamily:"monospace"}}).element;o&&(o.textContent=e.shortcut),m&&o&&m.appendChild(o)}if(e.submenu&&e.submenu.length>0){const o=d.h("span",{style:{fontSize:"12px",color:this.theme.colors.textSecondary}}).element;o&&(o.textContent="▶"),m&&o&&m.appendChild(o)}return s}updateItemFocus(){if(!this.menuElement)return;this.menuElement.querySelectorAll('[role="menuitem"]').forEach((t,i)=>{const n=t;i===this.focusedIndex?(n.style.backgroundColor=this.theme.colors.hover,n.focus()):n.style.backgroundColor="transparent"})}calculatePosition(e,t){const i=e.getBoundingClientRect(),n=t.getBoundingClientRect(),s={width:window.innerWidth,height:window.innerHeight},a=this.props.placement??"bottom",p=this.props.offset??{x:0,y:4};let l=0,h=0;switch(a){case"bottom":case"bottom-start":case"bottom-end":h=i.bottom+p.y;break;case"top":case"top-start":case"top-end":h=i.top-n.height-p.y;break;case"right":case"right-start":case"right-end":l=i.right+p.x;break;case"left":case"left-start":case"left-end":l=i.left-n.width-p.x;break}switch(a){case"bottom":case"top":l=i.left+(i.width-n.width)/2;break;case"bottom-start":case"top-start":l=i.left;break;case"bottom-end":case"top-end":l=i.right-n.width;break;case"right":case"left":h=i.top+(i.height-n.height)/2;break;case"right-start":case"left-start":h=i.top;break;case"right-end":case"left-end":h=i.bottom-n.height;break}return(this.props.flip??!0)&&(h+n.height>s.height&&i.top>n.height&&(h=i.top-n.height-p.y),l+n.width>s.width&&i.left>n.width&&(l=i.left-n.width-p.x)),(this.props.shift??!0)&&(l=Math.max(8,Math.min(l,s.width-n.width-8)),h=Math.max(8,Math.min(h,s.height-n.height-8))),{x:l,y:h}}createMenuContent(){const e=d.h("div",{role:"menu","aria-labelledby":`${this.id}-trigger`,"data-menu-id":this.id,"data-menu-content":this.id,style:{position:"fixed",backgroundColor:this.theme.colors.background,border:`1px solid ${this.theme.colors.border}`,borderRadius:`${this.theme.borderRadius}px`,boxShadow:this.theme.shadow,minWidth:`${this.theme.minWidth}px`,maxWidth:`${this.theme.maxWidth}px`,padding:`${this.theme.spacing.padding}px`,zIndex:"9999",opacity:"0",transform:"scale(0.95)",transformOrigin:"top",transition:`all ${this.props.animationDuration||150}ms cubic-bezier(0.16, 1, 0.3, 1)`}});return this.props.items.forEach((t,i)=>{const n=this.createMenuItem(t,i),s=e.element,a=n.element;s&&a&&s.appendChild(a)}),this.menuElement=e.element,e}setupTrigger(){let e;if(typeof this.props.trigger=="function"){const t=this.props.trigger();if("render"in t){const i=t.render();Array.isArray(i)?e=i[0]?.element:e=i instanceof HTMLElement?i:i?.element}else e=t}else if("render"in this.props.trigger){const t=this.props.trigger.render();Array.isArray(t)?e=t[0]?.element:e=t instanceof HTMLElement?t:t?.element}else e=this.props.trigger;return e.id=e.id||`${this.id}-trigger`,e.setAttribute("aria-haspopup","menu"),e.setAttribute("aria-expanded",String(this.isOpen())),e.setAttribute("data-menu-trigger",this.id),e.addEventListener("click",t=>{t.preventDefault(),t.stopPropagation(),this.setIsOpenValue(!this.isOpen())}),this.triggerElement=e,e}render(){const e=d.h("div",{style:{position:"relative",display:"inline-block"}}),t=this.setupTrigger();return e.element&&t&&e.element.appendChild(t),y.createEffect(()=>{if(this.isOpen()){const s=this.createMenuContent().element;if(s&&(document.body.appendChild(s),this.menuElement=s),this.triggerElement&&this.menuElement){const a=this.calculatePosition(this.triggerElement,this.menuElement);this.menuElement.style.left=`${a.x}px`,this.menuElement.style.top=`${a.y}px`,g.AnimationManager.scaleIn(this,this.menuElement,this.props.animationDuration||150),this.focusedIndex=0,g.FocusManager.focusWhenReady(this,'[role="menuitem"]',this.menuElement)}document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleClickOutside),this.triggerElement?.setAttribute("aria-expanded","true")}else{if(this.menuElement){this.menuElement.style.opacity="0",this.menuElement.style.transform="scale(0.95)";const n=()=>{this.menuElement?.parentNode&&(document.body.removeChild(this.menuElement),this.menuElement=null),this.menuElement?.removeEventListener("transitionend",n)};this.menuElement.addEventListener("transitionend",n);const s=setTimeout(()=>{this.menuElement?.removeEventListener("transitionend",n),n()},this.props.animationDuration||150);this.cleanup||(this.cleanup=[]),this.cleanup.push(()=>{s&&clearTimeout(s)})}document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleClickOutside),this.triggerElement?.setAttribute("aria-expanded","false"),this.focusedIndex=-1}}),e}}function k(r){return I.withModifiers(new E(r))}const w={separator(){return{title:"---"}},destructive(r,e,t){return{title:r,action:e,destructive:!0,systemImage:t}},withShortcut(r,e,t,i){return{title:r,shortcut:e,action:t,systemImage:i}},contextMenu(r,e){const[t,i]=b.createSignal(!1),[n,s]=b.createSignal({x:0,y:0});r.addEventListener("contextmenu",a=>{a.preventDefault(),s({x:a.clientX,y:a.clientY}),i(!0)}),console.log("Context menu requested",{items:e,position:n(),isOpen:t()})}},M={theme:f,createTheme(r){return{...f,...r}},darkTheme(){return{...f,colors:{...f.colors,background:"#2A2A2A",surface:"#3A3A3A",text:"#FFFFFF",textSecondary:"#A0A0A0",border:"#404040",hover:"#404040",active:"#0066CC"}}}};exports.Menu=k;exports.MenuComponent=E;exports.MenuStyles=M;exports.MenuUtils=w;exports.defaultMenuTheme=f;
+//# sourceMappingURL=Menu.cjs.map

package/dist/components/Menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs","sources":["../../src/components/Menu.ts"],"sourcesContent":["/**\n * Menu Component\n *\n * SwiftUI-inspired Menu component with dropdowns, context menus,\n * positioning, and keyboard navigation support.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { createEffect, createSignal, isSignal } from '../reactive'\nimport type { Signal } from '../reactive/types'\nimport { h } from '../runtime'\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport { withModifiers } from './wrapper'\nimport { useLifecycle, AnimationManager, FocusManager, setupPositioning } from '../lifecycle/hooks'\n\n/**\n * Menu item configuration\n */\nexport interface MenuItem {\n  id?: string\n  title: string | Signal<string>\n  systemImage?: string\n  shortcut?: string\n  disabled?: boolean | Signal<boolean>\n  destructive?: boolean\n  role?: 'default' | 'destructive' | 'cancel'\n  action?: () => void | Promise<void>\n  submenu?: MenuItem[]\n}\n\n/**\n * Menu positioning options\n */\nexport type MenuPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n\n/**\n * Menu component properties\n */\nexport interface MenuProps extends ComponentProps {\n  // Content\n  items: MenuItem[]\n\n  // Trigger\n  trigger: ComponentInstance | HTMLElement | (() => ComponentInstance | HTMLElement)\n\n  // Visibility\n  isOpen?: Signal<boolean>\n\n  // Behavior\n  placement?: MenuPlacement\n  closeOnSelect?: boolean\n  closeOnClickOutside?: boolean\n  escapeKeyCloses?: boolean\n\n  // Positioning\n  offset?: { x: number; y: number }\n  flip?: boolean\n  shift?: boolean\n\n  // Animation\n  animationDuration?: number\n\n  // Accessibility\n  accessibilityLabel?: string\n}\n\n/**\n * Menu theme configuration\n */\nexport interface MenuTheme {\n  colors: {\n    background: string\n    surface: string\n    text: string\n    textSecondary: string\n    textDisabled: string\n    textDestructive: string\n    border: string\n    hover: string\n    active: string\n    separator: string\n    shortcut: string\n    backdrop: string\n  }\n  spacing: {\n    padding: number\n    itemPadding: number\n    gap: number\n  }\n  borderRadius: number\n  minWidth: number\n  maxWidth: number\n  itemHeight: number\n  shadow: string\n  backdropBlur: string\n}\n\n/**\n * Default menu theme\n */\nexport const defaultMenuTheme: MenuTheme = {\n  colors: {\n    background: '#FFFFFF',\n    surface: '#F8F9FA',\n    text: '#1A1A1A',\n    textSecondary: '#6B7280',\n    textDisabled: '#A0A0A0',\n    textDestructive: '#FF3B30',\n    border: '#E5E5E5',\n    hover: '#F0F0F0',\n    active: '#E3F2FD',\n    separator: '#E5E5E5',\n    shortcut: '#8E8E93',\n    backdrop: 'rgba(0, 0, 0, 0.1)',\n  },\n  spacing: {\n    padding: 8,\n    itemPadding: 12,\n    gap: 4,\n  },\n  borderRadius: 8,\n  minWidth: 200,\n  maxWidth: 320,\n  itemHeight: 36,\n  shadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n  backdropBlur: 'blur(2px)',\n}\n\n/**\n * Menu component implementation\n */\nexport class MenuComponent implements ComponentInstance<MenuProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public readonly props: MenuProps\n  public cleanup: (() => void)[] = []\n  private theme: MenuTheme = defaultMenuTheme\n  private isOpenSignal = createSignal(false)\n  private get isOpen() {\n    return this.isOpenSignal[0]\n  }\n  private get setIsOpen() {\n    return this.isOpenSignal[1]\n  }\n  private focusedIndex = -1\n  private menuElement: HTMLElement | null = null\n  private triggerElement: HTMLElement | null = null\n\n  constructor(props: MenuProps) {\n    this.props = props\n    this.id = `menu-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n\n    // Use provided isOpen signal or internal one\n    if (this.props.isOpen) {\n      this.isOpenSignal = [\n        this.props.isOpen,\n        ((value: boolean | ((prev: boolean) => boolean)) => {\n          if (typeof this.props.isOpen === 'function') {\n            ;(this.props.isOpen as any)(\n              typeof value === 'function' ? value((this.props.isOpen as any)()) : value\n            )\n          }\n        }) as any,\n      ]\n    }\n\n    // ENHANCED: Set up lifecycle hooks for menu positioning and animations\n    useLifecycle(this, {\n      onDOMReady: (_elements, primaryElement) => {\n        if (primaryElement) {\n          // Set up menu positioning when DOM is ready\n          this.setupMenuPositioning(primaryElement)\n          \n          // Set up animation and focus management\n          this.setupMenuAnimations(primaryElement)\n        }\n      }\n    })\n  }\n\n  private resolveValue<T>(value: T | Signal<T>): T {\n    return isSignal(value) ? value() : value\n  }\n\n  /**\n   * Set up menu positioning using enhanced lifecycle (ENHANCED Phase 3)\n   */\n  private setupMenuPositioning(_containerElement: Element): void {\n    // Positioning is now handled via onDOMReady hooks when menu elements are guaranteed to exist\n    // No more setTimeout positioning hacks needed\n    if (!this.cleanup) this.cleanup = []\n    \n    // Set up positioning calculation that runs when both trigger and menu exist\n    setupPositioning(\n      this,\n      `[data-menu-trigger=\"${this.id}\"]`,\n      `[data-menu-content=\"${this.id}\"]`,\n      (trigger, menu) => this.calculatePosition(trigger as HTMLElement, menu as HTMLElement)\n    )\n  }\n\n  /**\n   * Set up menu animations using enhanced lifecycle (ENHANCED Phase 3)\n   */\n  private setupMenuAnimations(_containerElement: Element): void {\n    // Animation coordination now handled by AnimationManager instead of setTimeout\n    // Focus management handled by FocusManager instead of setTimeout\n    if (!this.cleanup) this.cleanup = []\n  }\n\n  private getVisibleItems(): MenuItem[] {\n    return this.props.items.filter((item) => item.title !== '---') // Exclude separators\n  }\n\n  private createMenuItem(item: MenuItem, index: number): DOMNode {\n    if (item.title === '---') {\n      // Separator\n      return h('div', {\n        role: 'separator',\n        style: {\n          height: '1px',\n          backgroundColor: this.theme.colors.separator,\n          margin: `${this.theme.spacing.gap}px 0`,\n        },\n      })\n    }\n\n    const isDisabled = this.resolveValue(item.disabled ?? false)\n    const title = this.resolveValue(item.title)\n\n    const menuItem = h('div', {\n      role: 'menuitem',\n      tabindex: isDisabled ? '-1' : '0',\n      'aria-disabled': isDisabled,\n      'data-menu-item-index': index,\n      style: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        padding: `${this.theme.spacing.itemPadding}px`,\n        minHeight: `${this.theme.itemHeight}px`,\n        fontSize: '14px',\n        fontWeight: '400',\n        color: isDisabled\n          ? this.theme.colors.textDisabled\n          : item.destructive || item.role === 'destructive'\n            ? this.theme.colors.textDestructive\n            : this.theme.colors.text,\n        cursor: isDisabled ? 'default' : 'pointer',\n        borderRadius: `${this.theme.borderRadius / 2}px`,\n        transition: 'all 150ms ease-out',\n        userSelect: 'none',\n      },\n      onclick: async (e: Event) => {\n        if (isDisabled) return\n\n        e.preventDefault()\n        e.stopPropagation()\n\n        if (item.action) {\n          try {\n            await item.action()\n          } catch (error) {\n            console.error('Menu item action failed:', error)\n          }\n        }\n\n        if (this.props.closeOnSelect ?? true) {\n          this.setIsOpenValue(false)\n        }\n      },\n      onmouseenter: () => {\n        if (!isDisabled) {\n          this.focusedIndex = index\n          this.updateItemFocus()\n          const element = menuItem.element as HTMLElement\n          if (element) element.style.backgroundColor = this.theme.colors.hover\n        }\n      },\n      onmouseleave: () => {\n        if (!isDisabled) {\n          const element = menuItem.element as HTMLElement\n          if (element) element.style.backgroundColor = 'transparent'\n        }\n      },\n    })\n\n    // Content container\n    const content = h('div', {\n      style: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: `${this.theme.spacing.gap * 2}px`,\n      },\n    })\n\n    // System image/icon\n    if (item.systemImage) {\n      const icon = h('span', {\n        style: {\n          fontSize: '16px',\n          color: 'inherit',\n        },\n      })\n      const iconElement = icon.element as HTMLElement\n      if (iconElement) iconElement.textContent = item.systemImage\n      const contentElement = content.element as HTMLElement\n      if (contentElement && iconElement) contentElement.appendChild(iconElement)\n    }\n\n    // Title\n    const titleElement = h('span')\n    const titleElementDOM = titleElement.element as HTMLElement\n    if (titleElementDOM) titleElementDOM.textContent = title\n    const contentElement = content.element as HTMLElement\n    if (contentElement && titleElementDOM) contentElement.appendChild(titleElementDOM)\n\n    const menuItemElement = menuItem.element as HTMLElement\n    if (menuItemElement && contentElement) menuItemElement.appendChild(contentElement)\n\n    // Keyboard shortcut\n    if (item.shortcut) {\n      const shortcut = h('span', {\n        style: {\n          fontSize: '12px',\n          color: this.theme.colors.shortcut,\n          fontFamily: 'monospace',\n        },\n      })\n      const shortcutElement = shortcut.element as HTMLElement\n      if (shortcutElement) shortcutElement.textContent = item.shortcut\n      if (menuItemElement && shortcutElement) menuItemElement.appendChild(shortcutElement)\n    }\n\n    // Submenu indicator\n    if (item.submenu && item.submenu.length > 0) {\n      const indicator = h('span', {\n        style: {\n          fontSize: '12px',\n          color: this.theme.colors.textSecondary,\n        },\n      })\n      const indicatorElement = indicator.element as HTMLElement\n      if (indicatorElement) indicatorElement.textContent = '▶'\n      if (menuItemElement && indicatorElement) menuItemElement.appendChild(indicatorElement)\n    }\n\n    return menuItem\n  }\n\n  private updateItemFocus(): void {\n    if (!this.menuElement) return\n\n    const items = this.menuElement.querySelectorAll('[role=\"menuitem\"]')\n    items.forEach((item, index) => {\n      const element = item as HTMLElement\n      if (index === this.focusedIndex) {\n        element.style.backgroundColor = this.theme.colors.hover\n        element.focus()\n      } else {\n        element.style.backgroundColor = 'transparent'\n      }\n    })\n  }\n\n  private handleKeyDown = (e: KeyboardEvent): void => {\n    if (!this.isOpen()) return\n\n    const visibleItems = this.getVisibleItems()\n\n    switch (e.key) {\n      case 'Escape':\n        if (this.props.escapeKeyCloses ?? true) {\n          e.preventDefault()\n          this.setIsOpenValue(false)\n        }\n        break\n\n      case 'ArrowDown':\n        e.preventDefault()\n        this.focusedIndex = Math.min(this.focusedIndex + 1, visibleItems.length - 1)\n        this.updateItemFocus()\n        break\n\n      case 'ArrowUp':\n        e.preventDefault()\n        this.focusedIndex = Math.max(this.focusedIndex - 1, 0)\n        this.updateItemFocus()\n        break\n\n      case 'Enter':\n      case ' ':\n        if (this.focusedIndex >= 0 && this.focusedIndex < visibleItems.length) {\n          e.preventDefault()\n          // const item = visibleItems[this.focusedIndex]\n          const menuItem = this.menuElement?.querySelector(\n            `[data-menu-item-index=\"${this.focusedIndex}\"]`\n          ) as HTMLElement\n          if (menuItem) {\n            menuItem.click()\n          }\n        }\n        break\n\n      case 'Home':\n        e.preventDefault()\n        this.focusedIndex = 0\n        this.updateItemFocus()\n        break\n\n      case 'End':\n        e.preventDefault()\n        this.focusedIndex = visibleItems.length - 1\n        this.updateItemFocus()\n        break\n    }\n  }\n\n  private calculatePosition(trigger: HTMLElement, menu: HTMLElement): { x: number; y: number } {\n    const triggerRect = trigger.getBoundingClientRect()\n    const menuRect = menu.getBoundingClientRect()\n    const viewport = {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    }\n\n    const placement = this.props.placement ?? 'bottom'\n    const offset = this.props.offset ?? { x: 0, y: 4 }\n\n    let x = 0\n    let y = 0\n\n    // Calculate base position based on placement\n    switch (placement) {\n      case 'bottom':\n      case 'bottom-start':\n      case 'bottom-end':\n        y = triggerRect.bottom + offset.y\n        break\n      case 'top':\n      case 'top-start':\n      case 'top-end':\n        y = triggerRect.top - menuRect.height - offset.y\n        break\n      case 'right':\n      case 'right-start':\n      case 'right-end':\n        x = triggerRect.right + offset.x\n        break\n      case 'left':\n      case 'left-start':\n      case 'left-end':\n        x = triggerRect.left - menuRect.width - offset.x\n        break\n    }\n\n    switch (placement) {\n      case 'bottom':\n      case 'top':\n        x = triggerRect.left + (triggerRect.width - menuRect.width) / 2\n        break\n      case 'bottom-start':\n      case 'top-start':\n        x = triggerRect.left\n        break\n      case 'bottom-end':\n      case 'top-end':\n        x = triggerRect.right - menuRect.width\n        break\n      case 'right':\n      case 'left':\n        y = triggerRect.top + (triggerRect.height - menuRect.height) / 2\n        break\n      case 'right-start':\n      case 'left-start':\n        y = triggerRect.top\n        break\n      case 'right-end':\n      case 'left-end':\n        y = triggerRect.bottom - menuRect.height\n        break\n    }\n\n    // Handle flipping and shifting if enabled\n    if (this.props.flip ?? true) {\n      if (y + menuRect.height > viewport.height && triggerRect.top > menuRect.height) {\n        y = triggerRect.top - menuRect.height - offset.y\n      }\n      if (x + menuRect.width > viewport.width && triggerRect.left > menuRect.width) {\n        x = triggerRect.left - menuRect.width - offset.x\n      }\n    }\n\n    if (this.props.shift ?? true) {\n      x = Math.max(8, Math.min(x, viewport.width - menuRect.width - 8))\n      y = Math.max(8, Math.min(y, viewport.height - menuRect.height - 8))\n    }\n\n    return { x, y }\n  }\n\n  private createMenuContent(): DOMNode {\n    const menu = h('div', {\n      role: 'menu',\n      'aria-labelledby': `${this.id}-trigger`,\n      'data-menu-id': this.id,\n      'data-menu-content': this.id, // ENHANCED: Add data attribute for lifecycle hooks\n      style: {\n        position: 'fixed',\n        backgroundColor: this.theme.colors.background,\n        border: `1px solid ${this.theme.colors.border}`,\n        borderRadius: `${this.theme.borderRadius}px`,\n        boxShadow: this.theme.shadow,\n        minWidth: `${this.theme.minWidth}px`,\n        maxWidth: `${this.theme.maxWidth}px`,\n        padding: `${this.theme.spacing.padding}px`,\n        zIndex: '9999',\n        opacity: '0',\n        transform: 'scale(0.95)',\n        transformOrigin: 'top',\n        transition: `all ${this.props.animationDuration || 150}ms cubic-bezier(0.16, 1, 0.3, 1)`,\n      },\n    })\n\n    // Create menu items\n    this.props.items.forEach((item, index) => {\n      const menuItem = this.createMenuItem(item, index)\n      const menuElement = menu.element as HTMLElement\n      const menuItemElement = menuItem.element as HTMLElement\n      if (menuElement && menuItemElement) {\n        menuElement.appendChild(menuItemElement)\n      }\n    })\n\n    this.menuElement = menu.element as HTMLElement\n    return menu\n  }\n\n  private setupTrigger(): HTMLElement {\n    let trigger: HTMLElement\n\n    if (typeof this.props.trigger === 'function') {\n      const result = this.props.trigger()\n      if ('render' in result) {\n        const rendered = result.render()\n        if (Array.isArray(rendered)) {\n          trigger = rendered[0]?.element as HTMLElement\n        } else {\n          trigger = rendered instanceof HTMLElement ? rendered : (rendered?.element as HTMLElement)\n        }\n      } else {\n        trigger = result as HTMLElement\n      }\n    } else if ('render' in this.props.trigger) {\n      const rendered = this.props.trigger.render()\n      if (Array.isArray(rendered)) {\n        trigger = rendered[0]?.element as HTMLElement\n      } else {\n        trigger = rendered instanceof HTMLElement ? rendered : (rendered?.element as HTMLElement)\n      }\n    } else {\n      trigger = this.props.trigger as HTMLElement\n    }\n\n    trigger.id = trigger.id || `${this.id}-trigger`\n    trigger.setAttribute('aria-haspopup', 'menu')\n    trigger.setAttribute('aria-expanded', String(this.isOpen()))\n    trigger.setAttribute('data-menu-trigger', this.id) // ENHANCED: Add data attribute for lifecycle hooks\n\n    trigger.addEventListener('click', (e) => {\n      e.preventDefault()\n      e.stopPropagation()\n      this.setIsOpenValue(!this.isOpen())\n    })\n\n    this.triggerElement = trigger\n    return trigger\n  }\n\n  render(): DOMNode {\n    const container = h('div', {\n      style: {\n        position: 'relative',\n        display: 'inline-block',\n      },\n    })\n\n    // Setup trigger\n    const trigger = this.setupTrigger()\n    if (container.element && trigger) {\n      ;(container.element as HTMLElement).appendChild(trigger)\n    }\n\n    // Create reactive effect for menu visibility\n    createEffect(() => {\n      const isOpenValue = this.isOpen()\n\n      if (isOpenValue) {\n        // Show menu\n        const menu = this.createMenuContent()\n        const menuElement = menu.element as HTMLElement\n        if (menuElement) {\n          document.body.appendChild(menuElement)\n          this.menuElement = menuElement\n        }\n\n        // ENHANCED: Position and animate menu using lifecycle hooks\n        if (this.triggerElement && this.menuElement) {\n          // Immediate positioning - no setTimeout needed\n          const position = this.calculatePosition(this.triggerElement, this.menuElement)\n          this.menuElement.style.left = `${position.x}px`\n          this.menuElement.style.top = `${position.y}px`\n          \n          // Use AnimationManager for smooth animation\n          AnimationManager.scaleIn(this, this.menuElement, this.props.animationDuration || 150)\n          \n          // Use FocusManager for proper focus handling\n          this.focusedIndex = 0\n          FocusManager.focusWhenReady(this, '[role=\"menuitem\"]', this.menuElement)\n        }\n\n        // Add event listeners\n        document.addEventListener('keydown', this.handleKeyDown)\n        document.addEventListener('click', this.handleClickOutside)\n\n        // Update trigger aria-expanded\n        this.triggerElement?.setAttribute('aria-expanded', 'true')\n      } else {\n        // ENHANCED: Hide menu using transition event listener instead of setTimeout\n        if (this.menuElement) {\n          this.menuElement.style.opacity = '0'\n          this.menuElement.style.transform = 'scale(0.95)'\n\n          // Use transition event listener for cleanup\n          const handleTransitionEnd = () => {\n            if (this.menuElement?.parentNode) {\n              document.body.removeChild(this.menuElement)\n              this.menuElement = null\n            }\n            this.menuElement?.removeEventListener('transitionend', handleTransitionEnd)\n          }\n          this.menuElement.addEventListener('transitionend', handleTransitionEnd)\n          \n          // Fallback timeout in case transition doesn't fire (rare edge case)\n          const fallbackTimeout = setTimeout(() => {\n            this.menuElement?.removeEventListener('transitionend', handleTransitionEnd)\n            handleTransitionEnd()\n          }, this.props.animationDuration || 150)\n          \n          // Store cleanup for fallback timeout\n          if (!this.cleanup) this.cleanup = []\n          this.cleanup.push(() => {\n            if (fallbackTimeout) clearTimeout(fallbackTimeout)\n          })\n        }\n\n        // Remove event listeners\n        document.removeEventListener('keydown', this.handleKeyDown)\n        document.removeEventListener('click', this.handleClickOutside)\n\n        // Update trigger aria-expanded\n        this.triggerElement?.setAttribute('aria-expanded', 'false')\n\n        // Reset focus index\n        this.focusedIndex = -1\n      }\n    })\n\n    return container\n  }\n\n  private handleClickOutside = (e: Event): void => {\n    if (!(this.props.closeOnClickOutside ?? true)) return\n\n    const target = e.target as Element\n    const isInsideMenu = this.menuElement?.contains(target)\n    const isInsideTrigger = this.triggerElement?.contains(target)\n\n    if (!isInsideMenu && !isInsideTrigger) {\n      this.setIsOpenValue(false)\n    }\n  }\n\n  private setIsOpenValue = (value: boolean): void => {\n    if (this.props.isOpen) {\n      // For controlled component, the signal setter should be used directly\n      if (typeof this.props.isOpen === 'function') {\n        ;(this.props.isOpen as any)(value)\n      }\n    } else {\n      this.setIsOpen(value)\n    }\n  }\n}\n\n/**\n * Create a Menu component\n */\nexport function Menu(\n  props: MenuProps\n): ModifiableComponent<MenuProps> & { modifier: ModifierBuilder<ModifiableComponent<MenuProps>> } {\n  return withModifiers(new MenuComponent(props))\n}\n\n/**\n * Menu utility functions and presets\n */\nexport const MenuUtils = {\n  /**\n   * Create a separator item\n   */\n  separator(): MenuItem {\n    return { title: '---' }\n  },\n\n  /**\n   * Create a destructive menu item\n   */\n  destructive(title: string, action: () => void, systemImage?: string): MenuItem {\n    return {\n      title,\n      action,\n      destructive: true,\n      systemImage,\n    }\n  },\n\n  /**\n   * Create a menu item with keyboard shortcut\n   */\n  withShortcut(\n    title: string,\n    shortcut: string,\n    action: () => void,\n    systemImage?: string\n  ): MenuItem {\n    return {\n      title,\n      shortcut,\n      action,\n      systemImage,\n    }\n  },\n\n  /**\n   * Create a context menu for right-click interactions\n   */\n  contextMenu(target: HTMLElement, items: MenuItem[]): void {\n    const [isOpen, setIsOpen] = createSignal(false)\n    const [position, setPosition] = createSignal({ x: 0, y: 0 })\n\n    target.addEventListener('contextmenu', (e) => {\n      e.preventDefault()\n      setPosition({ x: e.clientX, y: e.clientY })\n      setIsOpen(true)\n    })\n\n    // Note: This is a stub implementation\n    // Full context menu positioning would require additional DOM manipulation\n    console.log('Context menu requested', { items, position: position(), isOpen: isOpen() })\n  },\n}\n\n/**\n * Menu styles and theming\n */\nexport const MenuStyles = {\n  theme: defaultMenuTheme,\n\n  /**\n   * Create a custom menu theme\n   */\n  createTheme(overrides: Partial<MenuTheme>): MenuTheme {\n    return { ...defaultMenuTheme, ...overrides }\n  },\n\n  /**\n   * Dark theme preset\n   */\n  darkTheme(): MenuTheme {\n    return {\n      ...defaultMenuTheme,\n      colors: {\n        ...defaultMenuTheme.colors,\n        background: '#2A2A2A',\n        surface: '#3A3A3A',\n        text: '#FFFFFF',\n        textSecondary: '#A0A0A0',\n        border: '#404040',\n        hover: '#404040',\n        active: '#0066CC',\n      },\n    }\n  },\n}\n"],"names":["defaultMenuTheme","MenuComponent","props","__publicField","createSignal","e","visibleItems","menuItem","target","isInsideMenu","isInsideTrigger","value","useLifecycle","_elements","primaryElement","isSignal","_containerElement","setupPositioning","trigger","menu","item","index","h","isDisabled","title","error","element","content","iconElement","contentElement","titleElementDOM","menuItemElement","shortcutElement","indicatorElement","triggerRect","menuRect","viewport","placement","offset","x","y","menuElement","result","rendered","container","createEffect","position","AnimationManager","FocusManager","handleTransitionEnd","fallbackTimeout","Menu","withModifiers","MenuUtils","action","systemImage","shortcut","items","isOpen","setIsOpen","setPosition","MenuStyles","overrides"],"mappings":"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"}

package/dist/components/Menu.d.ts

@@ -0,0 +1,159 @@
+/**
+ * Menu Component
+ *
+ * SwiftUI-inspired Menu component with dropdowns, context menus,
+ * positioning, and keyboard navigation support.
+ */
+import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types';
+import type { Signal } from '../reactive/types';
+import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types';
+/**
+ * Menu item configuration
+ */
+export interface MenuItem {
+    id?: string;
+    title: string | Signal<string>;
+    systemImage?: string;
+    shortcut?: string;
+    disabled?: boolean | Signal<boolean>;
+    destructive?: boolean;
+    role?: 'default' | 'destructive' | 'cancel';
+    action?: () => void | Promise<void>;
+    submenu?: MenuItem[];
+}
+/**
+ * Menu positioning options
+ */
+export type MenuPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+/**
+ * Menu component properties
+ */
+export interface MenuProps extends ComponentProps {
+    items: MenuItem[];
+    trigger: ComponentInstance | HTMLElement | (() => ComponentInstance | HTMLElement);
+    isOpen?: Signal<boolean>;
+    placement?: MenuPlacement;
+    closeOnSelect?: boolean;
+    closeOnClickOutside?: boolean;
+    escapeKeyCloses?: boolean;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    flip?: boolean;
+    shift?: boolean;
+    animationDuration?: number;
+    accessibilityLabel?: string;
+}
+/**
+ * Menu theme configuration
+ */
+export interface MenuTheme {
+    colors: {
+        background: string;
+        surface: string;
+        text: string;
+        textSecondary: string;
+        textDisabled: string;
+        textDestructive: string;
+        border: string;
+        hover: string;
+        active: string;
+        separator: string;
+        shortcut: string;
+        backdrop: string;
+    };
+    spacing: {
+        padding: number;
+        itemPadding: number;
+        gap: number;
+    };
+    borderRadius: number;
+    minWidth: number;
+    maxWidth: number;
+    itemHeight: number;
+    shadow: string;
+    backdropBlur: string;
+}
+/**
+ * Default menu theme
+ */
+export declare const defaultMenuTheme: MenuTheme;
+/**
+ * Menu component implementation
+ */
+export declare class MenuComponent implements ComponentInstance<MenuProps> {
+    readonly type: "component";
+    readonly id: string;
+    readonly props: MenuProps;
+    cleanup: (() => void)[];
+    private theme;
+    private isOpenSignal;
+    private get isOpen();
+    private get setIsOpen();
+    private focusedIndex;
+    private menuElement;
+    private triggerElement;
+    constructor(props: MenuProps);
+    private resolveValue;
+    /**
+     * Set up menu positioning using enhanced lifecycle (ENHANCED Phase 3)
+     */
+    private setupMenuPositioning;
+    /**
+     * Set up menu animations using enhanced lifecycle (ENHANCED Phase 3)
+     */
+    private setupMenuAnimations;
+    private getVisibleItems;
+    private createMenuItem;
+    private updateItemFocus;
+    private handleKeyDown;
+    private calculatePosition;
+    private createMenuContent;
+    private setupTrigger;
+    render(): DOMNode;
+    private handleClickOutside;
+    private setIsOpenValue;
+}
+/**
+ * Create a Menu component
+ */
+export declare function Menu(props: MenuProps): ModifiableComponent<MenuProps> & {
+    modifier: ModifierBuilder<ModifiableComponent<MenuProps>>;
+};
+/**
+ * Menu utility functions and presets
+ */
+export declare const MenuUtils: {
+    /**
+     * Create a separator item
+     */
+    separator(): MenuItem;
+    /**
+     * Create a destructive menu item
+     */
+    destructive(title: string, action: () => void, systemImage?: string): MenuItem;
+    /**
+     * Create a menu item with keyboard shortcut
+     */
+    withShortcut(title: string, shortcut: string, action: () => void, systemImage?: string): MenuItem;
+    /**
+     * Create a context menu for right-click interactions
+     */
+    contextMenu(target: HTMLElement, items: MenuItem[]): void;
+};
+/**
+ * Menu styles and theming
+ */
+export declare const MenuStyles: {
+    theme: MenuTheme;
+    /**
+     * Create a custom menu theme
+     */
+    createTheme(overrides: Partial<MenuTheme>): MenuTheme;
+    /**
+     * Dark theme preset
+     */
+    darkTheme(): MenuTheme;
+};
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAE9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAIlF;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAA;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAA;CACrB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AAEd;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAE/C,KAAK,EAAE,QAAQ,EAAE,CAAA;IAGjB,OAAO,EAAE,iBAAiB,GAAG,WAAW,GAAG,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAA;IAGlF,MAAM,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;IAGxB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAA;IAGzB,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAG1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAA;QAClB,OAAO,EAAE,MAAM,CAAA;QACf,IAAI,EAAE,MAAM,CAAA;QACZ,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,EAAE,MAAM,CAAA;QACvB,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,MAAM,CAAA;QACjB,QAAQ,EAAE,MAAM,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,GAAG,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,SA0B9B,CAAA;AAED;;GAEG;AACH,qBAAa,aAAc,YAAW,iBAAiB,CAAC,SAAS,CAAC;IAChE,SAAgB,IAAI,EAAG,WAAW,CAAS;IAC3C,SAAgB,EAAE,EAAE,MAAM,CAAA;IAC1B,SAAgB,KAAK,EAAE,SAAS,CAAA;IACzB,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAK;IACnC,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,KAAK,MAAM,GAEjB;IACD,OAAO,KAAK,SAAS,GAEpB;IACD,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,cAAc,CAA2B;gBAErC,KAAK,EAAE,SAAS;IAgC5B,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAwItB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa,CAmDpB;IAED,OAAO,CAAC,iBAAiB;IAmFzB,OAAO,CAAC,iBAAiB;IAqCzB,OAAO,CAAC,YAAY;IAyCpB,MAAM,IAAI,OAAO;IA4FjB,OAAO,CAAC,kBAAkB,CAUzB;IAED,OAAO,CAAC,cAAc,CASrB;CACF;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,KAAK,EAAE,SAAS,GACf,mBAAmB,CAAC,SAAS,CAAC,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAA;CAAE,CAEhG;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;IACpB;;OAEG;iBACU,QAAQ;IAIrB;;OAEG;uBACgB,MAAM,UAAU,MAAM,IAAI,gBAAgB,MAAM,GAAG,QAAQ;IAS9E;;OAEG;wBAEM,MAAM,YACH,MAAM,UACR,MAAM,IAAI,gBACJ,MAAM,GACnB,QAAQ;IASX;;OAEG;wBACiB,WAAW,SAAS,QAAQ,EAAE,GAAG,IAAI;CAc1D,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;IAGrB;;OAEG;2BACoB,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS;IAIrD;;OAEG;iBACU,SAAS;CAevB,CAAA"}