astro-tractstack 2.1.3 → 2.2.0

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag.tsx

@@ -24,13 +24,19 @@ import { RenderChildren } from '../RenderChildren';
 import {
   processRichTextToNodes,
   getTemplateNode,
+  isAddressableNode,
+  canEditText,
+  getNodeDisplayMode,
 } from '@/utils/compositor/nodesHelper';
 import { cloneDeep, classNames } from '@/utils/helpers';
 import { PatchOp } from '@/stores/nodesHistory';
 import type { FlatNode, PaneNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 
-export type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
+export type NodeTagProps = NodeProps & {
+  tagName: keyof JSX.IntrinsicElements;
+  style?: any;
+};
 
 type EditState = 'viewing' | 'editing';
 const VERBOSE = false;
@@ -39,9 +45,9 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   const nodeId = props.nodeId;
   const ctx = getCtx(props);
   const settingsPanel = useStore(settingsPanelStore);
-  const toolMode = useStore(ctx.toolModeValStore).value;
-  const Tag =
-    ctx.toolModeValStore.get().value === `debug` ? `div` : props.tagName;
+  const Tag = ['em', 'strong', 'a', 'button', 'img'].includes(props.tagName)
+    ? props.tagName
+    : 'div';
 
   if (props.tagName === 'span') {
     const node = ctx.allNodes.get().get(props.nodeId);
@@ -66,14 +72,16 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   const cursorPositionRef = useRef<{ node: Node; offset: number } | null>(null);
 
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const toolAddMode = useStore(ctx.toolAddModeStore).value;
 
   // Get node data
   const node = ctx.allNodes.get().get(nodeId) as FlatNode;
   const children = ctx.getChildNodeIDs(nodeId);
-  const isEditableMode = ctx.toolModeValStore.get().value === 'text';
-  const supportsEditing = !['ol', 'ul'].includes(props.tagName);
+  const isEditableMode = toolModeVal === 'text';
+  const supportsEditing = canEditText(node, ctx);
   const isPlaceholder = node?.isPlaceholder === true;
   const isEmpty = elementRef.current?.textContent?.trim() === '';
+  const isInline = getNodeDisplayMode(node, viewportKeyStore.get().value, ctx);
 
   // Auto-enter edit mode for new placeholder nodes
   useEffect(() => {
@@ -258,8 +266,6 @@ export const NodeBasicTag = (props: NodeTagProps) => {
 
   // For formatting nodes <em> and <strong> and <span>
   if (['em', 'strong', 'span'].includes(props.tagName)) {
-    const isEditorActive = ['styles', 'text'].includes(toolModeVal);
-    const isEditorEnabled = toolModeVal === 'styles';
     const handleStyleClick = (e: MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
       e.stopPropagation();
@@ -300,32 +306,35 @@ export const NodeBasicTag = (props: NodeTagProps) => {
           }
         },
         'data-node-id': nodeId,
+        'data-tag': props.tagName,
         tabIndex: isEditableMode ? -1 : undefined,
         style: {
-          position: isEditorActive ? 'relative' : undefined,
+          position: 'relative',
           outlineOffset: '1px',
+          display: isInline ? 'inline-block' : undefined,
         },
       },
       [
         <RenderChildren key="children" children={children} nodeProps={props} />,
-        isEditorEnabled && (
-          <span
-            key={`toolbar-${nodeId}`}
-            className="absolute z-10 flex select-none gap-x-1"
-            data-attr="exclude"
-            style={{ top: '-0.9rem', left: '0' }}
-          >
-            {props.tagName === 'span' && (
-              <button
-                type="button"
-                onClick={handleStyleClick}
-                className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-100 bg-opacity-90 text-blue-700 shadow-sm hover:bg-blue-300 focus:outline-none"
-                aria-label="Style selection"
-                data-attr="exclude"
-              >
-                <PaintBrushIcon className="h-3 w-3" data-attr="exclude" />
-              </button>
-            )}
+        <span
+          key={`toolbar-${nodeId}`}
+          className="absolute z-10 flex select-none gap-x-1"
+          data-attr="exclude"
+          style={{ top: '-0.9rem', left: '0' }}
+        >
+          {props.tagName === 'span' && toolModeVal === `text` && (
+            <button
+              type="button"
+              onClick={handleStyleClick}
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-100 bg-opacity-90 text-blue-700 shadow-sm hover:bg-blue-300 focus:outline-none"
+              aria-label="Style this"
+              title="Style this"
+              data-attr="exclude"
+            >
+              <PaintBrushIcon className="h-3 w-3" data-attr="exclude" />
+            </button>
+          )}
+          {props.tagName === 'span' && toolModeVal === `insert` && (
             <button
               type="button"
               onClick={handleWordCarouselClick}
@@ -335,7 +344,8 @@ export const NodeBasicTag = (props: NodeTagProps) => {
                   ? 'bg-green-100 text-green-700 hover:bg-green-300'
                   : 'bg-gray-100 bg-opacity-90 text-gray-700 hover:bg-gray-300'
               )}
-              aria-label="Edit Carousel"
+              aria-label="Word Carousel"
+              title="Word Carousel"
               data-attr="exclude"
             >
               <ChatBubbleBottomCenterTextIcon
@@ -343,17 +353,20 @@ export const NodeBasicTag = (props: NodeTagProps) => {
                 data-attr="exclude"
               />
             </button>
+          )}
+          {props.tagName === 'span' && toolModeVal === `text` && (
             <button
               type="button"
               onClick={handleUnwrapClick}
               className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-100 bg-opacity-90 text-gray-700 shadow-sm hover:bg-gray-300 focus:outline-none"
               aria-label="Remove formatting"
+              title="Remove formatting"
               data-attr="exclude"
             >
               <XMarkIcon className="h-3.5 w-3.5" data-attr="exclude" />
             </button>
-          </span>
-        ),
+          )}
+        </span>,
       ]
     );
   }
@@ -373,6 +386,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
           }
         },
         'data-node-id': nodeId,
+        'data-tag': props.tagName,
         tabIndex: isEditableMode ? -1 : undefined,
       },
       <RenderChildren children={children} nodeProps={props} />
