@furystack/shades-common-components 13.0.1 → 13.2.0

package/esm/themes/xenomorph-theme.d.ts

@@ -83,6 +83,7 @@ export declare const xenomorphTheme: {
             wider: string;
             widest: string;
         };
+        textShadow: string;
     };
     transitions: {
         duration: {

package/esm/themes/xenomorph-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"xenomorph-theme.d.ts","sourceRoot":"","sources":["../../src/themes/xenomorph-theme.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GV,CAAA"}
+{"version":3,"file":"xenomorph-theme.d.ts","sourceRoot":"","sources":["../../src/themes/xenomorph-theme.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHV,CAAA"}

package/esm/themes/xenomorph-theme.js

@@ -84,6 +84,7 @@ export const xenomorphTheme = {
             wider: '1.25px',
             widest: '2px',
         },
+        textShadow: 'none',
     },
     transitions: {
         duration: {

package/esm/themes/xenomorph-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"xenomorph-theme.js","sourceRoot":"","sources":["../../src/themes/xenomorph-theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"xenomorph-theme.js","sourceRoot":"","sources":["../../src/themes/xenomorph-theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "13.0.1",
+  "version": "13.2.0",
   "description": "Common UI components for FuryStack Shades",
   "type": "module",
   "scripts": {

package/src/components/app-bar.tsx

@@ -5,9 +5,6 @@ export const AppBar = Shade({
   shadowDomName: 'shade-app-bar',
   css: {
     width: '100%',
-    background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
-    backgroundImage: cssVariableTheme.background.paperImage,
-    backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center',
@@ -18,6 +15,18 @@ export const AppBar = Shade({
     zIndex: '1',
     fontFamily: cssVariableTheme.typography.fontFamily,
     color: cssVariableTheme.text.primary,
+    // backdrop-filter on the host would create a containing block for position:fixed
+    // descendants (per CSS spec), breaking Dropdown overlays inside the AppBar.
+    // Using a pseudo-element avoids this while preserving the visual effect.
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      inset: '0',
+      zIndex: '-1',
+      background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
+      backgroundImage: cssVariableTheme.background.paperImage,
+      backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
+    },
     '&[data-visible]': {
       opacity: '1',
     },

package/src/components/avatar.tsx

@@ -1,7 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
-import { Icon } from './icons/icon.js'
 import { user as userIcon } from './icons/icon-definitions.js'
 
 export type AvatarProps = { avatarUrl: string; fallback?: JSX.Element } & PartialElement<HTMLDivElement>
@@ -37,14 +36,13 @@ export const Avatar = Shade<AvatarProps>({
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      width: '64px',
-      height: '64px',
+      width: '100%',
+      height: '100%',
       borderRadius: cssVariableTheme.shape.borderRadius.full,
       background: `color-mix(in srgb, ${cssVariableTheme.palette.primary.main} 20%, transparent)`,
       backdropFilter: 'blur(10px)',
       textAlign: 'center',
       userSelect: 'none',
-      fontSize: '48px',
       lineHeight: '1',
     },
   },
@@ -59,7 +57,24 @@ export const Avatar = Shade<AvatarProps>({
     if (hasError) {
       return (
         <div className="avatar-fallback-container">
-          <div className="avatar-fallback-icon">{props.fallback || <Icon icon={userIcon} size={48} />}</div>
+          <div className="avatar-fallback-icon">
+            {props.fallback || (
+              <svg
+                width="100%"
+                height="100%"
+                viewBox={userIcon.viewBox ?? '0 0 24 24'}
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                {userIcon.paths.map((p) => (
+                  <path d={p.d} />
+                ))}
+              </svg>
+            )}
+          </div>
         </div>
       )
     }

package/src/components/cache-view.spec.tsx

@@ -10,6 +10,15 @@ const TestContent = Shade<{ data: CacheWithValue<string> }>({
   render: ({ props }) => <span className="content-value">{props.data.value}</span>,
 })
 
+const TestContentWithLabel = Shade<{ data: CacheWithValue<string>; label: string }>({
+  shadowDomName: 'test-cache-content-with-label',
+  render: ({ props }) => (
+    <span className="content-value">
+      {props.label}: {props.data.value}
+    </span>
+  ),
+})
+
 const renderCacheView = async (
   cache: Cache<string, [string]>,
   args: [string],
@@ -210,4 +219,58 @@ describe('CacheView', () => {
       cache[Symbol.dispose]()
     })
   })
+
+  describe('contentProps', () => {
+    it('should forward contentProps to the content component', async () => {
+      const cache = new Cache<string, [string]>({ load: async (key) => `Hello ${key}` })
+      await cache.get('world')
+
+      const el = (
+        <div>
+          <CacheView
+            cache={cache}
+            args={['world']}
+            content={TestContentWithLabel}
+            contentProps={{ label: 'Greeting' }}
+          />
+        </div>
+      )
+      const cacheView = el.firstElementChild as JSX.Element
+      cacheView.updateComponent()
+      await flushUpdates()
+
+      const contentEl = cacheView.querySelector('test-cache-content-with-label') as JSX.Element
+      expect(contentEl).not.toBeNull()
+      contentEl.updateComponent()
+      await flushUpdates()
+      const valueEl = contentEl.querySelector('.content-value')
+      expect(valueEl?.textContent).toBe('Greeting: Hello world')
+      cache[Symbol.dispose]()
+    })
+
+    it('should forward contentProps when cache entry is obsolete', async () => {
+      const loadFn = vi.fn(async (key: string) => `Hello ${key}`)
+      const cache = new Cache<string, [string]>({ load: loadFn })
+      await cache.get('world')
+      cache.setObsolete('world')
+
+      const el = (
+        <div>
+          <CacheView cache={cache} args={['world']} content={TestContentWithLabel} contentProps={{ label: 'Stale' }} />
+        </div>
+      )
+      const cacheView = el.firstElementChild as JSX.Element
+      cacheView.updateComponent()
+      await flushUpdates()
+
+      const contentEl = cacheView.querySelector('test-cache-content-with-label') as JSX.Element
+      expect(contentEl).not.toBeNull()
+      contentEl.updateComponent()
+      await flushUpdates()
+      const valueEl = contentEl.querySelector('.content-value')
+      expect(valueEl?.textContent).toBe('Stale: Hello world')
+      expect(loadFn).toHaveBeenCalledTimes(2)
+      cache[Symbol.dispose]()
+    })
+  })
 })

package/src/components/cache-view.tsx

@@ -1,6 +1,6 @@
 import type { Cache, CacheWithValue } from '@furystack/cache'
 import { hasCacheValue, isFailedCacheResult, isObsoleteCacheResult } from '@furystack/cache'
-import type { ShadeComponent } from '@furystack/shades'
+import type { PartialElement, ShadeComponent } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 
 import { cssVariableTheme } from '../services/css-variable-theme.js'
@@ -11,14 +11,19 @@ import { Result } from './result.js'
  * Props for the CacheView component.
  * @typeParam TData - The type of data stored in the cache
  * @typeParam TArgs - The tuple type of arguments used to identify the cache entry
+ * @typeParam TContentProps - The full props type of the content component (must include `data`)
  */
-export type CacheViewProps<TData, TArgs extends any[]> = {
+export type CacheViewProps<
+  TData,
+  TArgs extends any[],
+  TContentProps extends { data: CacheWithValue<TData> } = { data: CacheWithValue<TData> },
+> = {
   /** The cache instance to observe and control */
   cache: Cache<TData, TArgs>
   /** The arguments identifying which cache entry to display */
   args: TArgs
-  /** Shades component rendered when a value is available (loaded or obsolete). Receives CacheWithValue<TData>. */
-  content: ShadeComponent<{ data: CacheWithValue<TData> }>
+  /** Shades component rendered when a value is available (loaded or obsolete). */
+  content: ShadeComponent<TContentProps>
   /** Optional custom loader element. Default: null (nothing shown when loading). */
   loader?: JSX.Element
   /**
@@ -27,7 +32,9 @@ export type CacheViewProps<TData, TArgs extends any[]> = {
    * If not provided, a default Result + retry Button is shown.
    */
   error?: (error: unknown, retry: () => void) => JSX.Element
-}
+} & (keyof Omit<TContentProps, 'data' | keyof PartialElement<HTMLElement>> extends never
+  ? { contentProps?: never }
+  : { contentProps: Omit<TContentProps, 'data' | keyof PartialElement<HTMLElement>> })
 
 const getDefaultErrorUi = (error: unknown, retry: () => void): JSX.Element =>
   (
@@ -55,15 +62,33 @@ const getDefaultErrorUi = (error: unknown, retry: () => void): JSX.Element =>
  * })
  *
  * <CacheView cache={userCache} args={[userId]} content={MyContent} />
+ *
+ * // With custom content props
+ * const MyContentWithLabel = Shade<{ data: CacheWithValue<User>; label: string }>({
+ *   shadowDomName: 'my-content-with-label',
+ *   render: ({ props }) => <div>{props.label}: {props.data.value.name}</div>,
+ * })
+ *
+ * <CacheView cache={userCache} args={[userId]} content={MyContentWithLabel} contentProps={{ label: 'User' }} />
  * ```
  */
-export const CacheView: <TData, TArgs extends any[]>(props: CacheViewProps<TData, TArgs>) => JSX.Element = Shade({
+/** @internal Ungeneric props used by the Shade runtime; the public generic signature is applied via the export cast. */
+type InternalCacheViewProps = {
+  cache: Cache<unknown, unknown[]>
+  args: unknown[]
+  content: ShadeComponent<{ data: CacheWithValue<unknown> }>
+  contentProps?: Record<string, unknown>
+  loader?: JSX.Element
+  error?: (error: unknown, retry: () => void) => JSX.Element
+}
+
+export const CacheView = Shade<InternalCacheViewProps>({
   shadowDomName: 'shade-cache-view',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
   },
   render: ({ props, useObservable, useState }): JSX.Element | null => {
-    const { cache, args, content, loader, error } = props
+    const { cache, args, content, loader, error, contentProps } = props
 
     const argsKey = JSON.stringify(args)
     const observable = cache.getObservable(...args)
@@ -96,12 +121,19 @@ export const CacheView: <TData, TArgs extends any[]>(props: CacheViewProps<TData
       } else if (lastReloadedArgsKey !== null) {
         setLastReloadedArgsKey(null)
       }
-      return createComponent(content as ShadeComponent<{ data: CacheWithValue<unknown> }>, {
+      return createComponent(content, {
         data: result,
+        ...(contentProps ?? {}),
       }) as unknown as JSX.Element
     }
 
     // 3. Loading last
     return loader ?? null
   },
-})
+}) as unknown as <
+  TData,
+  TArgs extends any[],
+  TContentProps extends { data: CacheWithValue<TData> } = { data: CacheWithValue<TData> },
+>(
+  props: CacheViewProps<TData, TArgs, TContentProps>,
+) => JSX.Element

package/src/components/command-palette/command-palette-input.spec.tsx

@@ -6,42 +6,14 @@ import { CommandPaletteInput } from './command-palette-input.js'
 import { CommandPaletteManager } from './command-palette-manager.js'
 
 describe('CommandPaletteInput', () => {
-  let originalAnimate: typeof Element.prototype.animate
-  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
-
   beforeEach(() => {
     vi.useFakeTimers()
     document.body.innerHTML = '<div id="root"></div>'
-    animateCalls = []
-    originalAnimate = Element.prototype.animate
-
-    Element.prototype.animate = vi.fn(
-      (keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions) => {
-        animateCalls.push({ keyframes, options })
-        const mockAnimation = {
-          onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
-          oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
-          cancel: vi.fn(),
-          play: vi.fn(),
-          pause: vi.fn(),
-          finish: vi.fn(),
-          addEventListener: vi.fn(),
-          removeEventListener: vi.fn(),
-        }
-
-        setTimeout(() => {
-          mockAnimation.onfinish?.({} as AnimationPlaybackEvent)
-        }, 10)
-
-        return mockAnimation as unknown as Animation
-      },
-    ) as typeof Element.prototype.animate
   })
 
   afterEach(() => {
     vi.useRealTimers()
     document.body.innerHTML = ''
-    Element.prototype.animate = originalAnimate
     vi.restoreAllMocks()
   })
 
@@ -89,7 +61,7 @@ describe('CommandPaletteInput', () => {
     })
   })
 
-  it('should start with width 0% when closed', async () => {
+  it('should always have width 100%', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -104,15 +76,15 @@ describe('CommandPaletteInput', () => {
         await flushUpdates()
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        expect(component.hasAttribute('data-opened')).toBe(false)
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.width).toBe('100%')
       })
     })
   })
 
-  it('should have width 100% when opened', async () => {
+  it('should have overflow hidden style', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(true)
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -124,73 +96,13 @@ describe('CommandPaletteInput', () => {
         await flushUpdates()
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        expect(component.hasAttribute('data-opened')).toBe(true)
-      })
-    })
-  })
-
-  it('should animate width when opening', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(false)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
-
-        manager.isOpened.setValue(true)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) =>
-            Array.isArray(call.keyframes) &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '0%') &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '100%'),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(300)
-      })
-    })
-  })
-
-  it('should animate width when closing', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(true)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
-
-        manager.isOpened.setValue(false)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) =>
-            Array.isArray(call.keyframes) &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '100%') &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '0%'),
-        )
-
-        expect(widthAnimation).toBeDefined()
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.overflow).toBe('hidden')
       })
     })
   })
 
-  it('should clear input value when opening', async () => {
+  it('should focus input when opened', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -206,12 +118,12 @@ describe('CommandPaletteInput', () => {
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
         const inputElement = component?.querySelector('input') as HTMLInputElement
-        inputElement.value = 'some text'
+        const focusSpy = vi.spyOn(inputElement, 'focus')
 
         manager.isOpened.setValue(true)
         await flushUpdates()
 
-        expect(inputElement.value).toBe('')
+        expect(focusSpy).toHaveBeenCalled()
       })
     })
   })
@@ -236,35 +148,13 @@ describe('CommandPaletteInput', () => {
 
         manager.isOpened.setValue(false)
         await flushUpdates()
-        await vi.advanceTimersByTimeAsync(20)
-        await flushUpdates()
 
         expect(inputElement.value).toBe('')
       })
     })
   })
 
-  it('should have overflow hidden style', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-
-        const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        const computedStyle = window.getComputedStyle(component)
-        expect(computedStyle.overflow).toBe('hidden')
-      })
-    })
-  })
-
-  it('should use cubic-bezier easing for animations', async () => {
+  it('should preserve input value when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -277,47 +167,15 @@ describe('CommandPaletteInput', () => {
         })
 
         await flushUpdates()
-        animateCalls = []
 
-        manager.isOpened.setValue(true)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
-          'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-        )
-      })
-    })
-  })
-
-  it('should fill animation forwards', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(false)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const inputElement = component?.querySelector('input') as HTMLInputElement
+        inputElement.value = 'some text'
 
         manager.isOpened.setValue(true)
         await flushUpdates()
 
-        const widthAnimation = animateCalls.find(
-          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+        expect(inputElement.value).toBe('some text')
       })
     })
   })

package/src/components/command-palette/command-palette-input.tsx

@@ -1,45 +1,13 @@
-import type { RefObject } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
-import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
-const animateOpenState = async (
-  wrapperRef: RefObject<HTMLDivElement>,
-  inputRef: RefObject<HTMLInputElement>,
-  isOpened: boolean,
-) => {
-  const wrapper = wrapperRef.current
-  const input = inputRef.current
-  if (wrapper && input) {
-    if (isOpened) {
-      input.value = ''
-      await promisifyAnimation(wrapper, [{ width: '0%' }, { width: '100%' }], {
-        duration: 300,
-        fill: 'forwards',
-        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      })
-      input.focus()
-    } else {
-      await promisifyAnimation(wrapper, [{ width: '100%' }, { width: '0%' }], {
-        duration: 300,
-        fill: 'forwards',
-        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      })
-      input.value = ''
-    }
-  }
-}
-
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
   css: {
-    width: '0%',
+    width: '100%',
     fontFamily: cssVariableTheme.typography.fontFamily,
     overflow: 'hidden',
-    '&[data-opened]': {
-      width: '100%',
-    },
     '& input': {
       color: cssVariableTheme.text.primary,
       outline: 'none',
@@ -53,20 +21,20 @@ export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
       letterSpacing: '0.01em',
     },
   },
-  render: ({ props, useObservable, useRef, useHostProps }) => {
-    const { manager } = props
-    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+  render: ({ props, useObservable, useRef }) => {
     const inputRef = useRef<HTMLInputElement>('input')
-
-    const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
-      onChange: (newValue) => void animateOpenState(wrapperRef, inputRef, newValue),
+    useObservable('isOpened', props.manager.isOpened, {
+      onChange: (isOpened) => {
+        if (inputRef.current) {
+          if (isOpened) {
+            inputRef.current.focus()
+          } else {
+            inputRef.current.value = ''
+          }
+        }
+      },
     })
-    useHostProps({ ...(isCurrentlyOpened ? { 'data-opened': '' } : {}) })
 
-    return (
-      <div ref={wrapperRef} style={{ width: isCurrentlyOpened ? '100%' : '0%', overflow: 'hidden' }}>
-        <input ref={inputRef} autofocus placeholder="Type to search commands..." />
-      </div>
-    )
+    return <input ref={inputRef} autofocus placeholder="Type to search commands..." />
   },
 })

package/src/components/command-palette/index.tsx

@@ -85,6 +85,10 @@ export const CommandPalette = Shade<CommandPaletteProps>({
             )
           }
 
+          if (!manager.isOpened.getValue()) {
+            manager.isOpened.setValue(true)
+          }
+
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >