@geajs/ui 0.2.1 → 0.2.3

package/dist/dnd-manager.mjs

@@ -1,8 +1,11 @@
-import { GEA_CHILD_COMPONENTS, GEA_DOM_COMPONENT } from "@geajs/core";
+import { GEA_DOM_COMPONENT, GEA_PARENT_COMPONENT, GEA_PROXY_GET_RAW_TARGET, stashComponentForTransfer } from "@geajs/core";
 //#region src/components/dnd-manager.ts
 const DRAG_THRESHOLD_SQ = 25;
 const DRAGGABLE_SEL = "[data-draggable-id]";
 const DROPPABLE_SEL = "[data-droppable-id]";
+function _rawComp(comp) {
+	return comp?.[GEA_PROXY_GET_RAW_TARGET] ?? comp;
+}
 var DndManager = class {
 	constructor() {
 		this.droppables = /* @__PURE__ */ new Map();
@@ -223,9 +226,13 @@ var DndManager = class {
 			};
 			this._animateDrop().then(() => {
 				this._restoreElStyles();
-				this._performTransfer(destination);
-				this._cleanup();
+				const draggedComp = this._getComponentFromElement(this._sourceEl);
+				if (draggedComp) stashComponentForTransfer(draggedComp);
+				if (this._placeholder?.parentElement) this._placeholder.remove();
+				this._placeholder = null;
+				if (this._sourceEl?.parentElement === document.body) this._sourceEl.remove();
 				this._onDragEnd?.(result);
+				this._cleanup();
 			});
 		} else this._animateReturn().then(() => {
 			this._returnToSource();
@@ -266,7 +273,8 @@ var DndManager = class {
 		destContainer.insertBefore(sourceEl, refNode);
 		const draggedComp = this._getComponentFromElement(sourceEl);
 		if (!draggedComp) return;
-		const sourceParent = draggedComp.parentComponent;
+		const rawDragged = _rawComp(draggedComp);
+		const sourceParent = rawDragged[GEA_PARENT_COMPONENT];
 		if (!sourceParent) return;
 		const srcArr = this._findCompiledArray(sourceParent, draggedComp);
 		if (!srcArr) return;
@@ -275,32 +283,16 @@ var DndManager = class {
 		srcArr.arr.splice(srcArr.index, 1);
 		const destArr = destParent[srcArr.key];
 		if (Array.isArray(destArr)) destArr.splice(destination.index, 0, draggedComp);
-		const srcChildren = sourceParent[GEA_CHILD_COMPONENTS];
-		if (Array.isArray(srcChildren)) {
-			const ci = srcChildren.indexOf(draggedComp);
-			if (ci !== -1) srcChildren.splice(ci, 1);
-		}
-		const destChildren = destParent[GEA_CHILD_COMPONENTS];
-		if (Array.isArray(destChildren) && !destChildren.includes(draggedComp)) destChildren.push(draggedComp);
-		draggedComp.parentComponent = destParent;
+		rawDragged[GEA_PARENT_COMPONENT] = destParent;
 	}
 	_findCompiledArray(parent, child) {
-		const stringKeys = Object.keys(parent);
-		const symbolKeys = Object.getOwnPropertySymbols(parent);
-		for (const key of stringKeys) if (key.startsWith("_") && key.endsWith("Items") && Array.isArray(parent[key])) {
-			const arr = parent[key];
-			const idx = arr.indexOf(child);
-			if (idx !== -1) return {
-				key,
-				arr,
-				index: idx
-			};
-		}
-		for (const key of symbolKeys) if (String(key).includes("gea.listItems") && Array.isArray(parent[key])) {
-			const arr = parent[key];
+		for (const sym of Object.getOwnPropertySymbols(parent)) {
+			if (!(sym.description ?? "").startsWith("gea.listItems.")) continue;
+			const arr = parent[sym];
+			if (!Array.isArray(arr)) continue;
 			const idx = arr.indexOf(child);
 			if (idx !== -1) return {
-				key,
+				key: sym,
 				arr,
 				index: idx
 			};

package/dist/dnd-manager.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dnd-manager.mjs","names":[],"sources":["../src/components/dnd-manager.ts"],"sourcesContent":["import { GEA_CHILD_COMPONENTS, GEA_DOM_COMPONENT } from '@geajs/core'\n\nexport interface DragResult {\n  draggableId: string\n  source: { droppableId: string; index: number }\n  destination: { droppableId: string; index: number }\n}\n\nconst DRAG_THRESHOLD_SQ = 25\nconst DRAGGABLE_SEL = '[data-draggable-id]'\nconst DROPPABLE_SEL = '[data-droppable-id]'\n\nclass DndManager {\n  droppables = new Map<string, HTMLElement>()\n\n  private _onDragEnd: ((result: DragResult) => void) | null = null\n  get onDragEnd() {\n    return this._onDragEnd\n  }\n  set onDragEnd(fn: ((result: DragResult) => void) | null) {\n    this._onDragEnd = fn\n    if (fn) this._ensureDocListener()\n  }\n\n  private _dragging = false\n  private _started = false\n  private _draggedId = ''\n  private _sourceDroppableId = ''\n  private _sourceIndex = 0\n  private _sourceEl: HTMLElement | null = null\n  private _sourceHeight = 0\n  private _sourceRect: DOMRect | null = null\n  private _savedCssText = ''\n  private _placeholder: HTMLElement | null = null\n  private _startX = 0\n  private _startY = 0\n  private _offsetX = 0\n  private _offsetY = 0\n  private _currentDroppableId: string | null = null\n  private _currentIndex = 0\n  private _lastClientY = 0\n  private _cleanedUp = false\n\n  private _boundMove = this._onPointerMove.bind(this)\n  private _boundUp = this._onPointerUp.bind(this)\n  private _boundKeyDown = this._onKeyDown.bind(this)\n  private _boundDocDown = this._onDocumentPointerDown.bind(this)\n  private _docListenerAttached = false\n\n  get isDragging() {\n    return this._started\n  }\n\n  private _ensureDocListener() {\n    if (this._docListenerAttached || typeof document === 'undefined') return\n    document.addEventListener('pointerdown', this._boundDocDown, true)\n    this._docListenerAttached = true\n  }\n\n  private _onDocumentPointerDown(e: PointerEvent) {\n    const el = (e.target as HTMLElement).closest?.(DRAGGABLE_SEL) as HTMLElement\n    if (!el) return\n    this.startTracking(e, el.dataset.draggableId!, el)\n  }\n\n  registerDroppable(id: string, el: HTMLElement) {\n    this.droppables.set(id, el)\n    this._ensureDocListener()\n  }\n\n  unregisterDroppable(id: string) {\n    this.droppables.delete(id)\n  }\n\n  startTracking(e: PointerEvent, draggableId: string, el: HTMLElement) {\n    if (this._dragging || e.button !== 0) return\n    this._ensureDocListener()\n\n    const droppableEl = el.closest(DROPPABLE_SEL) as HTMLElement\n    if (!droppableEl) return\n\n    const droppableId = droppableEl.dataset.droppableId!\n    const siblings = Array.from(droppableEl.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n    const sourceIndex = siblings.indexOf(el)\n    if (sourceIndex === -1) return\n\n    this._dragging = true\n    this._started = false\n    this._cleanedUp = false\n    this._draggedId = draggableId\n    this._sourceDroppableId = droppableId\n    this._sourceIndex = sourceIndex\n    this._sourceEl = el\n\n    const rect = el.getBoundingClientRect()\n    this._sourceHeight = rect.height\n    this._sourceRect = rect\n    this._startX = e.clientX\n    this._startY = e.clientY\n    this._lastClientY = e.clientY\n    this._offsetX = e.clientX - rect.left\n    this._offsetY = e.clientY - rect.top\n\n    document.addEventListener('pointermove', this._boundMove)\n    document.addEventListener('pointerup', this._boundUp)\n    document.addEventListener('keydown', this._boundKeyDown)\n    e.preventDefault()\n  }\n\n  private _onPointerMove(e: PointerEvent) {\n    if (!this._dragging) return\n\n    if (!this._started) {\n      const dx = e.clientX - this._startX\n      const dy = e.clientY - this._startY\n      if (dx * dx + dy * dy < DRAG_THRESHOLD_SQ) return\n      this._initDrag()\n      this._updateTarget(e.clientX, e.clientY)\n      return\n    }\n\n    this._sourceEl!.style.transform = `translate(${e.clientX - this._offsetX}px, ${e.clientY - this._offsetY}px)`\n    this._updateTarget(e.clientX, e.clientY)\n    this._lastClientY = e.clientY\n  }\n\n  private _initDrag() {\n    this._started = true\n    const el = this._sourceEl!\n    const rect = this._sourceRect!\n\n    document.querySelectorAll(DROPPABLE_SEL).forEach((dropEl) => {\n      const id = (dropEl as HTMLElement).dataset.droppableId!\n      if (!this.droppables.has(id)) {\n        this.droppables.set(id, dropEl as HTMLElement)\n      }\n    })\n\n    const elMargin = getComputedStyle(el).marginBottom\n    this._savedCssText = el.style.cssText\n\n    const placeholder = document.createElement('div')\n    placeholder.className = 'gea-dnd-placeholder'\n    placeholder.style.height = rect.height + 'px'\n    placeholder.style.marginBottom = elMargin\n    placeholder.style.transition = 'none'\n    el.parentElement!.insertBefore(placeholder, el)\n\n    document.body.appendChild(el)\n    Object.assign(el.style, {\n      position: 'fixed',\n      top: '0px',\n      left: '0',\n      width: rect.width + 'px',\n      height: rect.height + 'px',\n      transform: `translate(${rect.left}px, ${rect.top}px)`,\n      // rotate: '0deg',\n      // transition: 'rotate 0.15s ease, box-shadow 0.15s ease',\n      pointerEvents: 'none',\n      zIndex: '99999',\n      margin: '0',\n      willChange: 'transform',\n      boxShadow: 'none',\n    })\n    el.offsetHeight\n    // el.style.rotate = '3deg'\n    el.style.boxShadow = '5px 10px 30px 0px rgba(9, 30, 66, 0.15)'\n\n    this._placeholder = placeholder\n\n    this._currentDroppableId = this._sourceDroppableId\n    this._currentIndex = this._sourceIndex\n  }\n\n  private _updateTarget(clientX: number, clientY: number) {\n    let foundId: string | null = null\n    let foundEl: HTMLElement | null = null\n\n    for (const [id, el] of this.droppables) {\n      const r = el.getBoundingClientRect()\n      if (clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom) {\n        foundId = id\n        foundEl = el\n        break\n      }\n    }\n\n    if (!foundEl || foundId === null) {\n      this._currentDroppableId = null\n      return\n    }\n\n    const items = Array.from(foundEl.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n    const movingDown = clientY >= this._lastClientY\n    const threshold = movingDown ? 0 : 1\n    let insertIndex = items.length\n    for (let i = 0; i < items.length; i++) {\n      const r = items[i].getBoundingClientRect()\n      if (clientY < r.top + r.height * threshold) {\n        insertIndex = i\n        break\n      }\n    }\n\n    this._currentDroppableId = foundId\n    this._currentIndex = insertIndex\n\n    if (!this._placeholder) return\n\n    const refNode = (items[insertIndex] as HTMLElement) || null\n    if (this._placeholder.parentElement !== foundEl || this._placeholder.nextElementSibling !== refNode) {\n      if (this._placeholder.parentElement) {\n        const ghost = document.createElement('div')\n        ghost.style.height = this._sourceHeight + 'px'\n        ghost.style.marginBottom = this._placeholder.style.marginBottom\n        ghost.style.transition = 'height 0.2s cubic-bezier(0.2, 0, 0, 1)'\n        ghost.style.overflow = 'hidden'\n        this._placeholder.parentElement.insertBefore(ghost, this._placeholder)\n        ghost.offsetHeight\n        ghost.style.height = '0px'\n        ghost.style.marginBottom = '0px'\n        ghost.addEventListener('transitionend', () => ghost.remove(), { once: true })\n        setTimeout(() => ghost.remove(), 250)\n      }\n\n      this._placeholder.style.transition = 'none'\n      this._placeholder.style.height = '0px'\n      foundEl.insertBefore(this._placeholder, refNode)\n      this._placeholder.offsetHeight\n      this._placeholder.style.transition = 'height 0.2s cubic-bezier(0.2, 0, 0, 1)'\n      this._placeholder.style.height = this._sourceHeight + 'px'\n    }\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Escape' && this._dragging) {\n      this._cancelDrag()\n    }\n  }\n\n  private _cancelDrag() {\n    this._removeGlobalListeners()\n    if (!this._started) {\n      this._dragging = false\n      return\n    }\n\n    this._animateReturn().then(() => {\n      this._returnToSource()\n      this._cleanup()\n    })\n  }\n\n  private _onPointerUp(_e: PointerEvent) {\n    this._removeGlobalListeners()\n\n    if (!this._started) {\n      this._dragging = false\n      return\n    }\n\n    const destination =\n      this._currentDroppableId !== null ? { droppableId: this._currentDroppableId, index: this._currentIndex } : null\n\n    const samePosition =\n      destination && destination.droppableId === this._sourceDroppableId && destination.index === this._sourceIndex\n\n    if (destination && this._placeholder && !samePosition) {\n      const result: DragResult = {\n        draggableId: this._draggedId,\n        source: { droppableId: this._sourceDroppableId, index: this._sourceIndex },\n        destination,\n      }\n      this._animateDrop().then(() => {\n        this._restoreElStyles()\n        this._performTransfer(destination)\n        this._cleanup()\n        this._onDragEnd?.(result)\n      })\n    } else {\n      this._animateReturn().then(() => {\n        this._returnToSource()\n        this._cleanup()\n      })\n    }\n  }\n\n  private _getComponentFromElement(el: HTMLElement | null): any {\n    let current: HTMLElement | null = el\n    while (current) {\n      const comp = (current as HTMLElement & { [GEA_DOM_COMPONENT]?: unknown })[GEA_DOM_COMPONENT]\n      if (comp) return comp\n      current = current.parentElement\n    }\n    return null\n  }\n\n  private _restoreElStyles() {\n    if (!this._sourceEl) return\n    this._sourceEl.style.cssText = this._savedCssText\n  }\n\n  private _returnToSource() {\n    if (!this._sourceEl) return\n    this._restoreElStyles()\n    if (this._placeholder?.parentElement) {\n      this._placeholder.parentElement.insertBefore(this._sourceEl, this._placeholder)\n    } else {\n      const container = this.droppables.get(this._sourceDroppableId)\n      if (container) {\n        const items = Array.from(container.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n        container.insertBefore(this._sourceEl, items[this._sourceIndex] || null)\n      }\n    }\n  }\n\n  private _performTransfer(destination: { droppableId: string; index: number }) {\n    const sourceEl = this._sourceEl\n    if (!sourceEl) return\n\n    const destContainer = this.droppables.get(destination.droppableId)\n    if (!destContainer) return\n\n    const destItems = Array.from(destContainer.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n    const refNode = (destItems[destination.index] as HTMLElement) || null\n    destContainer.insertBefore(sourceEl, refNode)\n\n    const draggedComp = this._getComponentFromElement(sourceEl)\n    if (!draggedComp) return\n\n    const sourceParent = draggedComp.parentComponent\n    if (!sourceParent) return\n\n    const srcArr = this._findCompiledArray(sourceParent, draggedComp)\n    if (!srcArr) return\n\n    const destParent = this._getComponentFromElement(destContainer)\n    if (!destParent) return\n\n    srcArr.arr.splice(srcArr.index, 1)\n    const destArr = destParent[srcArr.key]\n    if (Array.isArray(destArr)) {\n      destArr.splice(destination.index, 0, draggedComp)\n    }\n\n    const srcChildren = sourceParent[GEA_CHILD_COMPONENTS]\n    if (Array.isArray(srcChildren)) {\n      const ci = srcChildren.indexOf(draggedComp)\n      if (ci !== -1) srcChildren.splice(ci, 1)\n    }\n    const destChildren = destParent[GEA_CHILD_COMPONENTS]\n    if (Array.isArray(destChildren) && !destChildren.includes(draggedComp)) {\n      destChildren.push(draggedComp)\n    }\n    draggedComp.parentComponent = destParent\n  }\n\n  private _findCompiledArray(parent: any, child: any): { key: PropertyKey; arr: any[]; index: number } | null {\n    const stringKeys = Object.keys(parent)\n    const symbolKeys = Object.getOwnPropertySymbols(parent)\n    for (const key of stringKeys) {\n      if (key.startsWith('_') && key.endsWith('Items') && Array.isArray((parent as any)[key])) {\n        const arr = (parent as any)[key] as any[]\n        const idx = arr.indexOf(child)\n        if (idx !== -1) return { key, arr, index: idx }\n      }\n    }\n    for (const key of symbolKeys) {\n      if (String(key).includes('gea.listItems') && Array.isArray((parent as any)[key])) {\n        const arr = (parent as any)[key] as any[]\n        const idx = arr.indexOf(child)\n        if (idx !== -1) return { key, arr, index: idx }\n      }\n    }\n    return null\n  }\n\n  private _animateDrop(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this._sourceEl || !this._placeholder) return resolve()\n      const phRect = this._placeholder.getBoundingClientRect()\n      this._sourceEl.style.transition =\n        'transform 0.2s cubic-bezier(0.2, 0, 0, 1), rotate 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)'\n      this._sourceEl.style.transform = `translate(${phRect.left}px, ${phRect.top}px)`\n      this._sourceEl.style.rotate = '0deg'\n      this._sourceEl.style.boxShadow = 'none'\n      let done = false\n      const finish = () => {\n        if (done) return\n        done = true\n        resolve()\n      }\n      this._sourceEl.addEventListener('transitionend', finish, { once: true })\n      setTimeout(finish, 250)\n    })\n  }\n\n  private _animateReturn(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this._sourceEl || !this._sourceRect) return resolve()\n      let targetX = this._sourceRect.left\n      let targetY = this._sourceRect.top\n      if (this._placeholder?.parentElement) {\n        const phRect = this._placeholder.getBoundingClientRect()\n        targetX = phRect.left\n        targetY = phRect.top\n      }\n      this._sourceEl.style.transition =\n        'transform 0.2s cubic-bezier(0.2, 0, 0, 1), rotate 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)'\n      this._sourceEl.style.transform = `translate(${targetX}px, ${targetY}px)`\n      this._sourceEl.style.rotate = '0deg'\n      this._sourceEl.style.boxShadow = 'none'\n      let done = false\n      const finish = () => {\n        if (done) return\n        done = true\n        resolve()\n      }\n      this._sourceEl.addEventListener('transitionend', finish, { once: true })\n      setTimeout(finish, 250)\n    })\n  }\n\n  private _removeGlobalListeners() {\n    document.removeEventListener('pointermove', this._boundMove)\n    document.removeEventListener('pointerup', this._boundUp)\n    document.removeEventListener('keydown', this._boundKeyDown)\n  }\n\n  private _cleanup() {\n    if (this._cleanedUp) return\n    this._cleanedUp = true\n\n    this._placeholder?.remove()\n    this._placeholder = null\n    this._sourceEl = null\n    this._sourceRect = null\n\n    this._dragging = false\n    this._started = false\n    this._draggedId = ''\n    this._currentDroppableId = null\n  }\n\n  destroy() {\n    this._removeGlobalListeners()\n    if (this._dragging) {\n      if (this._sourceEl) this._returnToSource()\n      this._cleanup()\n    }\n    if (this._docListenerAttached && typeof document !== 'undefined') {\n      document.removeEventListener('pointerdown', this._boundDocDown, true)\n      this._docListenerAttached = false\n    }\n    this.droppables.clear()\n    this.onDragEnd = null\n  }\n}\n\nexport const dndManager = new DndManager()\n"],"mappings":"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"}
+{"version":3,"file":"dnd-manager.mjs","names":[],"sources":["../src/components/dnd-manager.ts"],"sourcesContent":["import {\n  GEA_DOM_COMPONENT,\n  GEA_PARENT_COMPONENT,\n  GEA_PROXY_GET_RAW_TARGET,\n  stashComponentForTransfer,\n} from '@geajs/core'\n\nexport interface DragResult {\n  draggableId: string\n  source: { droppableId: string; index: number }\n  destination: { droppableId: string; index: number }\n}\n\nconst DRAG_THRESHOLD_SQ = 25\nconst DRAGGABLE_SEL = '[data-draggable-id]'\nconst DROPPABLE_SEL = '[data-droppable-id]'\n\nfunction _rawComp(comp: any): any {\n  return comp?.[GEA_PROXY_GET_RAW_TARGET] ?? comp\n}\n\nclass DndManager {\n  droppables = new Map<string, HTMLElement>()\n\n  private _onDragEnd: ((result: DragResult) => void) | null = null\n  get onDragEnd() {\n    return this._onDragEnd\n  }\n  set onDragEnd(fn: ((result: DragResult) => void) | null) {\n    this._onDragEnd = fn\n    if (fn) this._ensureDocListener()\n  }\n\n  private _dragging = false\n  private _started = false\n  private _draggedId = ''\n  private _sourceDroppableId = ''\n  private _sourceIndex = 0\n  private _sourceEl: HTMLElement | null = null\n  private _sourceHeight = 0\n  private _sourceRect: DOMRect | null = null\n  private _savedCssText = ''\n  private _placeholder: HTMLElement | null = null\n  private _startX = 0\n  private _startY = 0\n  private _offsetX = 0\n  private _offsetY = 0\n  private _currentDroppableId: string | null = null\n  private _currentIndex = 0\n  private _lastClientY = 0\n  private _cleanedUp = false\n\n  private _boundMove = this._onPointerMove.bind(this)\n  private _boundUp = this._onPointerUp.bind(this)\n  private _boundKeyDown = this._onKeyDown.bind(this)\n  private _boundDocDown = this._onDocumentPointerDown.bind(this)\n  private _docListenerAttached = false\n\n  get isDragging() {\n    return this._started\n  }\n\n  private _ensureDocListener() {\n    if (this._docListenerAttached || typeof document === 'undefined') return\n    document.addEventListener('pointerdown', this._boundDocDown, true)\n    this._docListenerAttached = true\n  }\n\n  private _onDocumentPointerDown(e: PointerEvent) {\n    const el = (e.target as HTMLElement).closest?.(DRAGGABLE_SEL) as HTMLElement\n    if (!el) return\n    this.startTracking(e, el.dataset.draggableId!, el)\n  }\n\n  registerDroppable(id: string, el: HTMLElement) {\n    this.droppables.set(id, el)\n    this._ensureDocListener()\n  }\n\n  unregisterDroppable(id: string) {\n    this.droppables.delete(id)\n  }\n\n  startTracking(e: PointerEvent, draggableId: string, el: HTMLElement) {\n    if (this._dragging || e.button !== 0) return\n    this._ensureDocListener()\n\n    const droppableEl = el.closest(DROPPABLE_SEL) as HTMLElement\n    if (!droppableEl) return\n\n    const droppableId = droppableEl.dataset.droppableId!\n    const siblings = Array.from(droppableEl.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n    const sourceIndex = siblings.indexOf(el)\n    if (sourceIndex === -1) return\n\n    this._dragging = true\n    this._started = false\n    this._cleanedUp = false\n    this._draggedId = draggableId\n    this._sourceDroppableId = droppableId\n    this._sourceIndex = sourceIndex\n    this._sourceEl = el\n\n    const rect = el.getBoundingClientRect()\n    this._sourceHeight = rect.height\n    this._sourceRect = rect\n    this._startX = e.clientX\n    this._startY = e.clientY\n    this._lastClientY = e.clientY\n    this._offsetX = e.clientX - rect.left\n    this._offsetY = e.clientY - rect.top\n\n    document.addEventListener('pointermove', this._boundMove)\n    document.addEventListener('pointerup', this._boundUp)\n    document.addEventListener('keydown', this._boundKeyDown)\n    e.preventDefault()\n  }\n\n  private _onPointerMove(e: PointerEvent) {\n    if (!this._dragging) return\n\n    if (!this._started) {\n      const dx = e.clientX - this._startX\n      const dy = e.clientY - this._startY\n      if (dx * dx + dy * dy < DRAG_THRESHOLD_SQ) return\n      this._initDrag()\n      this._updateTarget(e.clientX, e.clientY)\n      return\n    }\n\n    this._sourceEl!.style.transform = `translate(${e.clientX - this._offsetX}px, ${e.clientY - this._offsetY}px)`\n    this._updateTarget(e.clientX, e.clientY)\n    this._lastClientY = e.clientY\n  }\n\n  private _initDrag() {\n    this._started = true\n    const el = this._sourceEl!\n    const rect = this._sourceRect!\n\n    document.querySelectorAll(DROPPABLE_SEL).forEach((dropEl) => {\n      const id = (dropEl as HTMLElement).dataset.droppableId!\n      if (!this.droppables.has(id)) {\n        this.droppables.set(id, dropEl as HTMLElement)\n      }\n    })\n\n    const elMargin = getComputedStyle(el).marginBottom\n    this._savedCssText = el.style.cssText\n\n    const placeholder = document.createElement('div')\n    placeholder.className = 'gea-dnd-placeholder'\n    placeholder.style.height = rect.height + 'px'\n    placeholder.style.marginBottom = elMargin\n    placeholder.style.transition = 'none'\n    el.parentElement!.insertBefore(placeholder, el)\n\n    document.body.appendChild(el)\n    Object.assign(el.style, {\n      position: 'fixed',\n      top: '0px',\n      left: '0',\n      width: rect.width + 'px',\n      height: rect.height + 'px',\n      transform: `translate(${rect.left}px, ${rect.top}px)`,\n      // rotate: '0deg',\n      // transition: 'rotate 0.15s ease, box-shadow 0.15s ease',\n      pointerEvents: 'none',\n      zIndex: '99999',\n      margin: '0',\n      willChange: 'transform',\n      boxShadow: 'none',\n    })\n    el.offsetHeight\n    // el.style.rotate = '3deg'\n    el.style.boxShadow = '5px 10px 30px 0px rgba(9, 30, 66, 0.15)'\n\n    this._placeholder = placeholder\n\n    this._currentDroppableId = this._sourceDroppableId\n    this._currentIndex = this._sourceIndex\n  }\n\n  private _updateTarget(clientX: number, clientY: number) {\n    let foundId: string | null = null\n    let foundEl: HTMLElement | null = null\n\n    for (const [id, el] of this.droppables) {\n      const r = el.getBoundingClientRect()\n      if (clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom) {\n        foundId = id\n        foundEl = el\n        break\n      }\n    }\n\n    if (!foundEl || foundId === null) {\n      this._currentDroppableId = null\n      return\n    }\n\n    const items = Array.from(foundEl.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n    const movingDown = clientY >= this._lastClientY\n    const threshold = movingDown ? 0 : 1\n    let insertIndex = items.length\n    for (let i = 0; i < items.length; i++) {\n      const r = items[i].getBoundingClientRect()\n      if (clientY < r.top + r.height * threshold) {\n        insertIndex = i\n        break\n      }\n    }\n\n    this._currentDroppableId = foundId\n    this._currentIndex = insertIndex\n\n    if (!this._placeholder) return\n\n    const refNode = (items[insertIndex] as HTMLElement) || null\n    if (this._placeholder.parentElement !== foundEl || this._placeholder.nextElementSibling !== refNode) {\n      if (this._placeholder.parentElement) {\n        const ghost = document.createElement('div')\n        ghost.style.height = this._sourceHeight + 'px'\n        ghost.style.marginBottom = this._placeholder.style.marginBottom\n        ghost.style.transition = 'height 0.2s cubic-bezier(0.2, 0, 0, 1)'\n        ghost.style.overflow = 'hidden'\n        this._placeholder.parentElement.insertBefore(ghost, this._placeholder)\n        ghost.offsetHeight\n        ghost.style.height = '0px'\n        ghost.style.marginBottom = '0px'\n        ghost.addEventListener('transitionend', () => ghost.remove(), { once: true })\n        setTimeout(() => ghost.remove(), 250)\n      }\n\n      this._placeholder.style.transition = 'none'\n      this._placeholder.style.height = '0px'\n      foundEl.insertBefore(this._placeholder, refNode)\n      this._placeholder.offsetHeight\n      this._placeholder.style.transition = 'height 0.2s cubic-bezier(0.2, 0, 0, 1)'\n      this._placeholder.style.height = this._sourceHeight + 'px'\n    }\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Escape' && this._dragging) {\n      this._cancelDrag()\n    }\n  }\n\n  private _cancelDrag() {\n    this._removeGlobalListeners()\n    if (!this._started) {\n      this._dragging = false\n      return\n    }\n\n    this._animateReturn().then(() => {\n      this._returnToSource()\n      this._cleanup()\n    })\n  }\n\n  private _onPointerUp(_e: PointerEvent) {\n    this._removeGlobalListeners()\n\n    if (!this._started) {\n      this._dragging = false\n      return\n    }\n\n    const destination =\n      this._currentDroppableId !== null ? { droppableId: this._currentDroppableId, index: this._currentIndex } : null\n\n    const samePosition =\n      destination && destination.droppableId === this._sourceDroppableId && destination.index === this._sourceIndex\n\n    if (destination && this._placeholder && !samePosition) {\n      const result: DragResult = {\n        draggableId: this._draggedId,\n        source: { droppableId: this._sourceDroppableId, index: this._sourceIndex },\n        destination,\n      }\n      this._animateDrop().then(() => {\n        this._restoreElStyles()\n        // Stash the component for cross-list transfer so the destination's\n        // reconciliation can adopt it (DOM subtree intact) instead of\n        // disposing + recreating it from scratch.\n        const draggedComp = this._getComponentFromElement(this._sourceEl)\n        if (draggedComp) {\n          stashComponentForTransfer(draggedComp)\n        }\n        if (this._placeholder?.parentElement) {\n          this._placeholder.remove()\n        }\n        this._placeholder = null\n        if (this._sourceEl?.parentElement === document.body) {\n          this._sourceEl.remove()\n        }\n        this._onDragEnd?.(result)\n        this._cleanup()\n      })\n    } else {\n      this._animateReturn().then(() => {\n        this._returnToSource()\n        this._cleanup()\n      })\n    }\n  }\n\n  private _getComponentFromElement(el: HTMLElement | null): any {\n    let current: HTMLElement | null = el\n    while (current) {\n      const comp = (current as any)[GEA_DOM_COMPONENT]\n      if (comp) return comp\n      current = current.parentElement\n    }\n    return null\n  }\n\n  private _restoreElStyles() {\n    if (!this._sourceEl) return\n    this._sourceEl.style.cssText = this._savedCssText\n  }\n\n  private _returnToSource() {\n    if (!this._sourceEl) return\n    this._restoreElStyles()\n    if (this._placeholder?.parentElement) {\n      this._placeholder.parentElement.insertBefore(this._sourceEl, this._placeholder)\n    } else {\n      const container = this.droppables.get(this._sourceDroppableId)\n      if (container) {\n        const items = Array.from(container.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n        container.insertBefore(this._sourceEl, items[this._sourceIndex] || null)\n      }\n    }\n  }\n\n  private _performTransfer(destination: { droppableId: string; index: number }) {\n    const sourceEl = this._sourceEl\n    if (!sourceEl) return\n\n    const destContainer = this.droppables.get(destination.droppableId)\n    if (!destContainer) return\n\n    const destItems = Array.from(destContainer.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))\n    const refNode = (destItems[destination.index] as HTMLElement) || null\n    destContainer.insertBefore(sourceEl, refNode)\n\n    const draggedComp = this._getComponentFromElement(sourceEl)\n    if (!draggedComp) return\n\n    const rawDragged = _rawComp(draggedComp)\n    const sourceParent = rawDragged[GEA_PARENT_COMPONENT]\n    if (!sourceParent) return\n\n    const srcArr = this._findCompiledArray(sourceParent, draggedComp)\n    if (!srcArr) return\n\n    const destParent = this._getComponentFromElement(destContainer)\n    if (!destParent) return\n\n    srcArr.arr.splice(srcArr.index, 1)\n    const destArr = destParent[srcArr.key]\n    if (Array.isArray(destArr)) {\n      destArr.splice(destination.index, 0, draggedComp)\n    }\n\n    // Update the parent component pointer on the raw instance (symbol-keyed, not string prop).\n    rawDragged[GEA_PARENT_COMPONENT] = destParent\n  }\n\n  private _findCompiledArray(parent: any, child: any): { key: symbol; arr: any[]; index: number } | null {\n    // Component array lists are stored under geaListItemsSymbol(arrayPropName) symbol keys.\n    // Walk the symbol keys of the parent to find which list contains the child.\n    for (const sym of Object.getOwnPropertySymbols(parent)) {\n      const desc = sym.description ?? ''\n      if (!desc.startsWith('gea.listItems.')) continue\n      const arr = parent[sym]\n      if (!Array.isArray(arr)) continue\n      const idx = arr.indexOf(child)\n      if (idx !== -1) return { key: sym, arr, index: idx }\n    }\n    return null\n  }\n\n  private _animateDrop(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this._sourceEl || !this._placeholder) return resolve()\n      const phRect = this._placeholder.getBoundingClientRect()\n      this._sourceEl.style.transition =\n        'transform 0.2s cubic-bezier(0.2, 0, 0, 1), rotate 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)'\n      this._sourceEl.style.transform = `translate(${phRect.left}px, ${phRect.top}px)`\n      this._sourceEl.style.rotate = '0deg'\n      this._sourceEl.style.boxShadow = 'none'\n      let done = false\n      const finish = () => {\n        if (done) return\n        done = true\n        resolve()\n      }\n      this._sourceEl.addEventListener('transitionend', finish, { once: true })\n      setTimeout(finish, 250)\n    })\n  }\n\n  private _animateReturn(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this._sourceEl || !this._sourceRect) return resolve()\n      let targetX = this._sourceRect.left\n      let targetY = this._sourceRect.top\n      if (this._placeholder?.parentElement) {\n        const phRect = this._placeholder.getBoundingClientRect()\n        targetX = phRect.left\n        targetY = phRect.top\n      }\n      this._sourceEl.style.transition =\n        'transform 0.2s cubic-bezier(0.2, 0, 0, 1), rotate 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)'\n      this._sourceEl.style.transform = `translate(${targetX}px, ${targetY}px)`\n      this._sourceEl.style.rotate = '0deg'\n      this._sourceEl.style.boxShadow = 'none'\n      let done = false\n      const finish = () => {\n        if (done) return\n        done = true\n        resolve()\n      }\n      this._sourceEl.addEventListener('transitionend', finish, { once: true })\n      setTimeout(finish, 250)\n    })\n  }\n\n  private _removeGlobalListeners() {\n    document.removeEventListener('pointermove', this._boundMove)\n    document.removeEventListener('pointerup', this._boundUp)\n    document.removeEventListener('keydown', this._boundKeyDown)\n  }\n\n  private _cleanup() {\n    if (this._cleanedUp) return\n    this._cleanedUp = true\n\n    this._placeholder?.remove()\n    this._placeholder = null\n    this._sourceEl = null\n    this._sourceRect = null\n\n    this._dragging = false\n    this._started = false\n    this._draggedId = ''\n    this._currentDroppableId = null\n  }\n\n  destroy() {\n    this._removeGlobalListeners()\n    if (this._dragging) {\n      if (this._sourceEl) this._returnToSource()\n      this._cleanup()\n    }\n    if (this._docListenerAttached && typeof document !== 'undefined') {\n      document.removeEventListener('pointerdown', this._boundDocDown, true)\n      this._docListenerAttached = false\n    }\n    this.droppables.clear()\n    this.onDragEnd = null\n  }\n}\n\nexport const dndManager = new DndManager()\n"],"mappings":"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"}

package/dist/drag-drop-context.mjs

@@ -1,9 +1,9 @@
 import { dndManager } from "./dnd-manager.mjs";
-import { Component, GEA_CTOR_TAG_NAME, GEA_ELEMENT } from "@geajs/core";
+import { Component, GEA_ELEMENT, GEA_INSTANTIATE_CHILD_COMPONENTS, GEA_MOUNT_COMPILED_CHILD_COMPONENTS, GEA_ON_PROP_CHANGE, GEA_PATCH_NODE } from "@geajs/core";
 //#region src/components/drag-drop-context.tsx
 var DragDropContext = class extends Component {
 	static {
-		this[GEA_CTOR_TAG_NAME] = "drag-drop-context";
+		this.__geaTagName = "drag-drop-context";
 	}
 	created() {
 		dndManager.onDragEnd = (result) => {
@@ -17,22 +17,29 @@ var DragDropContext = class extends Component {
 	template(props) {
 		return `<div id="${this.id}" class="${`gea-dnd-context ${props.class || ""}`.trim()}">${props.children}</div>`;
 	}
-	__onPropChange(key, value) {
+	[GEA_ON_PROP_CHANGE](key, value) {
 		if (key === "class") {
 			const __el = this[GEA_ELEMENT];
 			this.props;
 			const __boundValue = `gea-dnd-context ${value || ""}`;
 			if (__el) {
-				const __newClass = (__boundValue != null ? String(__boundValue) : "").trim();
+				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		}
 		if (key === "children") {
 			const __el = this[GEA_ELEMENT];
-			if (__el && __el.innerHTML !== value) {
-				__el.innerHTML = value;
-				this.instantiateChildComponents_();
-				if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+			if (__el) {
+				const __tw = document.createElement("template");
+				__tw.innerHTML = value;
+				const __newEl = __tw.content.firstElementChild;
+				const __existEl = __el.firstElementChild;
+				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
+				else if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
+					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
+				}
 			}
 		}
 	}

package/dist/drag-drop-context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drag-drop-context.mjs","names":["Component","GEA_RENDERED","GEA_ELEMENT","GEA_MAPS","GEA_CONDS","GEA_RESET_ELS","GEA_OBSERVE","GEA_OBSERVE_LIST","GEA_EL","GEA_UPDATE_TEXT","GEA_REQUEST_RENDER","GEA_UPDATE_PROPS","GEA_SYNC_MAP","GEA_REGISTER_MAP","GEA_PATCH_COND","GEA_REGISTER_COND","GEA_REFRESH_LIST","GEA_RECONCILE_LIST","GEA_ENSURE_ARRAY_CONFIGS","GEA_APPLY_LIST_CHANGES","GEA_SWAP_CHILD","GEA_SWAP_STATE_CHILDREN","GEA_CHILD","GEA_LIST_CONFIG_REFRESHING","GEA_DOM_KEY","GEA_DOM_ITEM","GEA_DOM_PROPS","GEA_MAP_CONFIG_TPL","GEA_MAP_CONFIG_PREV","GEA_MAP_CONFIG_COUNT","geaCondPatchedSymbol","geaCondValueSymbol","geaObservePrevSymbol","geaPrevGuardSymbol","GEA_SETUP_LOCAL_STATE_OBSERVERS","geaSanitizeAttr","geaEscapeHtml","GEA_CTOR_TAG_NAME","dndManager","DragResult","DragDropContext","created","onDragEnd","result","props","dispose","destroy","template","__id","id","class","trim","children","__onPropChange","key","value","__el","__boundValue","__newClass","String","className","innerHTML","instantiateChildComponents_","parentComponent","mountCompiledChildComponents_"],"sources":["../src/components/drag-drop-context.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { dndManager } from './dnd-manager'\nimport type { DragResult } from './dnd-manager'\n\nexport default class DragDropContext extends Component {\n  created() {\n    dndManager.onDragEnd = (result: DragResult) => {\n      ;(this.props as any).onDragEnd?.(result)\n    }\n  }\n\n  dispose() {\n    dndManager.destroy()\n    super.dispose()\n  }\n\n  template(props: any) {\n    return <div class={`gea-dnd-context ${props.class || ''}`}>{props.children}</div>\n  }\n}\n"],"mappings":";;;AAIA,IAAqBwC,kBAArB,cAA6CxC,UAAU;;OAAAqC,qBAAA;;CACrDI,UAAU;AACRH,aAAWI,aAAaC,WAAuB;AAC3C,QAAKC,MAAcF,YAAYC,OAAO;;;CAI5CE,UAAU;AACRP,aAAWQ,SAAS;AACpB,QAAMD,SAAS;;CAGjBE,SAASH,OAAY;AACnB,SAAA,YADmB,KAAAK,GACnB,WAAmB,mBAAmBL,MAAMM,SAAS,KAAIC,MAAA,CAAA,IAAGP,MAAMQ,SAAQ;;CAhB9EC,eAAsBC,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAAtD;AAeX,QAAA0C;GAAA,MAAAa,eAAA,mBAAAF,SACoC;AAAE,OAAAC,MAAA;IAAA,MAAAE,cAAAD,gBAAA,OAAAE,OAAAF,aAAA,GAAA,IAAAN,MAAA;AAAA,QAAAK,KAAAI,cAAAF,WAAAF,MAAAI,YAAAF;;;AAAA,MAAAJ,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAAtD;AAAA,OAAAsD,QAAAA,KAAAK,cAAAN,OAAA;AAAAC,SAAAK,YAAAN;AAAA,SAAAO,6BAAA;AAAA,QAAA,KAAAC,gBAAA,MAAAA,gBAAAC,+BAAA"}
+{"version":3,"file":"drag-drop-context.mjs","names":["Component","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","dndManager","DragResult","DragDropContext","__geaTagName","created","onDragEnd","result","props","dispose","destroy","template","__id","id","class","trim","children","key","value","__el","__boundValue","__newClass","String","replace","className","__tw","document","createElement","innerHTML","__newEl","content","firstElementChild","__existEl","childNodes","length","constructor","parentComponent"],"sources":["../src/components/drag-drop-context.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { dndManager } from './dnd-manager'\nimport type { DragResult } from './dnd-manager'\n\nexport default class DragDropContext extends Component {\n  created() {\n    dndManager.onDragEnd = (result: DragResult) => {\n      ;(this.props as any).onDragEnd?.(result)\n    }\n  }\n\n  dispose() {\n    dndManager.destroy()\n    super.dispose()\n  }\n\n  template(props: any) {\n    return <div class={`gea-dnd-context ${props.class || ''}`}>{props.children}</div>\n  }\n}\n"],"mappings":";;;AAIA,IAAqBQ,kBAArB,cAA6CR,UAAU;;sBAAA;;CACrDU,UAAU;AACRJ,aAAWK,aAAaC,WAAuB;AAC3C,QAAKC,MAAcF,YAAYC,OAAO;;;CAI5CE,UAAU;AACRR,aAAWS,SAAS;AACpB,QAAMD,SAAS;;CAGjBE,SAASH,OAAY;AACnB,SAAA,YADmB,KAAAK,GACnB,WAAmB,mBAAmBL,MAAMM,SAAS,KAAIC,MAAA,CAAA,IAAGP,MAAMQ,SAAQ;;CAhB9E,CAAApB,oBAAwBqB,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAAtB;AAeb,QAAAW;GAAA,MAAAY,eACE,mBAAmBF,SAAe;AAAI,OAAAC,MAhB7D;IACM,MAAME,aADXC,OAAOF,gBAAyB,GAAG,CAAEL,MAAM,CAACQ,QAAQ,QAAQ,IACf;AACxC,QAAIJ,KAAsBK,cAAcH,WAAYF,MAAsBK,YAAYH;;;AACvF,MAAAJ,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAAtB;AAAA,OAAAsB,MAHL;IACI,MAAMM,OAAOC,SAASC,cAAc,WAAW;AAC/CF,SAAKG,YAASV;IACd,MAAMW,UAAUJ,KAAKK,QAAQC;IAC7B,MAAMC,YAAYb,KAAsBY;AACxC,QAAIF,WAAWG,aAAaP,KAAKK,QAAQG,WAAWC,WAAW,EAC7D,MAAKC,YAAWrC,gBAAwBkC,WAAWH,SAAS,KAAK;aACxDV,KAAsBS,cAASV,OAA4B;AACpEC,UAAsBS,YAASV;AAC/B,UAAInB,mCAAyB;AAC7B,SAAI,KAAKqC,gBAAiB,MAAKA,gBAAepC,sCAAyB"}

package/dist/draggable.mjs

@@ -1,5 +1,5 @@
 import { dndManager } from "./dnd-manager.mjs";
-import { Component, GEA_CTOR_TAG_NAME, GEA_ELEMENT } from "@geajs/core";
+import { Component, GEA_ELEMENT, GEA_INSTANTIATE_CHILD_COMPONENTS, GEA_MOUNT_COMPILED_CHILD_COMPONENTS, GEA_ON_PROP_CHANGE, GEA_PATCH_NODE } from "@geajs/core";
 //#region src/components/draggable.tsx
 var Draggable = class extends Component {
 	constructor(..._args) {
@@ -7,7 +7,7 @@ var Draggable = class extends Component {
 		this._didDrag = false;
 	}
 	static {
-		this[GEA_CTOR_TAG_NAME] = "draggable";
+		this.__geaTagName = "gea-draggable";
 	}
 	_onPointerDown(e) {
 		const el = e.currentTarget.closest(".gea-draggable");
@@ -16,52 +16,72 @@ var Draggable = class extends Component {
 		dndManager.startTracking(e, this.props.draggableId, el);
 	}
 	template(props) {
-		return `<div id="${this.id}" class="${`gea-draggable ${props.class || ""}`.trim()}"${props.draggableId == null || props.draggableId === false ? "" : ` data-draggable-id="${props.draggableId}"`}${props.index == null || props.index === false ? "" : ` data-index="${props.index}"`}${` pointerdown="${(e) => this._onPointerDown(e)}"`}>${props.children}</div>`;
+		return `<div id="${this.id}" class="${`gea-draggable ${props.class || ""}`.trim()}"${props.draggableId == null || props.draggableId === false ? "" : ` data-draggable-id="${props.draggableId}"`}${props.index == null || props.index === false ? "" : ` data-index="${props.index}"`}>${props.children}</div>`;
 	}
 	get events() {
 		if (this.__evts && this[GEA_ELEMENT]) return this.__evts;
-		const __geaEvtsResult = { click: { [`#${this.id}`]: (e, targetComponent) => this.__event_click_0(e, targetComponent) } };
+		const __id = this.id;
+		const __geaEvtsResult = {
+			pointerdown: { [`#${__id}`]: this.__event_pointerdown_0 },
+			click: { [`#${__id}`]: this.__event_click_1 }
+		};
 		if (this[GEA_ELEMENT]) this.__evts = __geaEvtsResult;
 		return __geaEvtsResult;
 	}
-	__event_click_0(e, targetComponent) {
+	__event_pointerdown_0(e, targetComponent) {
+		this._onPointerDown(e);
+	}
+	__event_click_1(e, targetComponent) {
 		if (dndManager.isDragging) {
 			e.preventDefault();
 			e.stopPropagation();
 		}
 	}
-	__onPropChange(key, value) {
+	[GEA_ON_PROP_CHANGE](key, value) {
 		if (key === "class") {
 			const __el = this[GEA_ELEMENT];
 			this.props;
 			const __boundValue = `gea-draggable ${value || ""}`;
 			if (__el) {
-				const __newClass = (__boundValue != null ? String(__boundValue) : "").trim();
+				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		}
 		if (key === "draggableId") {
 			const __el = this[GEA_ELEMENT];
-			if (__el) if (value === null || value === void 0) __el.removeAttribute("data-draggable-id");
-			else {
-				const __newAttr = String(value);
-				if (__el.getAttribute("data-draggable-id") !== __newAttr) __el.setAttribute("data-draggable-id", __newAttr);
+			if (__el) {
+				var __av = value;
+				if (__av == null || __av === false) __el.removeAttribute("data-draggable-id");
+				else {
+					const __newAttr = String(__av);
+					if (__el.getAttribute("data-draggable-id") !== __newAttr) __el.setAttribute("data-draggable-id", __newAttr);
+				}
 			}
 		}
 		if (key === "index") {
 			const __el = this[GEA_ELEMENT];
-			if (__el) if (value === null || value === void 0) __el.removeAttribute("data-index");
-			else {
-				const __newAttr = String(value);
-				if (__el.getAttribute("data-index") !== __newAttr) __el.setAttribute("data-index", __newAttr);
+			if (__el) {
+				var __av = value;
+				if (__av == null || __av === false) __el.removeAttribute("data-index");
+				else {
+					const __newAttr = String(__av);
+					if (__el.getAttribute("data-index") !== __newAttr) __el.setAttribute("data-index", __newAttr);
+				}
 			}
 		}
 		if (key === "children") {
 			const __el = this[GEA_ELEMENT];
-			if (__el && __el.innerHTML !== value) {
-				__el.innerHTML = value;
-				this.instantiateChildComponents_();
-				if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+			if (__el) {
+				const __tw = document.createElement("template");
+				__tw.innerHTML = value;
+				const __newEl = __tw.content.firstElementChild;
+				const __existEl = __el.firstElementChild;
+				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
+				else if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
+					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
+				}
 			}
 		}
 	}

package/dist/draggable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.mjs","names":["Component","GEA_RENDERED","GEA_ELEMENT","GEA_MAPS","GEA_CONDS","GEA_RESET_ELS","GEA_OBSERVE","GEA_OBSERVE_LIST","GEA_EL","GEA_UPDATE_TEXT","GEA_REQUEST_RENDER","GEA_UPDATE_PROPS","GEA_SYNC_MAP","GEA_REGISTER_MAP","GEA_PATCH_COND","GEA_REGISTER_COND","GEA_REFRESH_LIST","GEA_RECONCILE_LIST","GEA_ENSURE_ARRAY_CONFIGS","GEA_APPLY_LIST_CHANGES","GEA_SWAP_CHILD","GEA_SWAP_STATE_CHILDREN","GEA_CHILD","GEA_LIST_CONFIG_REFRESHING","GEA_DOM_KEY","GEA_DOM_ITEM","GEA_DOM_PROPS","GEA_MAP_CONFIG_TPL","GEA_MAP_CONFIG_PREV","GEA_MAP_CONFIG_COUNT","geaCondPatchedSymbol","geaCondValueSymbol","geaObservePrevSymbol","geaPrevGuardSymbol","GEA_SETUP_LOCAL_STATE_OBSERVERS","geaSanitizeAttr","geaEscapeHtml","GEA_CTOR_TAG_NAME","dndManager","Draggable","_didDrag","_onPointerDown","e","PointerEvent","el","currentTarget","HTMLElement","closest","startTracking","props","draggableId","template","__id","id","class","trim","index","children","events","__evts","__geaEvtsResult","click","targetComponent","__event_click_0","isDragging","preventDefault","stopPropagation","__onPropChange","key","value","__el","__boundValue","__newClass","String","className","undefined","removeAttribute","__newAttr","getAttribute","setAttribute","innerHTML","instantiateChildComponents_","parentComponent","mountCompiledChildComponents_"],"sources":["../src/components/draggable.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { dndManager } from './dnd-manager'\n\nexport default class Draggable extends Component {\n  _didDrag = false\n\n  _onPointerDown(e: PointerEvent) {\n    const el = (e.currentTarget as HTMLElement).closest('.gea-draggable') as HTMLElement\n    if (!el) return\n    this._didDrag = false\n    dndManager.startTracking(e, this.props.draggableId as string, el)\n  }\n\n  template(props: any) {\n    return (\n      <div\n        class={`gea-draggable ${props.class || ''}`}\n        data-draggable-id={props.draggableId}\n        data-index={props.index}\n        pointerdown={(e: PointerEvent) => this._onPointerDown(e)}\n        click={(e: MouseEvent) => {\n          if (dndManager.isDragging) {\n            e.preventDefault()\n            e.stopPropagation()\n          }\n        }}\n      >\n        {props.children}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;AAGA,IAAqBuC,YAArB,cAAuCvC,UAAU;;;kBACpC;;;OADoCqC,qBAAA;;CAG/CI,eAAeC,GAAiB;EAC9B,MAAME,KAAMF,EAAEG,cAA8BE,QAAQ,iBAAiB;AACrE,MAAI,CAACH,GAAI;AACT,OAAKJ,WAAW;AAChBF,aAAWU,cAAcN,GAAG,KAAKO,MAAMC,aAAuBN,GAAG;;CAGnEO,SAASF,OAAY;AACnB,SAAA,YADmB,KAAAI,GACnB,WAEW,iBAAiBJ,MAAMK,SAAS,KAAIC,MAAA,CAAA,GACxBN,MAAMC,eAAW,QAAjBD,MAAMC,gBAAW,QAAA,KAAA,uBAAjBD,MAAMC,YAAW,KACxBD,MAAMO,SAAK,QAAXP,MAAMO,UAAK,QAAA,KAAA,gBAAXP,MAAMO,MAAK,KACiC,kBAA1Cd,MAAoB,KAAKD,eAAeC,EAAE,CAAA,GAAA,GAQvDO,MAAMQ,SAAQ;;CAGpB,IAAAC,SAAA;AAAA,MAAA,KAAAC,UAAA,KAAAzD,aAAA,QAAA,KAAAyD;EAAA,MAAAC,kBAAA,EAAAC,OAAA,GAAA,IAAA,KAAAR,QAAAX,GAAAoB,oBAAA,KAAAC,gBAAArB,GAAAoB,gBAAA,EAAA,EAAA;AAAA,MAAA,KAAA5D,aAAA,MAAAyD,SAAAC;AAAA,SAAAA;;CA7BHG,gBAAsBrB,GAAGoB,iBAAiB;AAAA,MAoB5BxB,WAAW0B,YAAU;AACvBtB,KAAEuB,gBAAc;AAChBvB,KAAEwB,iBAAe;;;CAtB7BC,eAAsBC,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAApE;AAYX,QAAA+C;GAAA,MAAAsB,eAAA,iBAAAF,SAG0B;AAAE,OAAAC,MAAA;IAAA,MAAAE,cAAAD,gBAAA,OAAAE,OAAAF,aAAA,GAAA,IAAAhB,MAAA;AAAA,QAAAe,KAAAI,cAAAF,WAAAF,MAAAI,YAAAF;;;AAAA,MAAAJ,QAAA,eAAA;GAAA,MAAAE,OAAA,KAAApE;AAAA,OAAAoE,KAAA,KAAAD,UAAA,QAAAA,UAAAM,KAAAA,EAAAL,MAAAM,gBAAA,oBAAA;QAAA;IAAA,MAAAC,YAAAJ,OAAAJ,MAAA;AAAA,QAAAC,KAAAQ,aAAA,oBAAA,KAAAD,UAAAP,MAAAS,aAAA,qBAAAF,UAAA;;;AAAA,MAAAT,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAApE;AAAA,OAAAoE,KAAA,KAAAD,UAAA,QAAAA,UAAAM,KAAAA,EAAAL,MAAAM,gBAAA,aAAA;QAAA;IAAA,MAAAC,YAAAJ,OAAAJ,MAAA;AAAA,QAAAC,KAAAQ,aAAA,aAAA,KAAAD,UAAAP,MAAAS,aAAA,cAAAF,UAAA;;;AAAA,MAAAT,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAApE;AAAA,OAAAoE,QAAAA,KAAAU,cAAAX,OAAA;AAAAC,SAAAU,YAAAX;AAAA,SAAAY,6BAAA;AAAA,QAAA,KAAAC,gBAAA,MAAAA,gBAAAC,+BAAA"}
+{"version":3,"file":"draggable.mjs","names":["Component","GEA_ELEMENT","GEA_ON_PROP_CHANGE","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","dndManager","Draggable","__geaTagName","_didDrag","_onPointerDown","e","PointerEvent","el","currentTarget","HTMLElement","closest","startTracking","props","draggableId","template","__id","id","class","trim","index","children","events","__evts","__geaEvtsResult","pointerdown","__event_pointerdown_0","click","__event_click_1","targetComponent","isDragging","preventDefault","stopPropagation","key","value","__el","__boundValue","__newClass","String","replace","className","__av","removeAttribute","__newAttr","getAttribute","setAttribute","__tw","document","createElement","innerHTML","__newEl","content","firstElementChild","__existEl","childNodes","length","constructor","parentComponent"],"sources":["../src/components/draggable.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { dndManager } from './dnd-manager'\n\nexport default class Draggable extends Component {\n  _didDrag = false\n\n  _onPointerDown(e: PointerEvent) {\n    const el = (e.currentTarget as HTMLElement).closest('.gea-draggable') as HTMLElement\n    if (!el) return\n    this._didDrag = false\n    dndManager.startTracking(e, this.props.draggableId as string, el)\n  }\n\n  template(props: any) {\n    return (\n      <div\n        class={`gea-draggable ${props.class || ''}`}\n        data-draggable-id={props.draggableId}\n        data-index={props.index}\n        pointerdown={(e: PointerEvent) => this._onPointerDown(e)}\n        click={(e: MouseEvent) => {\n          if (dndManager.isDragging) {\n            e.preventDefault()\n            e.stopPropagation()\n          }\n        }}\n      >\n        {props.children}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;AAGA,IAAqBO,YAArB,cAAuCP,UAAU;;;kBACpC;;;sBADoC;;CAG/CU,eAAeC,GAAiB;EAC9B,MAAME,KAAMF,EAAEG,cAA8BE,QAAQ,iBAAiB;AACrE,MAAI,CAACH,GAAI;AACT,OAAKJ,WAAW;AAChBH,aAAWW,cAAcN,GAAG,KAAKO,MAAMC,aAAuBN,GAAG;;CAGnEO,SAASF,OAAY;AACnB,SAAA,YADmB,KAAAI,GACnB,WAEW,iBAAiBJ,MAAMK,SAAS,KAAIC,MAAA,CAAA,GACxBN,MAAMC,eAAW,QAAjBD,MAAMC,gBAAW,QAAA,KAAA,uBAAjBD,MAAMC,YAAW,KACxBD,MAAMO,SAAK,QAAXP,MAAMO,UAAK,QAAA,KAAA,gBAAXP,MAAMO,MAAK,GAAA,GAStBP,MAAMQ,SAAQ;;CAGpB,IAAAC,SAAA;AAAA,MAAA,KAAAC,UAAA,KAAA3B,aAAA,QAAA,KAAA2B;EAAA,MAAAP,OAAA,KAAAC;EAAA,MAAAO,kBAAA;GAAAC,aAAA,GAAA,IAAAT,SAAA,KAAAU,uBAAA;GAAAC,OAAA,GAAA,IAAAX,SAAA,KAAAY,iBAAA;GAAA;AAAA,MAAA,KAAAhC,aAAA,MAAA2B,SAAAC;AAAA,SAAAA;;CA7BHE,sBAAsBpB,GAAGuB,iBAAiB;AAkBA,OAAKxB,eAAeC,EAAE;;CAlBhEsB,gBAAsBtB,GAAGuB,iBAAiB;AAoBhC,MAAI5B,WAAW6B,YAAY;AACzBxB,KAAEyB,gBAAgB;AAClBzB,KAAE0B,iBAAiB;;;CAtB/B,CAAAnC,oBAAwBoC,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAAvC;AAYb,QAAAiB;GAAA,MAAAuB,eAGN,iBAAiBF,SAAe;AAAI,OAAAC,MAfnD;IACM,MAAME,aADXC,OAAOF,gBAAyB,GAAG,CAAEjB,MAAM,CAACoB,QAAQ,QAAQ,IACf;AACxC,QAAIJ,KAAsBK,cAAcH,WAAYF,MAAsBK,YAAYH;;;AACvF,MAAAJ,QAAA,eAAA;GAAA,MAAAE,OAAA,KAAAvC;AAAA,OAAAuC,MAAA;IAFC,IAAIM,OAAIP;AACR,QAAIO,QAAQ,QAAQA,SAAS,MAC3BN,MAAsBO,gBAAgB,oBAAoB;SACrD;KACL,MAAMC,YAAYL,OAAOG,KAAK;AAC9B,SAAIN,KAAsBS,aAAa,oBAAoB,KAAKD,UAC9DR,MAAsBU,aAAa,qBAAqBF,UAAU;;;;AACrE,MAAAV,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAAvC;AAAA,OAAAuC,MAAA;IAPD,IAAIM,OAAIP;AACR,QAAIO,QAAQ,QAAQA,SAAS,MAC3BN,MAAsBO,gBAAgB,aAAa;SAC9C;KACL,MAAMC,YAAYL,OAAOG,KAAK;AAC9B,SAAIN,KAAsBS,aAAa,aAAa,KAAKD,UACvDR,MAAsBU,aAAa,cAAcF,UAAU;;;;AAC9D,MAAAV,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAAvC;AAAA,OAAAuC,MARP;IACI,MAAMW,OAAOC,SAASC,cAAc,WAAW;AAC/CF,SAAKG,YAASf;IACd,MAAMgB,UAAUJ,KAAKK,QAAQC;IAC7B,MAAMC,YAAYlB,KAAsBiB;AACxC,QAAIF,WAAWG,aAAaP,KAAKK,QAAQG,WAAWC,WAAW,EAC7D,MAAKC,YAAW1D,gBAAwBuD,WAAWH,SAAS,KAAK;aACxDf,KAAsBc,cAASf,OAA4B;AACpEC,UAAsBc,YAASf;AAC/B,UAAInC,mCAAyB;AAC7B,SAAI,KAAK0D,gBAAiB,MAAKA,gBAAezD,sCAAyB"}

package/dist/droppable.mjs

@@ -1,5 +1,5 @@
 import { dndManager } from "./dnd-manager.mjs";
-import { Component, GEA_CTOR_TAG_NAME, GEA_ELEMENT } from "@geajs/core";
+import { Component, GEA_ELEMENT, GEA_INSTANTIATE_CHILD_COMPONENTS, GEA_MOUNT_COMPILED_CHILD_COMPONENTS, GEA_ON_PROP_CHANGE, GEA_PATCH_NODE } from "@geajs/core";
 //#region src/components/droppable.tsx
 var Droppable = class extends Component {
 	constructor(..._args) {
@@ -7,7 +7,7 @@ var Droppable = class extends Component {
 		this._registered = false;
 	}
 	static {
-		this[GEA_CTOR_TAG_NAME] = "droppable";
+		this.__geaTagName = "gea-droppable";
 	}
 	_registerWithManager() {
 		const el = this.el?.querySelector("[data-droppable-id]");
@@ -32,30 +32,40 @@ var Droppable = class extends Component {
 	template(props) {
 		return `<div id="${this.id}" class="${`gea-droppable ${props.class || ""}`.trim()}"${props.droppableId == null || props.droppableId === false ? "" : ` data-droppable-id="${props.droppableId}"`}>${props.children}</div>`;
 	}
-	__onPropChange(key, value) {
+	[GEA_ON_PROP_CHANGE](key, value) {
 		if (key === "class") {
 			const __el = this[GEA_ELEMENT];
 			this.props;
 			const __boundValue = `gea-droppable ${value || ""}`;
 			if (__el) {
-				const __newClass = (__boundValue != null ? String(__boundValue) : "").trim();
+				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		}
 		if (key === "droppableId") {
 			const __el = this[GEA_ELEMENT];
-			if (__el) if (value === null || value === void 0) __el.removeAttribute("data-droppable-id");
-			else {
-				const __newAttr = String(value);
-				if (__el.getAttribute("data-droppable-id") !== __newAttr) __el.setAttribute("data-droppable-id", __newAttr);
+			if (__el) {
+				var __av = value;
+				if (__av == null || __av === false) __el.removeAttribute("data-droppable-id");
+				else {
+					const __newAttr = String(__av);
+					if (__el.getAttribute("data-droppable-id") !== __newAttr) __el.setAttribute("data-droppable-id", __newAttr);
+				}
 			}
 		}
 		if (key === "children") {
 			const __el = this[GEA_ELEMENT];
-			if (__el && __el.innerHTML !== value) {
-				__el.innerHTML = value;
-				this.instantiateChildComponents_();
-				if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+			if (__el) {
+				const __tw = document.createElement("template");
+				__tw.innerHTML = value;
+				const __newEl = __tw.content.firstElementChild;
+				const __existEl = __el.firstElementChild;
+				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
+				else if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
+					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
+				}
 			}
 		}
 	}

package/dist/droppable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"droppable.mjs","names":["Component","GEA_RENDERED","GEA_ELEMENT","GEA_MAPS","GEA_CONDS","GEA_RESET_ELS","GEA_OBSERVE","GEA_OBSERVE_LIST","GEA_EL","GEA_UPDATE_TEXT","GEA_REQUEST_RENDER","GEA_UPDATE_PROPS","GEA_SYNC_MAP","GEA_REGISTER_MAP","GEA_PATCH_COND","GEA_REGISTER_COND","GEA_REFRESH_LIST","GEA_RECONCILE_LIST","GEA_ENSURE_ARRAY_CONFIGS","GEA_APPLY_LIST_CHANGES","GEA_SWAP_CHILD","GEA_SWAP_STATE_CHILDREN","GEA_CHILD","GEA_LIST_CONFIG_REFRESHING","GEA_DOM_KEY","GEA_DOM_ITEM","GEA_DOM_PROPS","GEA_MAP_CONFIG_TPL","GEA_MAP_CONFIG_PREV","GEA_MAP_CONFIG_COUNT","geaCondPatchedSymbol","geaCondValueSymbol","geaObservePrevSymbol","geaPrevGuardSymbol","GEA_SETUP_LOCAL_STATE_OBSERVERS","geaSanitizeAttr","geaEscapeHtml","GEA_CTOR_TAG_NAME","dndManager","Droppable","_registered","_registerWithManager","el","querySelector","HTMLElement","registerDroppable","props","droppableId","created","queueMicrotask","onAfterRender","dispose","unregisterDroppable","template","__id","id","class","trim","children","__onPropChange","key","value","__el","__boundValue","__newClass","String","className","undefined","removeAttribute","__newAttr","getAttribute","setAttribute","innerHTML","instantiateChildComponents_","parentComponent","mountCompiledChildComponents_"],"sources":["../src/components/droppable.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { dndManager } from './dnd-manager'\n\nexport default class Droppable extends Component {\n  private _registered = false\n\n  _registerWithManager() {\n    const el = this.el?.querySelector('[data-droppable-id]') as HTMLElement\n    if (el && !this._registered) {\n      dndManager.registerDroppable(this.props.droppableId as string, el)\n      this._registered = true\n    }\n  }\n\n  created() {\n    queueMicrotask(() => this._registerWithManager())\n  }\n\n  onAfterRender() {\n    this._registerWithManager()\n  }\n\n  dispose() {\n    if (this._registered) {\n      dndManager.unregisterDroppable(this.props.droppableId as string)\n      this._registered = false\n    }\n    super.dispose()\n  }\n\n  template(props: any) {\n    return (\n      <div class={`gea-droppable ${props.class || ''}`} data-droppable-id={props.droppableId}>\n        {props.children}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;AAGA,IAAqBuC,YAArB,cAAuCvC,UAAU;;;qBACzB;;;OADyBqC,qBAAA;;CAG/CI,uBAAuB;EACrB,MAAMC,KAAK,KAAKA,IAAIC,cAAc,sBAAsB;AACxD,MAAID,MAAM,CAAC,KAAKF,aAAa;AAC3BF,cAAWO,kBAAkB,KAAKC,MAAMC,aAAuBL,GAAG;AAClE,QAAKF,cAAc;;;CAIvBQ,UAAU;AACRC,uBAAqB,KAAKR,sBAAsB,CAAC;;CAGnDS,gBAAgB;AACd,OAAKT,sBAAsB;;CAG7BU,UAAU;AACR,MAAI,KAAKX,aAAa;AACpBF,cAAWc,oBAAoB,KAAKN,MAAMC,YAAsB;AAChE,QAAKP,cAAc;;AAErB,QAAMW,SAAS;;CAGjBE,SAASP,OAAY;AACnB,SAAA,YADmB,KAAAS,GACnB,WACc,iBAAiBT,MAAMU,SAAS,KAAIC,MAAA,CAAA,GAAqBX,MAAMC,eAAW,QAAjBD,MAAMC,gBAAW,QAAA,KAAA,uBAAjBD,MAAMC,YAAW,GAAA,GACnFD,MAAMY,SAAQ;;CAhCvBC,eAAsBC,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAA5D;AA6BX,QAAA4C;GAAA,MAAAiB,eAAA,iBAAAF,SAE6B;AAAE,OAAAC,MAAA;IAAA,MAAAE,cAAAD,gBAAA,OAAAE,OAAAF,aAAA,GAAA,IAAAN,MAAA;AAAA,QAAAK,KAAAI,cAAAF,WAAAF,MAAAI,YAAAF;;;AAAA,MAAAJ,QAAA,eAAA;GAAA,MAAAE,OAAA,KAAA5D;AAAA,OAAA4D,KAAA,KAAAD,UAAA,QAAAA,UAAAM,KAAAA,EAAAL,MAAAM,gBAAA,oBAAA;QAAA;IAAA,MAAAC,YAAAJ,OAAAJ,MAAA;AAAA,QAAAC,KAAAQ,aAAA,oBAAA,KAAAD,UAAAP,MAAAS,aAAA,qBAAAF,UAAA;;;AAAA,MAAAT,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAA5D;AAAA,OAAA4D,QAAAA,KAAAU,cAAAX,OAAA;AAAAC,SAAAU,YAAAX;AAAA,SAAAY,6BAAA;AAAA,QAAA,KAAAC,gBAAA,MAAAA,gBAAAC,+BAAA"}
+{"version":3,"file":"droppable.mjs","names":["Component","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","dndManager","Droppable","__geaTagName","_registered","_registerWithManager","el","querySelector","HTMLElement","registerDroppable","props","droppableId","created","queueMicrotask","onAfterRender","dispose","unregisterDroppable","template","__id","id","class","trim","children","key","value","__el","__boundValue","__newClass","String","replace","className","__av","removeAttribute","__newAttr","getAttribute","setAttribute","__tw","document","createElement","innerHTML","__newEl","content","firstElementChild","__existEl","childNodes","length","constructor","parentComponent"],"sources":["../src/components/droppable.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { dndManager } from './dnd-manager'\n\nexport default class Droppable extends Component {\n  private _registered = false\n\n  _registerWithManager() {\n    const el = this.el?.querySelector('[data-droppable-id]') as HTMLElement\n    if (el && !this._registered) {\n      dndManager.registerDroppable(this.props.droppableId as string, el)\n      this._registered = true\n    }\n  }\n\n  created() {\n    queueMicrotask(() => this._registerWithManager())\n  }\n\n  onAfterRender() {\n    this._registerWithManager()\n  }\n\n  dispose() {\n    if (this._registered) {\n      dndManager.unregisterDroppable(this.props.droppableId as string)\n      this._registered = false\n    }\n    super.dispose()\n  }\n\n  template(props: any) {\n    return (\n      <div class={`gea-droppable ${props.class || ''}`} data-droppable-id={props.droppableId}>\n        {props.children}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;AAGA,IAAqBO,YAArB,cAAuCP,UAAU;;;qBACzB;;;sBADyB;;CAG/CU,uBAAuB;EACrB,MAAMC,KAAK,KAAKA,IAAIC,cAAc,sBAAsB;AACxD,MAAID,MAAM,CAAC,KAAKF,aAAa;AAC3BH,cAAWQ,kBAAkB,KAAKC,MAAMC,aAAuBL,GAAG;AAClE,QAAKF,cAAc;;;CAIvBQ,UAAU;AACRC,uBAAqB,KAAKR,sBAAsB,CAAC;;CAGnDS,gBAAgB;AACd,OAAKT,sBAAsB;;CAG7BU,UAAU;AACR,MAAI,KAAKX,aAAa;AACpBH,cAAWe,oBAAoB,KAAKN,MAAMC,YAAsB;AAChE,QAAKP,cAAc;;AAErB,QAAMW,SAAS;;CAGjBE,SAASP,OAAY;AACnB,SAAA,YADmB,KAAAS,GACnB,WACc,iBAAiBT,MAAMU,SAAS,KAAIC,MAAA,CAAA,GAAqBX,MAAMC,eAAW,QAAjBD,MAAMC,gBAAW,QAAA,KAAA,uBAAjBD,MAAMC,YAAW,GAAA,GACnFD,MAAMY,SAAQ;;CAhCvB,CAAA1B,oBAAwB2B,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAA5B;AA6Bb,QAAAa;GAAA,MAAAgB,eAEH,iBAAiBF,SAAe;AAAI,OAAAC,MA/BtD;IACM,MAAME,aADXC,OAAOF,gBAAyB,GAAG,CAAEL,MAAM,CAACQ,QAAQ,QAAQ,IACf;AACxC,QAAIJ,KAAsBK,cAAcH,WAAYF,MAAsBK,YAAYH;;;AACvF,MAAAJ,QAAA,eAAA;GAAA,MAAAE,OAAA,KAAA5B;AAAA,OAAA4B,MAAA;IAFC,IAAIM,OAAIP;AACR,QAAIO,QAAQ,QAAQA,SAAS,MAC3BN,MAAsBO,gBAAgB,oBAAoB;SACrD;KACL,MAAMC,YAAYL,OAAOG,KAAK;AAC9B,SAAIN,KAAsBS,aAAa,oBAAoB,KAAKD,UAC9DR,MAAsBU,aAAa,qBAAqBF,UAAU;;;;AACrE,MAAAV,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAA5B;AAAA,OAAA4B,MARP;IACI,MAAMW,OAAOC,SAASC,cAAc,WAAW;AAC/CF,SAAKG,YAASf;IACd,MAAMgB,UAAUJ,KAAKK,QAAQC;IAC7B,MAAMC,YAAYlB,KAAsBiB;AACxC,QAAIF,WAAWG,aAAaP,KAAKK,QAAQG,WAAWC,WAAW,EAC7D,MAAKC,YAAWhD,gBAAwB6C,WAAWH,SAAS,KAAK;aACxDf,KAAsBc,cAASf,OAA4B;AACpEC,UAAsBc,YAASf;AAC/B,UAAIzB,mCAAyB;AAC7B,SAAI,KAAKgD,gBAAiB,MAAKA,gBAAe/C,sCAAyB"}

package/dist/file-upload.mjs

@@ -1,11 +1,11 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_APPLY_LIST_CHANGES, GEA_CTOR_TAG_NAME, GEA_DOM_ITEM, GEA_DOM_KEY, GEA_ELEMENT, GEA_ENSURE_ARRAY_CONFIGS, GEA_MAP_CONFIG_TPL, GEA_OBSERVE, GEA_PATCH_COND, GEA_REGISTER_COND, GEA_RENDERED, GEA_SETUP_LOCAL_STATE_OBSERVERS, geaCondPatchedSymbol, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
+import { Component, GEA_APPLY_LIST_CHANGES, GEA_DOM_ITEM, GEA_DOM_KEY, GEA_ELEMENT, GEA_ENSURE_ARRAY_CONFIGS, GEA_OBSERVE, GEA_ON_PROP_CHANGE, GEA_PATCH_COND, GEA_REGISTER_COND, GEA_RENDERED, GEA_SETUP_LOCAL_STATE_OBSERVERS, GEA_STORE_ROOT, geaCondPatchedSymbol, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as fileUpload from "@zag-js/file-upload";
 //#region src/components/file-upload.tsx
 var FileUpload = class extends ZagComponent {
 	static {
-		this[GEA_CTOR_TAG_NAME] = "file-upload";
+		this.__geaTagName = "file-upload";
 	}
 	#__rowEls_list;
 	#__dc_acceptedFiles;
@@ -72,13 +72,13 @@ var FileUpload = class extends ZagComponent {
 		Component._register(ZagComponent, "zag-component");
 		return `<div id="${__id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${((props.class || "") != null ? String(props.class || "") : "").trim()}"`}><!--${__id + "-c0"}-->${props.label && `<label data-part="label" class="file-upload-label text-sm font-medium mb-2 block">${geaEscapeHtml(String(props.label))}</label>` || ""}<!--${__id + "-c0-end"}--><div data-part="dropzone" class="file-upload-dropzone flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 p-8 text-center hover:border-muted-foreground/50 transition-colors"><p class="text-sm text-muted-foreground mb-2">Drag and drop files here</p><button data-part="trigger" class="file-upload-trigger inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90">Choose Files</button></div><input data-part="hidden-input" type="file" class="sr-only" /><!--${__id + "-c1"}-->${this.acceptedFiles.length > 0 && `<div class="file-upload-file-list mt-3 space-y-1">${this.acceptedFiles.map((file) => this.renderAcceptedFilesItem(file)).join("")}<button data-part="clear-trigger" class="file-upload-clear text-xs text-muted-foreground hover:text-foreground mt-1">Clear all</button></div>` || ""}<!--${__id + "-c1-end"}--></div>`;
 	}
-	__onPropChange(key, value) {
+	[GEA_ON_PROP_CHANGE](key, value) {
 		if (key === "class") {
 			const __el = this[GEA_ELEMENT];
 			this.props;
 			const __boundValue = value || "";
 			if (__el) {
-				const __newClass = (__boundValue != null ? String(__boundValue) : "").trim();
+				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		}
@@ -87,9 +87,10 @@ var FileUpload = class extends ZagComponent {
 	}
 	__observe_local_acceptedFiles(value, change) {
 		if (this[GEA_RENDERED]) {
-			if (this[geaCondPatchedSymbol(1)]) return;
-			this[geaCondPatchedSymbol(1)] = this[GEA_PATCH_COND](1);
-			if (this[geaCondPatchedSymbol(1)]) queueMicrotask(() => this[geaCondPatchedSymbol(1)] = false);
+			if (!this[geaCondPatchedSymbol(1)]) {
+				this[geaCondPatchedSymbol(1)] = this[GEA_PATCH_COND](1);
+				if (this[geaCondPatchedSymbol(1)]) queueMicrotask(() => this[geaCondPatchedSymbol(1)] = false);
+			}
 		}
 		if (!this.__acceptedFiles_container) this.__acceptedFiles_container = this.$(":scope");
 		if (!this.__acceptedFiles_container) return;
@@ -103,33 +104,33 @@ var FileUpload = class extends ZagComponent {
 	}
 	__observe_local_acceptedFiles__join(value, change) {
 		if (this[GEA_RENDERED]) {
-			if (this[geaCondPatchedSymbol(1)]) return;
-			this[geaCondPatchedSymbol(1)] = this[GEA_PATCH_COND](1);
-			if (this[geaCondPatchedSymbol(1)]) queueMicrotask(() => this[geaCondPatchedSymbol(1)] = false);
-			if (this[geaCondPatchedSymbol(1)]) return;
+			if (!this[geaCondPatchedSymbol(1)]) {
+				this[geaCondPatchedSymbol(1)] = this[GEA_PATCH_COND](1);
+				if (this[geaCondPatchedSymbol(1)]) queueMicrotask(() => this[geaCondPatchedSymbol(1)] = false);
+			}
 		}
 	}
 	renderAcceptedFilesItem(file) {
-		return `<div data-gea-item-id="${file?.name ?? file}" class="flex items-center justify-between rounded-md border px-3 py-2 text-sm"><span>${file.name}</span></div>`;
+		return `<div data-gid="${file?.name ?? file}" class="flex items-center justify-between rounded-md border px-3 py-2 text-sm"><span>${file.name}</span></div>`;
 	}
 	createAcceptedFilesItem(item) {
 		var __c = this.#__dc_acceptedFiles || (this.#__dc_acceptedFiles = this.__acceptedFiles_container);
-		if (!__c[GEA_MAP_CONFIG_TPL]) try {
+		if (!__c.__geaTpl) try {
 			var __tw = document.createElement("template");
 			__tw.innerHTML = this.renderAcceptedFilesItem({ name: 0 });
-			__c[GEA_MAP_CONFIG_TPL] = __tw.content.firstElementChild;
-			__c[GEA_MAP_CONFIG_TPL]?.removeAttribute("data-gea-item-id");
+			__c.__geaTpl = __tw.content.firstElementChild;
+			__c.__geaTpl?.removeAttribute("data-gid");
 		} catch (__err) {
 			console.error(__err);
 		}
-		if (__c[GEA_MAP_CONFIG_TPL]) var el = __c[GEA_MAP_CONFIG_TPL].cloneNode(true);
+		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
 			var __fw = document.createElement("template");
 			__fw.innerHTML = this.renderAcceptedFilesItem(item);
 			var el = __fw.content.firstElementChild;
 		}
 		el.__ref_0 = el.firstElementChild;
-		el.__ref_0.firstChild.nodeValue = `${item.name}`;
+		if (el.__ref_0.textContent !== `${item.name}`) el.__ref_0.textContent = `${item.name}`;
 		el[GEA_DOM_KEY] = String(item?.name ?? item);
 		el[GEA_DOM_ITEM] = item;
 		return el;
@@ -137,7 +138,7 @@ var FileUpload = class extends ZagComponent {
 	patchAcceptedFilesItem(row, item, __prevItem) {
 		if (!row) return;
 		if (!row.__ref_0) row.__ref_0 = row.firstElementChild;
-		row.__ref_0.firstChild.nodeValue = `${item.name}`;
+		if (row.__ref_0.textContent !== `${item.name}`) row.__ref_0.textContent = `${item.name}`;
 		row[GEA_DOM_KEY] = String(item?.name ?? item);
 		(this.#__rowEls_list || (this.#__rowEls_list = {}))[String(item?.name ?? item)] = row;
 		row[GEA_DOM_ITEM] = item;
@@ -152,13 +153,15 @@ var FileUpload = class extends ZagComponent {
 			propPatchers: { "name": [(row, value, item) => {
 				const __target = row.__ref_0 || (row.__ref_0 = row.firstElementChild);
 				if (!__target) return;
-				__target.firstChild && (__target.firstChild.nodeValue = `${item.name}`) || (__target.textContent = `${item.name}`);
-			}, (row, value) => row.classList.toggle("name", value)] }
+				if (__target.textContent !== `${item.name}`) __target.textContent = `${item.name}`;
+			}, (row, value) => {
+				row.classList.toggle("name", value);
+			}] }
 		};
 	}
 	[GEA_SETUP_LOCAL_STATE_OBSERVERS]() {
 		this[GEA_ENSURE_ARRAY_CONFIGS]();
-		if (!this.__store) return;
+		if (!this[GEA_STORE_ROOT]) return;
 		this[GEA_OBSERVE](this, ["acceptedFiles"], this.__observe_local_acceptedFiles);
 		this[GEA_OBSERVE](this, ["acceptedFiles", "join"], this.__observe_local_acceptedFiles__join);
 		this[GEA_OBSERVE](this, ["acceptedFiles", "map"], this.__observe_local_acceptedFiles__join);