@@ -380,7 +394,13 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   }
 
   const startEditing = () => {
-    if (!isEditableMode || !supportsEditing || editState === 'editing') return;
+    if (
+      !isEditableMode ||
+      !supportsEditing ||
+      editState === 'editing' ||
+      !canEditText(node, ctx)
+    )
+      return;
 
     originalContentRef.current = elementRef.current?.innerHTML || '';
     setEditState('editing');
@@ -395,13 +415,35 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   };
 
   const saveAndExit = () => {
+    if (VERBOSE)
+      console.log(`[DEBUG] saveAndExit triggered for nodeId: ${nodeId}`, {
+        editState,
+        toolMode: toolModeVal,
+        hasSettingsPanel: !!settingsPanel,
+        activeSignal: settingsPanel?.action,
+      });
     if (editState !== 'editing') return;
-
-    // Use an in-memory element to safely parse and strip UI chrome from the content.
     const tempDiv = document.createElement('div');
+    if (VERBOSE)
+      console.log(`[DEBUG] Raw HTML before sanitization:`, tempDiv.innerHTML);
     tempDiv.innerHTML = elementRef.current?.innerHTML || '';
-    tempDiv.querySelectorAll('[data-attr="exclude"]');
+    const chromeElements = tempDiv.querySelectorAll(
+      '.compositor-chrome, [data-attr="exclude"]'
+    );
+    chromeElements.forEach((el) => el.remove());
+    const wrappers = tempDiv.querySelectorAll(
+      '.compositor-wrapper, [data-node-overlay]'
+    );
+    wrappers.forEach((el) => {
+      while (el.firstChild) {
+        el.parentNode?.insertBefore(el.firstChild, el);
+      }
+      el.remove();
+    });
+
     const currentContent = tempDiv.innerHTML;
+    if (VERBOSE)
+      console.log(`[DEBUG] Sanitized HTML sent to Parser:`, currentContent);
 
     if (currentContent !== originalContentRef.current) {
       try {
@@ -636,9 +678,14 @@ export const NodeBasicTag = (props: NodeTagProps) => {
     const relatedTarget = e.relatedTarget as HTMLElement | null;
     if (VERBOSE)
       console.log(`[NodeBasicTag] Blur event, relatedTarget:`, e.relatedTarget);
+
+    // Check if the focus moved to the Settings Panel or Toolbar
+    const isSettingsControl = relatedTarget?.closest('#settingsControls');
+
     if (
       relatedTarget?.hasAttribute('data-tab-indicator') ||
-      (relatedTarget && elementRef.current?.contains(relatedTarget))
+      (relatedTarget && elementRef.current?.contains(relatedTarget)) ||
+      isSettingsControl
     ) {
       return;
     }
@@ -688,8 +735,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleClick = (e: MouseEvent) => {
-    if (toolModeVal === 'styles') {
-      console.log(`skipping handleClick on purpose`);
+    if (!canEditText(node, ctx)) {
       return;
     }
     if (
@@ -709,6 +755,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
 
     // Delay single-click behavior to see if double-click follows
     clickTimeoutRef.current = setTimeout(() => {
+      if (!isAddressableNode(node, ctx)) return;
       if (isEditableMode && supportsEditing && editState === 'viewing') {
         const selection = window.getSelection();
         if (selection && selection.rangeCount > 0) {
@@ -788,11 +835,6 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   if (settingsPanel?.nodeId === nodeId) {
     outlineClasses +=
       ' outline-4 outline-dotted outline-orange-400 outline-offset-2';
-  } else if (toolMode === 'styles') {
-    outlineClasses += ' hover:outline hover:outline-2 hover:outline-black';
-    if (['span', 'strong', 'em'].includes(props.tagName)) {
-      outlineClasses += ' outline outline-1 outline-dotted outline-black';
-    }
   }
   const editingClasses =
     editState === 'editing'
@@ -816,11 +858,17 @@ export const NodeBasicTag = (props: NodeTagProps) => {
           onClick: handleClick,
           onDoubleClick: handleDoubleClick,
           style: {
+            userSelect:
+              toolModeVal === 'insert' && toolAddMode === 'span'
+                ? 'none'
+                : undefined,
             cursor: isEditableMode && supportsEditing ? 'text' : 'default',
             minHeight: isPlaceholder ? '1.5em' : undefined,
+            display: isInline ? 'inline-block' : undefined,
           },
           'data-node-id': nodeId,
           'data-placeholder': isPlaceholder,
+          'data-tag': props.tagName,
         },
         <RenderChildren
           children={children}

package/templates/src/components/compositor/nodes/tagElements/NodeImg.tsx

@@ -15,6 +15,8 @@ export const NodeImg = (props: NodeProps) => {
         viewportKeyStore.get().value
       )}
       alt={node.alt}
+      data-node-id={props.nodeId}
+      data-tag="img"
       onClick={(e) => {
         getCtx(props).setClickedNodeId(props.nodeId);
         e.stopPropagation();

package/templates/src/components/compositor/nodes/tagElements/NodeText.tsx

@@ -3,28 +3,53 @@ import type { FlatNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 import { useStore } from '@nanostores/react';
 import { selectionStore } from '@/stores/selection';
+import type { MouseEvent } from 'react';
 
 export const NodeText = (props: NodeProps) => {
   const ctx = getCtx(props);
   const node = ctx.allNodes.get().get(props.nodeId) as FlatNode;
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const toolAddMode = useStore(ctx.toolAddModeStore).value;
   const selection = useStore(selectionStore);
 
   if (!node) return <>ERROR MISSING NODE</>;
 
   const text = node.copy || '';
 
-  if (toolModeVal === 'styles' && props.isSelectableText) {
+  if (
+    toolModeVal === 'insert' &&
+    toolAddMode === `span` &&
+    props.isSelectableText
+  ) {
     let charOffset = 0;
     const wordSpans = text.split(/(\s+)/).map((segment, index) => {
       const startOffset = charOffset;
       const endOffset = charOffset + segment.length;
       charOffset = endOffset;
 
+      const handleMouseDown = (e: MouseEvent<HTMLElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (props.onDragStart) {
+          props.onDragStart(
+            {
+              blockNodeId: node.parentId!,
+              lcaNodeId: node.parentId!,
+              startNodeId: props.nodeId,
+              startCharOffset: startOffset,
+              endNodeId: props.nodeId,
+              endCharOffset: startOffset,
+            },
+            e
+          );
+        }
+      };
+
       if (segment.trim() === '') {
         return (
           <span
             key={index}
+            onMouseDown={handleMouseDown}
             data-parent-text-node-id={props.nodeId}
             data-start-char-offset={startOffset}
             data-end-char-offset={endOffset}
@@ -69,6 +94,7 @@ export const NodeText = (props: NodeProps) => {
           className={
             isInSelection ? 'outline-dotted outline-2 outline-blue-600' : ''
           }
+          onMouseDown={handleMouseDown} // <--- ADDED THIS
           data-parent-text-node-id={props.nodeId}
           data-start-char-offset={startOffset}
           data-end-char-offset={endOffset}

package/templates/src/components/compositor/preview/PaneSnapshotGenerator.tsx

@@ -22,7 +22,7 @@ function hashString(str: string): string {
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
     hash = (hash << 5) - hash + char;
-    hash = hash & hash; // Convert to 32bit integer
+    hash = hash & hash;
   }
   return hash.toString(36);
 }
@@ -37,7 +37,7 @@ export const PaneSnapshotGenerator = ({
   const [isGenerating, setIsGenerating] = useState(false);
 
   useEffect(() => {
-    if (!htmlString || isGenerating) return;
+    if (!htmlString) return;
 
     const cacheKey = `${id}-${hashString(htmlString)}-${outputWidth}`;
     if (snapshotCache.has(cacheKey)) {
@@ -81,7 +81,6 @@ export const PaneSnapshotGenerator = ({
         const brandColors =
           brandConfigStore.get()?.BRAND_COLOURS?.split(',') || [];
 
-        // Get all existing CSS links from current document
         const existingCssLinks = Array.from(
           document.querySelectorAll('link[rel="stylesheet"]')
         )
@@ -131,7 +130,6 @@ export const PaneSnapshotGenerator = ({
         (iframeDoc as any).write(fullHtml);
         iframeDoc.close();
 
-        // Wait for CSS to load
         await new Promise((resolve) => {
           if (iframeDoc.readyState === 'complete') {
             resolve(void 0);
@@ -140,7 +138,6 @@ export const PaneSnapshotGenerator = ({
           }
         });
 
-        // Additional wait for rendering
         await new Promise((resolve) => setTimeout(resolve, 1000));
 
         const iframeBody = iframeDoc.body;
@@ -195,16 +192,21 @@ export const PaneSnapshotGenerator = ({
         onComplete(id, snapshotData);
       } catch (error) {
         console.error(`Snapshot generation failed for ${id}:`, error);
-        onError?.(id, error instanceof Error ? error.message : 'Unknown error');
+
+        const fallbackData: SnapshotData = {
+          imageData: '/static.jpg',
+          height: 300,
+        };
+        snapshotCache.set(cacheKey, fallbackData);
+        onComplete(id, fallbackData);
       } finally {
         setIsGenerating(false);
       }
     };
 
     generateSnapshot();
-  }, [id, htmlString, isGenerating, onComplete, onError, outputWidth]);
+  }, [id, htmlString, onComplete, onError, outputWidth]);
 
-  // Show spinner while generating
   if (isGenerating) {
     return (
       <div className="flex h-24 items-center justify-center">

package/templates/src/components/compositor/tools/NodeOverlay.tsx

@@ -0,0 +1,224 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { useStore } from '@nanostores/react';
+import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import { getCtx } from '@/stores/nodes';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { handleClickEventDefault } from '@/utils/compositor/handleClickEvent';
+import { getTemplateNode } from '@/utils/compositor/nodesHelper';
+import { classNames } from '@/utils/helpers';
+import type { NodeProps } from '@/types/nodeProps';
+import type { FlatNode } from '@/types/compositorTypes';
+
+interface NodeOverlayProps extends NodeProps {
+  children: ReactNode;
+  isTopLevel: boolean;
+  isInline?: boolean;
+}
+
+const getIconForTag = (tagName?: string): string | null => {
+  const t = tagName?.toLowerCase() || '';
+  if (['h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'code'].includes(t)) {
+    return `/icons/${t}.svg`;
+  }
+  if (t === 'img' || t === 'image') return '/icons/image.svg';
+  if (t === 'a' || t === 'button') return '/icons/link.svg';
+  return null;
+};
+
+export const NodeOverlay = ({
+  nodeId,
+  children,
+  isTopLevel,
+  isInline,
+  ...props
+}: NodeOverlayProps) => {
+  const ctx = getCtx({ nodeId, ...props });
+  const toolMode = useStore(ctx.toolModeValStore).value;
+  const toolAddMode = useStore(ctx.toolAddModeStore).value;
+  const settingsPanel = useStore(settingsPanelStore);
+  const [hoverZone, setHoverZone] = useState<'before' | 'after' | null>(null);
+
+  // put a contentEditable={false} component inside a tree that inherits contentEditable={true}.
+  const chromeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (chromeRef.current) {
+      chromeRef.current.contentEditable = 'false';
+    }
+  });
+
+  const node = ctx.allNodes.get().get(nodeId) as FlatNode;
+  if (!node) return <>{children}</>;
+
+  const zIndexClass = isTopLevel ? 'z-101 hover:z-103' : 'z-101 hover:z-104';
+
+  const isSelected = settingsPanel?.nodeId === nodeId;
+
+  const outlineClass = isSelected
+    ? 'outline outline-4 outline-dotted outline-orange-400 outline-offset-2'
+    : 'hover:outline hover:outline-2 hover:outline-dotted hover:outline-cyan-500 hover:outline-offset-2';
+
+  const handleEditClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    handleClickEventDefault(node, true);
+  };
+
+  const handleDeleteClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    ctx.deleteNode(nodeId);
+  };
+
+  const handleCopyIdClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(nodeId);
+  };
+
+  const handleInsert = (location: 'before' | 'after', e: MouseEvent) => {
+    e.stopPropagation();
+
+    const tagName = toolAddMode || 'p';
+    const templateNode = getTemplateNode(tagName);
+
+    if (templateNode) {
+      ctx.addTemplateNode(nodeId, templateNode, nodeId, location);
+    }
+  };
+
+  const canInsert =
+    toolMode === 'insert'
+      ? ctx.allowInsert(nodeId, toolAddMode || 'p')
+      : { allowInsertBefore: false, allowInsertAfter: false };
+
+  const iconSrc = getIconForTag(node.tagName);
+
+  return (
+    <div
+      className={classNames(
+        'compositor-wrapper group relative transition-all duration-200',
+        zIndexClass,
+        toolMode === 'text' ? outlineClass : ''
+      )}
+      style={isInline ? { display: 'inline-block' } : {}}
+      data-node-overlay={nodeId}
+    >
+      {children}
+
+      {/* Text Mode: Tool Cart */}
+      {toolMode === 'text' && (
+        <div
+          ref={chromeRef}
+          className="node-overlay compositor-chrome absolute flex gap-1 opacity-10 transition-opacity duration-200 group-hover:opacity-100"
+          style={{
+            top: '-24px',
+            right: 0,
+            zIndex: 10,
+          }}
+          onClick={(e) => e.stopPropagation()}
+          data-attr="exclude"
+        >
+          <button
+            onClick={handleCopyIdClick}
+            className="flex h-6 w-auto min-w-px cursor-help items-center justify-center px-1"
+            title={`${node.tagName}: ${nodeId}`}
+          >
+            {iconSrc && (
+              <img
+                src={iconSrc}
+                alt={node.tagName || 'node'}
+                className="h-3.5 w-auto"
+              />
+            )}
+          </button>
+
+          <button
+            onClick={handleEditClick}
+            className="flex h-6 w-6 items-center justify-center rounded-full bg-cyan-500 text-white shadow-md hover:scale-110 hover:bg-cyan-600"
+            title="Edit Styles"
+          >
+            <PencilSquareIcon className="h-3.5 w-3.5" />
+          </button>
+
+          <button
+            onClick={handleDeleteClick}
+            className="flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow-md hover:scale-110 hover:bg-red-600"
+            title="Delete Element"
+          >
+            <TrashIcon className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+
+      {/* Insert Mode: Split Drop Zones */}
+      {toolMode === 'insert' && toolAddMode !== `span` && (
+        <div
+          className="compositor-chrome absolute inset-0 z-50 flex flex-col"
+          data-attr="exclude"
+        >
+          {/* Top / Before Zone */}
+          <div
+            className={classNames(
+              'flex-1 transition-colors duration-200',
+              canInsert.allowInsertBefore
+                ? 'cursor-pointer hover:bg-blue-500/10'
+                : 'cursor-not-allowed opacity-0'
+            )}
+            onMouseEnter={() => setHoverZone('before')}
+            onMouseLeave={() => setHoverZone(null)}
+            onClick={(e) =>
+              canInsert.allowInsertBefore && handleInsert('before', e)
+            }
+          >
+            {canInsert.allowInsertBefore && (
+              <div
+                className={classNames(
+                  'absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 transform transition-opacity duration-200',
+                  hoverZone === 'before' ? 'opacity-100' : 'opacity-40'
+                )}
+              >
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600 text-white shadow-sm">
+                  <PlusIcon className="h-3.5 w-3.5" />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Bottom / After Zone */}
+          <div
+            className={classNames(
+              'flex-1 transition-colors duration-200',
+              canInsert.allowInsertAfter
+                ? 'cursor-pointer hover:bg-blue-500/10'
+                : 'cursor-not-allowed opacity-0'
+            )}
+            onMouseEnter={() => setHoverZone('after')}
+            onMouseLeave={() => setHoverZone(null)}
+            onClick={(e) =>
+              canInsert.allowInsertAfter && handleInsert('after', e)
+            }
+          >
+            {canInsert.allowInsertAfter && (
+              <div
+                className={classNames(
+                  'absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 transform transition-opacity duration-200',
+                  hoverZone === 'after' ? 'opacity-100' : 'opacity-40'
+                )}
+              >
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600 text-white shadow-sm">
+                  <PlusIcon className="h-3.5 w-3.5" />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};