@tolle_/tolle-ui 18.2.23 → 18.2.25

package/registry/r/context-menu-trigger.json

@@ -0,0 +1,23 @@
+{
+  "name": "context-menu-trigger",
+  "type": "registry:ui",
+  "title": "Context Menu Trigger",
+  "description": "Context Menu Trigger component.",
+  "category": "overlays",
+  "registryDependencies": [],
+  "dependencies": [
+    "@floating-ui/dom"
+  ],
+  "files": [
+    {
+      "path": "context-menu-trigger.directive.ts",
+      "target": "ui/context-menu-trigger.directive.ts",
+      "content": "import { Directive, ElementRef, EventEmitter, HostListener, inject, Input, Output } from '@angular/core';\nimport { ContextMenuService, ContextMenuItem } from './context-menu.service';\n\n@Directive({\n  selector: '[tolleContextMenuTrigger]',\n  standalone: true\n})\nexport class ContextMenuTriggerDirective {\n  private elementRef = inject(ElementRef);\n  private contextMenuService = inject(ContextMenuService);\n\n  @Input('tolleContextMenuTrigger') items: ContextMenuItem[] = [];\n  @Output() action = new EventEmitter<string>();\n\n  @HostListener('contextmenu', ['$event'])\n  onContextMenu(event: MouseEvent) {\n    event.stopPropagation();\n    this.contextMenuService.open({\n      event,\n      items: this.items,\n      triggerElement: this.elementRef.nativeElement,\n      onAction: (actionId) => this.action.emit(actionId)\n    });\n  }\n}\n"
+    },
+    {
+      "path": "context-menu.service.ts",
+      "target": "ui/context-menu.service.ts",
+      "content": "import { Injectable, EventEmitter } from '@angular/core';\nimport { computePosition, offset, shift, flip, size } from '@floating-ui/dom';\n\nexport type ContextMenuItem = {\n  id?: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  destructive?: boolean;\n  separator?: boolean;\n  submenu?: ContextMenuItem[];\n  shortcut?: string;\n  checked?: boolean;\n  type?: 'default' | 'checkbox' | 'radio';\n}\n\nexport type ContextMenuState = {\n  x: number;\n  y: number;\n  items: ContextMenuItem[];\n  isOpen: boolean;\n  triggerElement?: HTMLElement;\n  onAction?: (actionId: string) => void;\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ContextMenuService {\n  private _state: ContextMenuState = {\n    x: 0,\n    y: 0,\n    items: [],\n    isOpen: false\n  };\n\n  readonly stateChanged = new EventEmitter<ContextMenuState>();\n\n  open(config: {\n    event: MouseEvent;\n    items?: ContextMenuItem[];\n    triggerElement?: HTMLElement;\n    onAction?: (actionId: string) => void;\n  }) {\n    const { event, items = [], triggerElement, onAction } = config;\n\n    // Prevent browser context menu\n    event.preventDefault();\n\n    this._state = {\n      x: event.clientX,\n      y: event.clientY,\n      items,\n      isOpen: true,\n      triggerElement,\n      onAction\n    };\n\n    this.stateChanged.emit(this._state);\n  }\n\n  close() {\n    this._state = { ...this._state, isOpen: false };\n    this.stateChanged.emit(this._state);\n  }\n\n  async positionMenu(menuElement: HTMLElement) {\n    const state = this._state;\n    if (!state.isOpen || !menuElement) return;\n\n    // Create a precise virtual element for the mouse coordinates\n    const virtualEl = {\n      getBoundingClientRect() {\n        return {\n          width: 0,\n          height: 0,\n          x: state.x,\n          y: state.y,\n          top: state.y,\n          left: state.x,\n          right: state.x,\n          bottom: state.y,\n        };\n      }\n    };\n\n    const { x, y } = await computePosition(virtualEl as any, menuElement, {\n      placement: 'bottom-start', // Standard: Menu top-left aligns with mouse\n      strategy: 'fixed',\n      middleware: [\n        offset(2), // Slight offset so mouse isn't covering the first pixel\n        flip({\n          padding: 10,\n          fallbackPlacements: ['bottom-end', 'top-start', 'top-end']\n        }),\n        shift({ padding: 10 }),\n        size({\n          apply({ availableHeight, availableWidth, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.max(100, availableHeight - 16)}px`,\n              maxWidth: `${Math.max(200, availableWidth - 16)}px`,\n              overflowY: 'auto'\n            });\n          }\n        })\n      ]\n    });\n\n    Object.assign(menuElement.style, {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`\n    });\n  }\n\n  async positionSubmenu(triggerElement: HTMLElement, submenuElement: HTMLElement) {\n    if (!triggerElement || !submenuElement) return;\n\n    const { x, y } = await computePosition(triggerElement, submenuElement, {\n      placement: 'right-start', // Standard: Submenu opens to the right\n      strategy: 'fixed',\n      middleware: [\n        offset(-4), // Overlap slightly with parent menu\n        flip({\n          padding: 10,\n          fallbackPlacements: ['left-start', 'bottom-start']\n        }),\n        shift({ padding: 10 }),\n        size({\n          apply({ availableHeight, availableWidth, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.max(100, availableHeight - 16)}px`,\n              maxWidth: `${Math.max(200, availableWidth - 16)}px`,\n              overflowY: 'auto'\n            });\n          }\n        })\n      ]\n    });\n\n    Object.assign(submenuElement.style, {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`\n    });\n  }\n\n  performAction(actionId: string) {\n    this._state.onAction?.(actionId);\n    this.close();\n  }\n}"
+    }
+  ]
+}

package/registry/r/context-menu.json

@@ -0,0 +1,28 @@
+{
+  "name": "context-menu",
+  "type": "registry:ui",
+  "title": "Context Menu",
+  "description": "Context Menu component.",
+  "category": "overlays",
+  "registryDependencies": [],
+  "dependencies": [
+    "@floating-ui/dom"
+  ],
+  "files": [
+    {
+      "path": "context-menu.component.ts",
+      "target": "ui/context-menu.component.ts",
+      "content": "import { Component, ElementRef, HostListener, inject, OnDestroy, OnInit, ViewChild, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ContextMenuItem, ContextMenuService, ContextMenuState } from './context-menu.service';\nimport { cn } from './utils/cn';\n\n@Component({\n  selector: 'tolle-context-menu',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    @if (isOpen) {\n      <div\n        #menu\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        tabindex=\"-1\"\n        [attr.data-state]=\"isOpen ? 'open' : 'closed'\"\n        class=\"fixed z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\n               data-[state=closed]:animate-out data-[state=open]:animate-in\n               data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\n               data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\n               slide-in-from-top-2\"\n        [style.visibility]=\"isPositioned ? 'visible' : 'hidden'\"\n        [style.opacity]=\"isPositioned ? '1' : '0'\"\n        style=\"will-change: transform; top: 0; left: 0;\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"flex flex-col\">\n          @for (item of items; track $index) {\n            @if (item.separator) {\n              <div role=\"separator\" class=\"h-px -mx-1 my-1 bg-border\"></div>\n            } @else {\n              <div class=\"relative group\">\n                <button\n                  #itemButton\n                  type=\"button\"\n                  role=\"menuitem\"\n                  [attr.aria-haspopup]=\"item.submenu ? 'true' : null\"\n                  [attr.aria-expanded]=\"openSubmenuId === item.id ? 'true' : null\"\n                  [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                  (click)=\"onItemClick(item)\"\n                  (mouseenter)=\"onItemMouseEnter(item, itemButton)\"\n                  (mouseleave)=\"onItemMouseLeave()\"\n                  [disabled]=\"item.disabled\"\n                  [class]=\"cn(\n                    'relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n                    'transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n                    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n                    item.destructive ? 'text-destructive focus:bg-destructive/10 focus:text-destructive' : '',\n                    item.disabled && 'opacity-50 cursor-not-allowed pointer-events-none',\n                    (item.type === 'checkbox' || item.type === 'radio') ? 'pl-8' : '',\n                    activeIndex === $index && 'bg-accent text-accent-foreground'\n                  )\"\n                >\n                  @if (item.checked) {\n                    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n                      <i [class]=\"item.type === 'radio' ? 'ri-checkbox-blank-circle-fill h-2 w-2 fill-current' : 'ri-check-line h-4 w-4'\"></i>\n                    </span>\n                  }\n                  @if (item.icon) {\n                    <i [class]=\"cn(item.icon, 'mr-2 h-4 w-4')\"></i>\n                  }\n                  <span class=\"flex-1 text-left\">{{ item.label }}</span>\n                  @if (item.shortcut && !item.submenu) {\n                    <span class=\"ml-auto text-xs tracking-widest text-muted-foreground pl-2\">{{ item.shortcut }}</span>\n                  }\n                  @if (item.submenu) {\n                    <i class=\"ri-arrow-right-s-line ml-auto h-4 w-4 opacity-50\"></i>\n                  }\n                </button>\n              </div>\n            }\n          }\n        </div>\n      </div>\n\n      @if (openSubmenuId && activeSubmenuItems.length > 0) {\n        <div\n          #submenu\n          role=\"menu\"\n          [id]=\"'submenu-' + openSubmenuId\"\n          class=\"fixed z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n          [style.visibility]=\"isSubmenuPositioned ? 'visible' : 'hidden'\"\n          [style.opacity]=\"isSubmenuPositioned ? '1' : '0'\"\n          style=\"will-change: transform\"\n          (mouseenter)=\"onSubmenuMouseEnter()\"\n          (mouseleave)=\"onSubmenuMouseLeave()\"\n        >\n          @for (subItem of activeSubmenuItems; track $index) {\n            @if (subItem.separator) {\n              <div role=\"separator\" class=\"h-px -mx-1 my-1 bg-border\"></div>\n            } @else {\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                (click)=\"onSubItemClick(subItem)\"\n                [disabled]=\"subItem.disabled\"\n                [class]=\"cn(\n                  'relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',\n                  'transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',\n                  subItem.disabled && 'opacity-50 cursor-not-allowed pointer-events-none',\n                  (subItem.type === 'checkbox' || subItem.type === 'radio') ? 'pl-8' : '',\n                  subItem.destructive ? 'text-destructive hover:bg-destructive/10' : ''\n                )\"\n              >\n                @if (subItem.checked) {\n                  <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n                    <i [class]=\"subItem.type === 'radio' ? 'ri-checkbox-blank-circle-fill h-2 w-2 fill-current' : 'ri-check-line h-4 w-4'\"></i>\n                  </span>\n                }\n                @if (subItem.icon) {\n                  <i [class]=\"cn(subItem.icon, 'mr-2 h-4 w-4')\"></i>\n                }\n                <span class=\"flex-1 text-left\">{{ subItem.label }}</span>\n                @if (subItem.shortcut) {\n                  <span class=\"ml-auto text-xs tracking-widest text-muted-foreground pl-2\">{{ subItem.shortcut }}</span>\n                }\n              </button>\n            }\n          }\n        </div>\n      }\n    }\n  `,\n  styles: [`\n    :host { display: contents; }\n  `]\n})\nexport class ContextMenuComponent implements OnInit, OnDestroy {\n  private contextMenuService = inject(ContextMenuService);\n  private elementRef = inject(ElementRef);\n  private cdr = inject(ChangeDetectorRef);\n\n  @ViewChild('menu') menuElement!: ElementRef<HTMLDivElement>;\n\n  // We only have one active submenu now, so we can use ViewChild instead of ViewChildren\n  @ViewChild('submenu') submenuElement!: ElementRef<HTMLDivElement>;\n\n  @ViewChildren('itemButton') itemButtons!: QueryList<ElementRef<HTMLButtonElement>>;\n\n  isOpen = false;\n  isPositioned = false;\n  isSubmenuPositioned = false;\n  items: ContextMenuItem[] = [];\n\n  openSubmenuId: string | null = null;\n  activeSubmenuTrigger: HTMLElement | null = null; // Store the button that triggered the submenu\n\n  activeIndex = -1;\n  private stateSubscription: any;\n  private submenuTimeout: any;\n\n  protected readonly cn = cn;\n\n  ngOnInit() {\n    this.stateSubscription = this.contextMenuService.stateChanged.subscribe((state: ContextMenuState) => {\n      this.isOpen = state.isOpen;\n      this.items = state.items;\n\n      if (state.isOpen) {\n        this.activeIndex = -1;\n        this.isPositioned = false;\n        this.cdr.detectChanges();\n        requestAnimationFrame(() => {\n          this.positionMenu();\n          this.focusFirstItem();\n        });\n      } else {\n        this.closeSubmenu();\n        this.activeIndex = -1;\n        this.isPositioned = false;\n      }\n    });\n  }\n\n  // Helper to get items for the currently open submenu\n  get activeSubmenuItems(): ContextMenuItem[] {\n    if (!this.openSubmenuId) return [];\n    return this.items.find(i => i.id === this.openSubmenuId)?.submenu || [];\n  }\n\n  @HostListener('document:click', ['$event'])\n  @HostListener('document:contextmenu', ['$event'])\n  onDocumentEvents(event: MouseEvent) {\n    if (!this.isOpen) return;\n\n    // Check if click is inside main menu OR the active submenu\n    const clickedInsideMenu = this.menuElement?.nativeElement.contains(event.target as Node);\n    const clickedInsideSubmenu = this.submenuElement?.nativeElement.contains(event.target as Node);\n\n    if (clickedInsideMenu || clickedInsideSubmenu) {\n      return;\n    }\n\n    this.contextMenuService.close();\n  }\n\n  async positionMenu() {\n    if (this.menuElement?.nativeElement) {\n      this.isPositioned = false;\n      this.cdr.detectChanges();\n      await this.contextMenuService.positionMenu(this.menuElement.nativeElement);\n      this.isPositioned = true;\n      this.cdr.detectChanges();\n      // Focus the menu container so Arrow/Enter/Escape keydown handlers fire.\n      this.menuElement.nativeElement.focus();\n    }\n  }\n\n  focusFirstItem() {\n    const firstEnabledIndex = this.items.findIndex(item => !item.disabled && !item.separator);\n    if (firstEnabledIndex !== -1) {\n      this.activeIndex = firstEnabledIndex;\n    }\n  }\n\n  onItemClick(item: ContextMenuItem) {\n    if (item.disabled || item.separator) return;\n\n    if (item.submenu) {\n      // Toggle logic handled by enter/leave mostly, but click can force toggle\n      if (this.openSubmenuId === item.id) {\n        this.closeSubmenu();\n      } else {\n        // We need the button ref to open it via click. \n        // Implementation detail: Hover is preferred for submenus.\n      }\n    } else {\n      this.contextMenuService.performAction(item.id!);\n    }\n  }\n\n  onItemMouseEnter(item: ContextMenuItem, trigger: HTMLButtonElement) {\n    if (item.disabled || item.separator) return;\n\n    // Clear any pending close actions\n    clearTimeout(this.submenuTimeout);\n\n    this.submenuTimeout = setTimeout(() => {\n      if (item.submenu) {\n        this.openSubmenuId = item.id!;\n        this.activeSubmenuTrigger = trigger; // Save the trigger for positioning\n        this.positionSubmenu();\n      } else {\n        this.closeSubmenu();\n      }\n    }, 150);\n  }\n\n  onItemMouseLeave() {\n    // We don't close immediately; we wait to see if the user enters the submenu\n    // Logic handled by the timeout in `onItemMouseEnter` of a sibling, \n    // or we could add a timeout here to close if they go nowhere.\n  }\n\n  onSubmenuMouseEnter() {\n    // If user is hovering the submenu, keep it open\n    clearTimeout(this.submenuTimeout);\n  }\n\n  onSubmenuMouseLeave() {\n    // If user leaves submenu, standard behavior is usually to keep it open \n    // until they hover another main item or click away.\n  }\n\n  private closeSubmenu() {\n    this.openSubmenuId = null;\n    this.activeSubmenuTrigger = null;\n    this.isSubmenuPositioned = false;\n  }\n\n  private async positionSubmenu() {\n    this.isSubmenuPositioned = false;\n    this.cdr.detectChanges(); // Render the submenu DOM\n\n    requestAnimationFrame(async () => {\n      if (this.activeSubmenuTrigger && this.submenuElement) {\n        await this.contextMenuService.positionSubmenu(\n          this.activeSubmenuTrigger,\n          this.submenuElement.nativeElement\n        );\n        this.isSubmenuPositioned = true;\n        this.cdr.detectChanges();\n      }\n    });\n  }\n\n  onSubItemClick(item: ContextMenuItem) {\n    if (item.disabled || item.separator) return;\n    this.contextMenuService.performAction(item.id!);\n  }\n\n  onKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigate(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigate(-1);\n        break;\n      case 'ArrowRight':\n        const currentItem = this.items[this.activeIndex];\n        if (currentItem?.submenu) {\n          event.preventDefault();\n          // Force open submenu via keyboard\n          this.openSubmenuId = currentItem.id!;\n          const trigger = this.itemButtons.toArray()[this.activeIndex]?.nativeElement;\n          if (trigger) {\n            this.activeSubmenuTrigger = trigger;\n            this.positionSubmenu();\n          }\n        }\n        break;\n      case 'ArrowLeft':\n        if (this.openSubmenuId) {\n          event.preventDefault();\n          this.closeSubmenu();\n        }\n        break;\n      case 'Enter':\n        if (this.activeIndex !== -1) {\n          event.preventDefault();\n          this.onItemClick(this.items[this.activeIndex]);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.contextMenuService.close();\n        break;\n    }\n  }\n\n  private navigate(direction: number) {\n    let nextIndex = this.activeIndex + direction;\n    const count = this.items.length;\n    while (nextIndex >= 0 && nextIndex < count) {\n      const item = this.items[nextIndex];\n      if (!item.disabled && !item.separator) {\n        this.activeIndex = nextIndex;\n        return;\n      }\n      nextIndex += direction;\n    }\n  }\n\n  @HostListener('document:keydown.escape')\n  onEscape() {\n    this.contextMenuService.close();\n  }\n\n  ngOnDestroy() {\n    if (this.stateSubscription) {\n      this.stateSubscription.unsubscribe();\n    }\n    clearTimeout(this.submenuTimeout);\n  }\n}"
+    },
+    {
+      "path": "context-menu.service.ts",
+      "target": "ui/context-menu.service.ts",
+      "content": "import { Injectable, EventEmitter } from '@angular/core';\nimport { computePosition, offset, shift, flip, size } from '@floating-ui/dom';\n\nexport type ContextMenuItem = {\n  id?: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  destructive?: boolean;\n  separator?: boolean;\n  submenu?: ContextMenuItem[];\n  shortcut?: string;\n  checked?: boolean;\n  type?: 'default' | 'checkbox' | 'radio';\n}\n\nexport type ContextMenuState = {\n  x: number;\n  y: number;\n  items: ContextMenuItem[];\n  isOpen: boolean;\n  triggerElement?: HTMLElement;\n  onAction?: (actionId: string) => void;\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ContextMenuService {\n  private _state: ContextMenuState = {\n    x: 0,\n    y: 0,\n    items: [],\n    isOpen: false\n  };\n\n  readonly stateChanged = new EventEmitter<ContextMenuState>();\n\n  open(config: {\n    event: MouseEvent;\n    items?: ContextMenuItem[];\n    triggerElement?: HTMLElement;\n    onAction?: (actionId: string) => void;\n  }) {\n    const { event, items = [], triggerElement, onAction } = config;\n\n    // Prevent browser context menu\n    event.preventDefault();\n\n    this._state = {\n      x: event.clientX,\n      y: event.clientY,\n      items,\n      isOpen: true,\n      triggerElement,\n      onAction\n    };\n\n    this.stateChanged.emit(this._state);\n  }\n\n  close() {\n    this._state = { ...this._state, isOpen: false };\n    this.stateChanged.emit(this._state);\n  }\n\n  async positionMenu(menuElement: HTMLElement) {\n    const state = this._state;\n    if (!state.isOpen || !menuElement) return;\n\n    // Create a precise virtual element for the mouse coordinates\n    const virtualEl = {\n      getBoundingClientRect() {\n        return {\n          width: 0,\n          height: 0,\n          x: state.x,\n          y: state.y,\n          top: state.y,\n          left: state.x,\n          right: state.x,\n          bottom: state.y,\n        };\n      }\n    };\n\n    const { x, y } = await computePosition(virtualEl as any, menuElement, {\n      placement: 'bottom-start', // Standard: Menu top-left aligns with mouse\n      strategy: 'fixed',\n      middleware: [\n        offset(2), // Slight offset so mouse isn't covering the first pixel\n        flip({\n          padding: 10,\n          fallbackPlacements: ['bottom-end', 'top-start', 'top-end']\n        }),\n        shift({ padding: 10 }),\n        size({\n          apply({ availableHeight, availableWidth, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.max(100, availableHeight - 16)}px`,\n              maxWidth: `${Math.max(200, availableWidth - 16)}px`,\n              overflowY: 'auto'\n            });\n          }\n        })\n      ]\n    });\n\n    Object.assign(menuElement.style, {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`\n    });\n  }\n\n  async positionSubmenu(triggerElement: HTMLElement, submenuElement: HTMLElement) {\n    if (!triggerElement || !submenuElement) return;\n\n    const { x, y } = await computePosition(triggerElement, submenuElement, {\n      placement: 'right-start', // Standard: Submenu opens to the right\n      strategy: 'fixed',\n      middleware: [\n        offset(-4), // Overlap slightly with parent menu\n        flip({\n          padding: 10,\n          fallbackPlacements: ['left-start', 'bottom-start']\n        }),\n        shift({ padding: 10 }),\n        size({\n          apply({ availableHeight, availableWidth, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.max(100, availableHeight - 16)}px`,\n              maxWidth: `${Math.max(200, availableWidth - 16)}px`,\n              overflowY: 'auto'\n            });\n          }\n        })\n      ]\n    });\n\n    Object.assign(submenuElement.style, {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`\n    });\n  }\n\n  performAction(actionId: string) {\n    this._state.onAction?.(actionId);\n    this.close();\n  }\n}"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}