feat: Implement item referencing and global search, refactor selection management into itemStore.

Author: Explosion-Scratch

src/App.svelte

@@ -104,6 +104,40 @@
         itemStore.undo()
       }
     }
+
+    if (event.shiftKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      if (!event.target.closest('[contenteditable]')) {
+        event.preventDefault()
+        const currentRoot = $zoomedItem || $filteredItems.tree
+        const flat = flattenVisibleTree(currentRoot)
+        if (flat.length === 0) return
+
+        if ($selection.size === 0) {
+          const targetItem = event.key === 'ArrowUp' ? flat[flat.length - 1] : flat[0]
+          itemStore.selectRange([targetItem.id])
+          itemStore.setSelectionHead(targetItem.id)
+          itemStore.setSelectionAnchor(targetItem.id)
+        } else {
+          const direction = event.key === 'ArrowUp' ? 'up' : 'down'
+          itemStore.extendSelection(direction)
+        }
+      }
+    }
+
+    if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !event.shiftKey) {
+      if (!event.target.closest('[contenteditable]')) {
+        event.preventDefault()
+        const currentRoot = $zoomedItem || $filteredItems.tree
+        const flat = flattenVisibleTree(currentRoot)
+        if (flat.length === 0) return
+
+        if (event.key === 'ArrowUp') {
+          focusItem(flat[flat.length - 1].id)
+        } else {
+          focusItem(flat[0].id)
+        }
+      }
+    }
   }
 
   function getItemIdFromElement(element) {
@@ -340,6 +374,16 @@
     animation: shrinkOut var(--transition-fast) both;
   }
 
+  @keyframes highlightPulse {
+    0%, 100% { background: transparent; }
+    30% { background: rgba(139, 92, 246, 0.25); }
+  }
+
+  :global(.highlight-pulse) {
+    animation: highlightPulse 1.5s ease-out;
+    border-radius: 4px;
+  }
+
   :global(body) {
     margin: 0;
     padding: 0;

src/components/AutocompleteMenu.svelte

@@ -11,9 +11,19 @@
   let selectedIndex = 0
   let menuElement
 
-  $: filteredItems = items.filter(item => 
-    item.toLowerCase().includes(query.toLowerCase())
-  )
+  function getItemText(item) {
+    return typeof item === 'object' ? item.text : item
+  }
+
+  function truncateText(text, maxLen = 50) {
+    if (!text) return ''
+    return text.length > maxLen ? text.slice(0, maxLen) + '…' : text
+  }
+
+  $: filteredItems = items.filter(item => {
+    const text = getItemText(item)
+    return text?.toLowerCase().includes(query.toLowerCase())
+  })
 
   $: if (filteredItems.length > 0 && selectedIndex >= filteredItems.length) {
     selectedIndex = filteredItems.length - 1
@@ -70,7 +80,7 @@
         on:click={() => selectItem(item)}
         on:mouseenter={() => selectedIndex = index}
       >
-        <span class="item-text">{item}</span>
+        {truncateText(getItemText(item))}
       </button>
     {/each}
   </div>
@@ -81,35 +91,34 @@
     position: fixed;
     z-index: 1000;
     background: white;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    min-width: 160px;
-    max-width: 280px;
-    max-height: 200px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-width: 140px;
+    max-width: 260px;
+    max-height: 180px;
     overflow-y: auto;
-    padding: 4px;
+    padding: 3px;
   }
 
   .autocomplete-item {
     all: unset;
-    display: flex;
-    align-items: center;
+    display: block;
     width: 100%;
-    padding: 8px 12px;
+    padding: 6px 10px;
     cursor: pointer;
-    border-radius: 6px;
-    font-size: 14px;
-    color: #333;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #555;
     box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .autocomplete-item:hover,
   .autocomplete-item.selected {
-    background: rgba(73, 186, 242, 0.1);
-  }
-
-  .item-text {
-    color: var(--accent, #49baf2);
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
   }
 </style>

src/components/BreadCrumb.svelte

@@ -35,6 +35,7 @@
 
   function handleHome() {
     itemStore.zoom(null)
+    itemStore.clearSearch()
   }
 
   function handleCrumbClick(item) {

src/components/Item.svelte

@@ -101,6 +101,10 @@
     itemStore.setSearch(event.detail.hashtag)
   }
 
+  function handleItemRefClick(event) {
+    itemStore.navigateToItem(event.detail.id)
+  }
+
   function handleTextChange(event) {
     const newVal = hasCheckboxSyntax 
       ? (isCheckboxChecked ? '[x] ' : '[ ] ') + event.detail.value
@@ -233,6 +237,7 @@
             value={displayText}
             showPlaceholder={false}
             {highlightPhrase}
+            itemId={item.id}
             on:change={handleTextChange}
             on:delete={handleDelete}
             on:forcedelete={handleForceDelete}
@@ -246,6 +251,7 @@
             on:togglecomplete={handleToggleComplete}
             on:description={handleShowDescription}
             on:hashtagclick={handleHashtagClick}
+            on:itemrefclick={handleItemRefClick}
           />
         </div>
       </div>
@@ -263,6 +269,7 @@
             on:exitdescription={handleExitDescription}
             on:togglecomplete={handleToggleComplete}
             on:hashtagclick={handleHashtagClick}
+            on:itemrefclick={handleItemRefClick}
           />
         </div>
       {/if}

src/components/List.svelte

@@ -7,6 +7,14 @@
   import { focusItem, focusDescription, getItemAbove, getItemBelow, flattenVisible } from '../utils/focus.js'
   import { get } from 'svelte/store'
 
+  function handleHashtagClick(event) {
+    itemStore.setSearch(event.detail.hashtag)
+  }
+
+  function handleItemRefClick(event) {
+    itemStore.navigateToItem(event.detail.id)
+  }
+
   export let item
   export let isTop = false
   export let outermost = false
@@ -81,61 +89,21 @@
   }
 
   function handleShiftSelectUp(event) {
-    const id = event.detail.id
-    const items = get(itemStore.items)
-    const prevItem = getItemAbove(items, id)
+    itemStore.extendSelection('up')
     
-    if (!prevItem) return
-
-    const currentAnchor = get(selectionAnchor)
-    const currentSelection = get(selection)
-    const lastDirection = get(selectionDirection)
-
-    if (currentSelection.size === 0) {
-      itemStore.setSelectionAnchor(id)
-      itemStore.addToSelection(id)
-      itemStore.addToSelection(prevItem.id)
-      itemStore.setSelectionDirection('up')
-    } else if (lastDirection === 'down' && currentAnchor && id !== currentAnchor) {
-      itemStore.removeFromSelection(id)
-      if (currentSelection.size <= 2) {
-        itemStore.setSelectionDirection(null)
-      }
-    } else {
-      itemStore.addToSelection(prevItem.id)
-      itemStore.setSelectionDirection('up')
+    const active = document.activeElement
+    if (active?.closest('[contenteditable]')) {
+      active.blur()
     }
-    
-    focusItem(prevItem.id)
   }
 
   function handleShiftSelectDown(event) {
-    const id = event.detail.id
-    const items = get(itemStore.items)
-    const nextItem = getItemBelow(items, id)
+    itemStore.extendSelection('down')
     
-    if (!nextItem) return
-
-    const currentAnchor = get(selectionAnchor)
-    const currentSelection = get(selection)
-    const lastDirection = get(selectionDirection)
-
-    if (currentSelection.size === 0) {
-      itemStore.setSelectionAnchor(id)
-      itemStore.addToSelection(id)
-      itemStore.addToSelection(nextItem.id)
-      itemStore.setSelectionDirection('down')
-    } else if (lastDirection === 'up' && currentAnchor && id !== currentAnchor) {
-      itemStore.removeFromSelection(id)
-      if (currentSelection.size <= 2) {
-        itemStore.setSelectionDirection(null)
-      }
-    } else {
-      itemStore.addToSelection(nextItem.id)
-      itemStore.setSelectionDirection('down')
+    const active = document.activeElement
+    if (active?.closest('[contenteditable]')) {
+      active.blur()
     }
-    
-    focusItem(nextItem.id)
   }
 
   function handleZoom(event) {
@@ -262,9 +230,12 @@
         bind:value={item.text}
         {highlightPhrase}
         showPlaceholder={false}
+        itemId={item.id}
         on:selectdown={handleTitleSelectDown}
         on:newbullet={handleTitleNewBullet}
         on:change={() => itemStore.updateItem(item.id, { text: item.text })}
+        on:hashtagclick={handleHashtagClick}
+        on:itemrefclick={handleItemRefClick}
       />
     </h1>
 
@@ -293,9 +264,12 @@
         bind:value={item.text}
         {highlightPhrase}
         showPlaceholder={false}
+        itemId={item.id}
         on:selectdown={handleTitleSelectDown}
         on:newbullet={handleTitleNewBullet}
         on:change={() => itemStore.updateItem(item.id, { text: item.text })}
+        on:hashtagclick={handleHashtagClick}
+        on:itemrefclick={handleItemRefClick}
       />
     </h2>
   {/if}