@furystack/shades-common-components 14.0.0 → 15.0.1

package/src/services/list-service.ts

@@ -41,6 +41,19 @@ export class ListService<T> implements Disposable {
 
   public focusedItem = new ObservableValue<T | undefined>(undefined)
 
+  /**
+   * Stores the focused item captured on pointerdown, before the focus event
+   * can update focusedItem. Used as the anchor for SHIFT+click range selection.
+   * Call {@link setFocusAnchor} from `onpointerdown` to snapshot the anchor
+   * before focus shifts.
+   */
+  private focusAnchor: T | undefined = undefined
+
+  /** Snapshot the current focused item as the anchor for SHIFT+click range selection. */
+  public setFocusAnchor(): void {
+    this.focusAnchor = this.focusedItem.getValue()
+  }
+
   public selection = new ObservableValue<T[]>([])
 
   public searchTerm = new ObservableValue('')
@@ -89,14 +102,6 @@ export class ListService<T> implements Disposable {
             this.focusedItem.setValue(items[items.findIndex((e) => e === this.focusedItem.getValue()) + 1])
           }
           break
-        case 'ArrowUp':
-          ev.preventDefault()
-          this.focusedItem.setValue(items[Math.max(0, items.findIndex((e) => e === focusedItem) - 1)])
-          break
-        case 'ArrowDown':
-          ev.preventDefault()
-          this.focusedItem.setValue(items[Math.min(items.length - 1, items.findIndex((e) => e === focusedItem) + 1)])
-          break
         case 'Home': {
           ev.preventDefault()
           this.focusedItem.setValue(items[0])
@@ -107,10 +112,6 @@ export class ListService<T> implements Disposable {
           this.focusedItem.setValue(items[items.length - 1])
           break
         }
-        case 'Tab': {
-          this.hasFocus.setValue(!hasFocus)
-          break
-        }
         case 'Escape': {
           ev.preventDefault()
           this.searchTerm.setValue('')
@@ -134,7 +135,8 @@ export class ListService<T> implements Disposable {
 
   public handleItemClick(item: T, ev: MouseEvent) {
     const currentSelectionValue = this.selection.getValue()
-    const lastFocused = this.focusedItem.getValue()
+    const lastFocused = this.focusAnchor ?? this.focusedItem.getValue()
+    this.focusAnchor = undefined
     if (ev.ctrlKey) {
       if (currentSelectionValue.includes(item)) {
         this.selection.setValue(currentSelectionValue.filter((s) => s !== item))

package/src/services/theme-provider-service.ts

@@ -101,6 +101,8 @@ export type ActionColors = {
   activeBackground: Color
   /** Box-shadow value for focus ring indicators */
   focusRing: string
+  /** CSS outline value for keyboard/spatial focus indicators (e.g. '2px solid #3f51b5') */
+  focusOutline: string
   /** Opacity value for disabled elements (e.g. '0.6') */
   disabledOpacity: string
   /** Overlay background color for backdrops (drawers, modals) */

package/src/services/tree-service.spec.ts

@@ -226,16 +226,17 @@ describe('TreeService', () => {
       })
     })
 
-    it('should move focus to first child on ArrowRight when already expanded', () => {
+    it('should not move focus on ArrowRight when already expanded (delegated to spatial navigation)', () => {
       const { service, rootItems } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
         service.expand(rootItems[0])
         service.focusedItem.setValue(rootItems[0])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowRight', cancelable: true })
+        service.handleKeyDown(ev)
 
-        expect(service.focusedItem.getValue()).toBe(rootItems[0].children![0])
+        expect(service.focusedItem.getValue()).toBe(rootItems[0])
       })
     })
 
@@ -303,27 +304,29 @@ describe('TreeService', () => {
   })
 
   describe('inherited ListService keyboard navigation', () => {
-    it('should handle ArrowDown to move focus to next visible item', () => {
+    it('should not handle ArrowDown (delegated to spatial navigation)', () => {
       const { service, rootItems } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
         service.focusedItem.setValue(rootItems[0])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowDown', cancelable: true })
+        service.handleKeyDown(ev)
 
-        expect(service.focusedItem.getValue()).toBe(rootItems[1])
+        expect(service.focusedItem.getValue()).toBe(rootItems[0])
       })
     })
 
-    it('should handle ArrowUp to move focus to previous visible item', () => {
+    it('should not handle ArrowUp (delegated to spatial navigation)', () => {
       const { service, rootItems } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
         service.focusedItem.setValue(rootItems[1])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowUp', cancelable: true })
+        service.handleKeyDown(ev)
 
-        expect(service.focusedItem.getValue()).toBe(rootItems[0])
+        expect(service.focusedItem.getValue()).toBe(rootItems[1])
       })
     })
 

package/src/services/tree-service.ts

@@ -134,24 +134,21 @@ export class TreeService<T> extends ListService<T> {
     if (hasFocus && focusedItem) {
       switch (ev.key) {
         case 'ArrowRight': {
-          ev.preventDefault()
           const children = this.treeOptions.getChildren(focusedItem)
-          if (children.length > 0) {
-            if (this.isExpanded(focusedItem)) {
-              this.focusedItem.setValue(children[0])
-            } else {
-              this.expand(focusedItem)
-            }
+          if (children.length > 0 && !this.isExpanded(focusedItem)) {
+            ev.preventDefault()
+            this.expand(focusedItem)
           }
           return
         }
         case 'ArrowLeft': {
-          ev.preventDefault()
           if (this.isExpanded(focusedItem)) {
+            ev.preventDefault()
             this.collapse(focusedItem)
           } else {
             const parent = this.getParent(focusedItem)
             if (parent) {
+              ev.preventDefault()
               this.focusedItem.setValue(parent)
             }
           }

package/src/themes/architect-theme.ts

@@ -36,6 +36,7 @@ export const architectTheme = {
     selectedBackground: 'rgba(0, 255, 65, 0.14)',
     activeBackground: 'rgba(0, 255, 65, 0.22)',
     focusRing: '0 0 0 2px rgba(0, 255, 65, 0.5)',
+    focusOutline: '2px solid #00ff41',
     disabledOpacity: '0.35',
     backdrop: 'rgba(0, 0, 0, 0.9)',
     subtleBorder: 'rgba(0, 255, 65, 0.15)',

package/src/themes/auditore-theme.ts

@@ -36,6 +36,7 @@ export const auditoreTheme = {
     selectedBackground: 'rgba(176, 16, 48, 0.1)',
     activeBackground: 'rgba(176, 16, 48, 0.16)',
     focusRing: '0 0 0 3px rgba(176, 16, 48, 0.2)',
+    focusOutline: '2px solid #b01030',
     disabledOpacity: '0.45',
     backdrop: 'rgba(42, 32, 40, 0.5)',
     subtleBorder: 'rgba(42, 32, 40, 0.15)',

package/src/themes/black-mesa-theme.ts

@@ -36,6 +36,7 @@ export const blackMesaTheme = {
     selectedBackground: 'rgba(255, 140, 0, 0.14)',
     activeBackground: 'rgba(255, 140, 0, 0.22)',
     focusRing: '0 0 0 2px rgba(255, 140, 0, 0.5)',
+    focusOutline: '2px solid #ff8c00',
     disabledOpacity: '0.4',
     backdrop: 'rgba(10, 10, 12, 0.88)',
     subtleBorder: 'rgba(255, 140, 0, 0.18)',

package/src/themes/chieftain-theme.ts

@@ -36,6 +36,7 @@ export const chieftainTheme = {
     selectedBackground: 'rgba(184, 48, 48, 0.15)',
     activeBackground: 'rgba(184, 48, 48, 0.22)',
     focusRing: '0 0 0 3px rgba(184, 48, 48, 0.3)',
+    focusOutline: '2px solid #b83030',
     disabledOpacity: '0.5',
     backdrop: 'rgba(20, 14, 8, 0.8)',
     subtleBorder: 'rgba(160, 120, 80, 0.28)',

package/src/themes/default-dark-theme.ts

@@ -31,6 +31,7 @@ export const defaultDarkTheme = {
     selectedBackground: 'rgba(255, 255, 255, 0.15)',
     activeBackground: 'rgba(255, 255, 255, 0.2)',
     focusRing: '0 0 0 3px rgba(255, 255, 255, 0.15)',
+    focusOutline: '2px solid #7986cb',
     disabledOpacity: '0.6',
     backdrop: 'rgba(0, 0, 0, 0.65)',
     subtleBorder: 'rgba(255, 255, 255, 0.2)',

package/src/themes/default-light-theme.ts

@@ -31,6 +31,7 @@ export const defaultLightTheme = {
     selectedBackground: 'rgba(128, 128, 128, 0.15)',
     activeBackground: 'rgba(128, 128, 128, 0.2)',
     focusRing: '0 0 0 3px rgba(128, 128, 128, 0.15)',
+    focusOutline: '2px solid #3f51b5',
     disabledOpacity: '0.6',
     backdrop: 'rgba(0, 0, 0, 0.5)',
     subtleBorder: 'rgba(128, 128, 128, 0.2)',

package/src/themes/dragonborn-theme.ts

@@ -36,6 +36,7 @@ export const dragonbornTheme = {
     selectedBackground: 'rgba(200, 160, 80, 0.14)',
     activeBackground: 'rgba(200, 160, 80, 0.22)',
     focusRing: '0 0 0 3px rgba(200, 160, 80, 0.3)',
+    focusOutline: '2px solid #c8a050',
     disabledOpacity: '0.5',
     backdrop: 'rgba(10, 12, 14, 0.8)',
     subtleBorder: 'rgba(140, 154, 170, 0.22)',

package/src/themes/hawkins-theme.ts

@@ -36,6 +36,7 @@ export const hawkinsTheme = {
     selectedBackground: 'rgba(204, 51, 51, 0.14)',
     activeBackground: 'rgba(204, 51, 51, 0.22)',
     focusRing: '0 0 0 2px rgba(204, 51, 51, 0.45)',
+    focusOutline: '2px solid #cc3333',
     disabledOpacity: '0.4',
     backdrop: 'rgba(8, 6, 4, 0.9)',
     subtleBorder: 'rgba(204, 51, 51, 0.18)',

package/src/themes/jedi-theme.ts

@@ -36,6 +36,7 @@ export const jediTheme = {
     selectedBackground: 'rgba(74, 144, 217, 0.12)',
     activeBackground: 'rgba(74, 144, 217, 0.18)',
     focusRing: '0 0 0 3px rgba(74, 144, 217, 0.3)',
+    focusOutline: '2px solid #4a90d9',
     disabledOpacity: '0.5',
     backdrop: 'rgba(30, 26, 20, 0.45)',
     subtleBorder: 'rgba(74, 144, 217, 0.18)',

package/src/themes/neon-runner-theme.ts

@@ -33,6 +33,7 @@ export const neonRunnerTheme = {
     selectedBackground: 'rgba(0, 240, 255, 0.14)',
     activeBackground: 'rgba(0, 240, 255, 0.22)',
     focusRing: '0 0 0 2px rgba(0, 240, 255, 0.5)',
+    focusOutline: '2px solid #00f0ff',
     disabledOpacity: '0.4',
     backdrop: 'rgba(4, 6, 14, 0.85)',
     subtleBorder: 'rgba(0, 240, 255, 0.2)',

package/src/themes/paladin-theme.ts

@@ -36,6 +36,7 @@ export const paladinTheme = {
     selectedBackground: 'rgba(200, 168, 78, 0.15)',
     activeBackground: 'rgba(200, 168, 78, 0.22)',
     focusRing: '0 0 0 3px rgba(200, 168, 78, 0.3)',
+    focusOutline: '2px solid #c8a84e',
     disabledOpacity: '0.5',
     backdrop: 'rgba(14, 18, 22, 0.8)',
     subtleBorder: 'rgba(180, 192, 205, 0.28)',

package/src/themes/plumber-theme.ts

@@ -34,6 +34,7 @@ export const plumberTheme = {
     selectedBackground: 'rgba(230, 0, 18, 0.1)',
     activeBackground: 'rgba(230, 0, 18, 0.16)',
     focusRing: '0 0 0 3px rgba(230, 0, 18, 0.25)',
+    focusOutline: '2px solid #e60012',
     disabledOpacity: '0.45',
     backdrop: 'rgba(26, 26, 46, 0.5)',
     subtleBorder: 'rgba(26, 26, 46, 0.15)',

package/src/themes/replicant-theme.ts

@@ -36,6 +36,7 @@ export const replicantTheme = {
     selectedBackground: 'rgba(255, 158, 0, 0.13)',
     activeBackground: 'rgba(255, 158, 0, 0.2)',
     focusRing: '0 0 0 2px rgba(255, 158, 0, 0.4)',
+    focusOutline: '2px solid #ff9e00',
     disabledOpacity: '0.4',
     backdrop: 'rgba(6, 8, 12, 0.85)',
     subtleBorder: 'rgba(42, 138, 148, 0.2)',

package/src/themes/sandworm-theme.ts

@@ -36,6 +36,7 @@ export const sandwormTheme = {
     selectedBackground: 'rgba(212, 130, 10, 0.14)',
     activeBackground: 'rgba(212, 130, 10, 0.22)',
     focusRing: '0 0 0 3px rgba(212, 130, 10, 0.3)',
+    focusOutline: '2px solid #d4820a',
     disabledOpacity: '0.5',
     backdrop: 'rgba(12, 10, 6, 0.8)',
     subtleBorder: 'rgba(160, 128, 96, 0.25)',

package/src/themes/shadow-broker-theme.ts

@@ -34,6 +34,7 @@ export const shadowBrokerTheme = {
     selectedBackground: 'rgba(255, 109, 0, 0.14)',
     activeBackground: 'rgba(255, 109, 0, 0.22)',
     focusRing: '0 0 0 2px rgba(255, 109, 0, 0.5)',
+    focusOutline: '2px solid #ff6d00',
     disabledOpacity: '0.4',
     backdrop: 'rgba(4, 6, 14, 0.85)',
     subtleBorder: 'rgba(48, 128, 224, 0.2)',

package/src/themes/sith-theme.ts

@@ -36,6 +36,7 @@ export const sithTheme = {
     selectedBackground: 'rgba(204, 32, 32, 0.14)',
     activeBackground: 'rgba(204, 32, 32, 0.22)',
     focusRing: '0 0 0 2px rgba(204, 32, 32, 0.5)',
+    focusOutline: '2px solid #cc2020',
     disabledOpacity: '0.4',
     backdrop: 'rgba(6, 4, 4, 0.9)',
     subtleBorder: 'rgba(204, 32, 32, 0.2)',

package/src/themes/vault-dweller-theme.ts

@@ -36,6 +36,7 @@ export const vaultDwellerTheme = {
     selectedBackground: 'rgba(48, 255, 80, 0.14)',
     activeBackground: 'rgba(48, 255, 80, 0.22)',
     focusRing: '0 0 0 2px rgba(48, 255, 80, 0.5)',
+    focusOutline: '2px solid #30ff50',
     disabledOpacity: '0.4',
     backdrop: 'rgba(0, 0, 0, 0.85)',
     subtleBorder: 'rgba(48, 255, 80, 0.2)',

package/src/themes/wild-hunt-theme.ts

@@ -36,6 +36,7 @@ export const wildHuntTheme = {
     selectedBackground: 'rgba(168, 32, 32, 0.14)',
     activeBackground: 'rgba(168, 32, 32, 0.22)',
     focusRing: '0 0 0 3px rgba(168, 176, 188, 0.3)',
+    focusOutline: '2px solid #a8b0bc',
     disabledOpacity: '0.5',
     backdrop: 'rgba(6, 8, 12, 0.85)',
     subtleBorder: 'rgba(168, 176, 188, 0.2)',

package/src/themes/xenomorph-theme.ts

@@ -34,6 +34,7 @@ export const xenomorphTheme = {
     selectedBackground: 'rgba(126, 200, 80, 0.13)',
     activeBackground: 'rgba(126, 200, 80, 0.2)',
     focusRing: '0 0 0 2px rgba(126, 200, 80, 0.45)',
+    focusOutline: '2px solid #7ec850',
     disabledOpacity: '0.4',
     backdrop: 'rgba(6, 8, 10, 0.9)',
     subtleBorder: 'rgba(126, 200, 80, 0.18)',