@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/command-palette/command-palette-suggestion-list.spec.js

@@ -0,0 +1,394 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { CommandPaletteManager } from './command-palette-manager.js';
+import { CommandPaletteSuggestionList } from './command-palette-suggestion-list.js';
+describe('CommandPaletteSuggestionList', () => {
+    let originalAnimate;
+    let animateCalls;
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root" style="width: 500px;"></div>';
+        animateCalls = [];
+        originalAnimate = Element.prototype.animate;
+        Element.prototype.animate = vi.fn((keyframes, options) => {
+            animateCalls.push({ keyframes, options });
+            const mockAnimation = {
+                onfinish: null,
+                oncancel: null,
+                cancel: vi.fn(),
+                play: vi.fn(),
+                pause: vi.fn(),
+                finish: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+            };
+            setTimeout(() => {
+                mockAnimation.onfinish?.({});
+            }, 10);
+            return mockAnimation;
+        });
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        Element.prototype.animate = originalAnimate;
+        vi.restoreAllMocks();
+    });
+    const createManager = () => {
+        return new CommandPaletteManager([]);
+    };
+    const createSuggestion = (text, score) => ({
+        element: createComponent("span", null, text),
+        score,
+        onSelected: vi.fn(),
+    });
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            expect(component).not.toBeNull();
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render suggestion items container', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            expect(container).not.toBeNull();
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render suggestions from manager', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)]);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const items = component?.querySelectorAll('.suggestion-item');
+            expect(items?.length).toBe(2);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render suggestion content', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.currentSuggestions.setValue([createSuggestion('Test Command', 100)]);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const item = component?.querySelector('.suggestion-item');
+            expect(item?.textContent).toContain('Test Command');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should mark first item as selected by default', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)]);
+            manager.selectedIndex.setValue(0);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const items = component?.querySelectorAll('.suggestion-item');
+            expect(items?.[0]?.classList.contains('selected')).toBe(true);
+            expect(items?.[1]?.classList.contains('selected')).toBe(false);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should update selected class when selectedIndex changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)]);
+            manager.selectedIndex.setValue(0);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            manager.selectedIndex.setValue(1);
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const items = component?.querySelectorAll('.suggestion-item');
+            expect(items?.[0]?.classList.contains('selected')).toBe(false);
+            expect(items?.[1]?.classList.contains('selected')).toBe(true);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should call selectSuggestion when item is clicked while opened', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            const suggestion = createSuggestion('Click Me', 100);
+            manager.currentSuggestions.setValue([suggestion]);
+            manager.isOpened.setValue(true);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const item = component?.querySelector('.suggestion-item');
+            item?.click();
+            expect(selectSpy).toHaveBeenCalledWith(injector, 0);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should not call selectSuggestion when item is clicked while closed', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            const suggestion = createSuggestion('Click Me', 100);
+            manager.currentSuggestions.setValue([suggestion]);
+            manager.isOpened.setValue(false);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const item = component?.querySelector('.suggestion-item');
+            item?.click();
+            expect(selectSpy).not.toHaveBeenCalled();
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should animate slide-in when opening', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(false);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            animateCalls = [];
+            manager.isOpened.setValue(true);
+            await sleepAsync(50);
+            const slideAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) &&
+                call.keyframes.some((kf) => kf.transform === 'translate(0, -50px)') &&
+                call.keyframes.some((kf) => kf.transform === 'translate(0, 0)'));
+            expect(slideAnimation).toBeDefined();
+            expect(slideAnimation?.options?.duration).toBe(500);
+            expect(slideAnimation?.options?.fill).toBe('forwards');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should animate slide-out when closing', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(true);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            animateCalls = [];
+            manager.isOpened.setValue(false);
+            await sleepAsync(50);
+            const slideAnimation = animateCalls.find((call) => Array.isArray(call.keyframes) &&
+                call.keyframes.some((kf) => kf.transform === 'translate(0, 0)') &&
+                call.keyframes.some((kf) => kf.transform === 'translate(0, -50px)'));
+            expect(slideAnimation).toBeDefined();
+            expect(slideAnimation?.options?.duration).toBe(200);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should set container display to initial when opening', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(false);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            manager.isOpened.setValue(true);
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            expect(container?.style.display).toBe('initial');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should set container display to none when closing', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(true);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            manager.isOpened.setValue(false);
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            expect(container?.style.display).toBe('none');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should render empty list when no suggestions', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.currentSuggestions.setValue([]);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const items = component?.querySelectorAll('.suggestion-item');
+            expect(items?.length).toBe(0);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should support fullScreenSuggestions prop', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(true);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager, fullScreenSuggestions: true }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            expect(container?.style.left).toBe('0px');
+            expect(container?.style.width).toBe('calc(100% - 42px)');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should set max height based on window height', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(true);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            const expectedMaxHeight = `${window.innerHeight * 0.8}px`;
+            expect(container?.style.maxHeight).toBe(expectedMaxHeight);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should have correct CSS styles for suggestion items container', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            const computedStyle = window.getComputedStyle(container);
+            expect(computedStyle.position).toBe('absolute');
+            expect(computedStyle.overflow).toBe('hidden');
+            expect(computedStyle.zIndex).toBe('1');
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should call selectSuggestion with correct index for second item', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.currentSuggestions.setValue([
+                createSuggestion('First', 100),
+                createSuggestion('Second', 90),
+                createSuggestion('Third', 80),
+            ]);
+            manager.isOpened.setValue(true);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            const selectSpy = vi.spyOn(manager, 'selectSuggestion');
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const items = component?.querySelectorAll('.suggestion-item');
+            items[1]?.click();
+            expect(selectSpy).toHaveBeenCalledWith(injector, 1);
+            manager[Symbol.dispose]();
+        });
+    });
+    it('should update container z-index when opening and closing', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const manager = createManager();
+            manager.isOpened.setValue(false);
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CommandPaletteSuggestionList, { manager: manager }),
+            });
+            await sleepAsync(50);
+            manager.isOpened.setValue(true);
+            await sleepAsync(50);
+            const component = document.querySelector('shade-command-palette-suggestion-list');
+            const container = component?.querySelector('.suggestion-items-container');
+            expect(container?.style.zIndex).toBe('1');
+            manager.isOpened.setValue(false);
+            await sleepAsync(50);
+            expect(container?.style.zIndex).toBe('-1');
+            manager[Symbol.dispose]();
+        });
+    });
+});
+//# sourceMappingURL=command-palette-suggestion-list.spec.js.map

package/esm/components/command-palette/command-palette-suggestion-list.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette-suggestion-list.spec.js","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette-suggestion-list.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAA;AAGnF,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC5C,IAAI,eAAiD,CAAA;IACrD,IAAI,YAA6D,CAAA;IAEjE,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,6CAA6C,CAAA;QACvE,YAAY,GAAG,EAAE,CAAA;QACjB,eAAe,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAA;QAE3C,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,CAC/B,CAAC,SAAuD,EAAE,OAA2C,EAAE,EAAE;YACvG,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;YACzC,MAAM,aAAa,GAAG;gBACpB,QAAQ,EAAE,IAAwD;gBAClE,QAAQ,EAAE,IAAwD;gBAClE,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE;gBACf,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;gBACb,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE;gBACd,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE;gBACf,gBAAgB,EAAE,EAAE,CAAC,EAAE,EAAE;gBACzB,mBAAmB,EAAE,EAAE,CAAC,EAAE,EAAE;aAC7B,CAAA;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC,QAAQ,EAAE,CAAC,EAA4B,CAAC,CAAA;YACxD,CAAC,EAAE,EAAE,CAAC,CAAA;YAEN,OAAO,aAAqC,CAAA;QAC9C,CAAC,CACkC,CAAA;IACvC,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,eAAe,CAAA;QAC3C,EAAE,CAAC,eAAe,EAAE,CAAA;IACtB,CAAC,CAAC,CAAA;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAA;IACtC,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,KAAa,EAAkC,EAAE,CAAC,CAAC;QACzF,OAAO,EAAE,8BAAO,IAAI,CAAQ;QAC5B,KAAK;QACL,UAAU,EAAE,EAAE,CAAC,EAAE,EAAE;KACpB,CAAC,CAAA;IAEF,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAA;YACjF,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;YAEhC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAC,CAAA;YACzE,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;YAEhC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,gBAAgB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;YAC5G,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,KAAK,GAAG,SAAS,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;YAC7D,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAE7B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YAC5E,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;YACzD,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;YAEnD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,gBAAgB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;YAC5G,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACjC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,KAAK,GAAG,SAAS,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;YAC7D,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC7D,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAE9D,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QACvE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,CAAC,EAAE,gBAAgB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;YAC5G,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACjC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACjC,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,KAAK,GAAG,SAAS,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;YAC7D,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAC9D,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAE7D,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,MAAM,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;YACpD,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;YACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;YAEvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAgB,CAAA;YACxE,IAAI,EAAE,KAAK,EAAE,CAAA;YAEb,MAAM,CAAC,SAAS,CAAC,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;YAEnD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,MAAM,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;YACpD,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;YACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;YAEvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAgB,CAAA;YACxE,IAAI,EAAE,KAAK,EAAE,CAAA;YAEb,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAA;YAExC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YACpB,YAAY,GAAG,EAAE,CAAA;YAEjB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CACtC,CAAC,IAAI,EAAE,EAAE,CACP,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;gBAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAY,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,KAAK,qBAAqB,CAAC;gBAC7E,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAY,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,KAAK,iBAAiB,CAAC,CAC5E,CAAA;YAED,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAA;YACpC,MAAM,CAAE,cAAc,EAAE,OAAoC,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YACjF,MAAM,CAAE,cAAc,EAAE,OAAoC,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAEpF,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YACpB,YAAY,GAAG,EAAE,CAAA;YAEjB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CACtC,CAAC,IAAI,EAAE,EAAE,CACP,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;gBAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAY,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,KAAK,iBAAiB,CAAC;gBACzE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAY,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,KAAK,qBAAqB,CAAC,CAChF,CAAA;YAED,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAA;YACpC,MAAM,CAAE,cAAc,EAAE,OAAoC,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YAEjF,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAgB,CAAA;YACxF,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAEhD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAgB,CAAA;YACxF,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAE7C,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;YACvC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,KAAK,GAAG,SAAS,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;YAC7D,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAE7B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,qBAAqB,SAAG;aACrF,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAgB,CAAA;YACxF,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACzC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;YAExD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAgB,CAAA;YACxF,MAAM,iBAAiB,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,GAAG,IAAI,CAAA;YACzD,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;YAE1D,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAgB,CAAA;YACxF,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAA;YAExD,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAC/C,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAC7C,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YAEtC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC;gBAClC,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC;gBAC9B,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC;gBAC9B,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC;aAC9B,CAAC,CAAA;YACF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;YAEvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,KAAK,GAAG,SAAS,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAC5D;YAAC,KAAK,CAAC,CAAC,CAAiB,EAAE,KAAK,EAAE,CAAA;YAEnC,MAAM,CAAC,SAAS,CAAC,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;YAEnD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAA;YAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,GAAI;aAC/D,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,uCAAuC,CAAgB,CAAA;YAChG,MAAM,SAAS,GAAG,SAAS,EAAE,aAAa,CAAC,6BAA6B,CAAgB,CAAA;YACxF,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YAEzC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAE1C,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/esm/components/command-palette/index.d.ts

@@ -11,5 +11,7 @@ export interface CommandPaletteProps {
 }
 export declare const CommandPalette: (props: CommandPaletteProps & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/esm/components/command-palette/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAE5D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AAErC,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,eAAe,EAAE,CAAA;IACnC,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACpC,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,eAAO,MAAM,cAAc;;sEA8LzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAE5D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AAErC,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,eAAe,EAAE,CAAA;IACnC,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACpC,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,eAAO,MAAM,cAAc;;;;sEAmFzB,CAAA"}

package/esm/components/command-palette/index.js

@@ -1,8 +1,9 @@
 import { Shade, createComponent } from '@furystack/shades';
 import { ClickAwayService } from '../../services/click-away-service.js';
-import { ThemeProviderService } from '../../services/theme-provider-service.js';
-import { promisifyAnimation } from '../../utils/promisify-animation.js';
+import { Icon } from '../icons/icon.js';
+import { close } from '../icons/icon-definitions.js';
 import { Loader } from '../loader.js';
+import { searchableInputStyles } from '../searchable-input-styles.js';
 import { CommandPaletteInput } from './command-palette-input.js';
 import { CommandPaletteManager } from './command-palette-manager.js';
 import { CommandPaletteSuggestionList } from './command-palette-suggestion-list.js';
@@ -12,69 +13,42 @@ export * from './command-palette-suggestion-list.js';
 export * from './command-provider.js';
 export const CommandPalette = Shade({
     shadowDomName: 'shade-command-palette',
-    render: ({ props, injector, element, useState, useDisposable, useObservable }) => {
-        element.style.flexGrow = '1';
+    css: {
+        ...searchableInputStyles,
+        '& .command-palette-wrapper': {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        '& .loader-container': {
+            width: '20px',
+            height: '20px',
+            opacity: '0',
+        },
+        '&[data-loading] .loader-container': {
+            opacity: '1',
+        },
+    },
+    render: ({ props, injector, useState, useDisposable, useObservable, useHostProps, useRef }) => {
         const [manager] = useState('manager', new CommandPaletteManager(props.commandProviders));
-        const { theme } = injector.getInstance(ThemeProviderService);
-        useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)));
-        const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, {
-            onChange: (isLoading) => {
-                const loader = element.querySelector('.loader-container');
-                if (isLoading) {
-                    void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-                        duration: 100,
-                        fill: 'forwards',
-                    });
-                }
-                else {
-                    void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-                        duration: 100,
-                        fill: 'forwards',
-                    });
+        const wrapperRef = useRef('wrapper');
+        useDisposable('clickAwayService', () => {
+            // Defer to next microtask so the ref is populated after mount
+            let clickAway = null;
+            queueMicrotask(() => {
+                const hostEl = wrapperRef.current?.closest('shade-command-palette');
+                if (hostEl) {
+                    clickAway = new ClickAwayService(hostEl, () => manager.isOpened.setValue(false));
                 }
-            },
+            });
+            return { [Symbol.dispose]: () => clickAway?.[Symbol.dispose]() };
         });
-        const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, {
-            onChange: (isOpened) => {
-                {
-                    const suggestions = element.querySelector('.close-suggestions');
-                    const postControls = element.querySelector('.post-controls');
-                    const inputContainer = element.querySelector('.input-container');
-                    if (isOpened) {
-                        void promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-                            duration: 500,
-                            fill: 'forwards',
-                        });
-                        void promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
-                            duration: 100,
-                            fill: 'forwards',
-                        });
-                        void promisifyAnimation(inputContainer, [{ background: 'transparent' }, { background: theme.background.default }], {
-                            duration: 500,
-                            fill: 'forwards',
-                            easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-                        });
-                    }
-                    else {
-                        void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-                            duration: 500,
-                            fill: 'forwards',
-                        });
-                        void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-                            duration: 500,
-                            fill: 'forwards',
-                            delay: 300,
-                        });
-                        void promisifyAnimation(inputContainer, [{ background: theme.background.default }, { background: 'transparent' }], {
-                            duration: 300,
-                            fill: 'forwards',
-                            easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-                        });
-                    }
-                }
-            },
+        const [isLoading] = useObservable('isLoading', manager.isLoading);
+        const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened);
+        useHostProps({
+            ...(isLoading ? { 'data-loading': '' } : {}),
+            ...(isOpenedAtRender ? { 'data-opened': '' } : {}),
         });
-        return (createComponent("div", { style: { display: 'flex', flexDirection: 'column' }, onkeyup: (ev) => {
+        return (createComponent("div", { ref: wrapperRef, className: "command-palette-wrapper", onkeyup: (ev) => {
                 if (ev.key === 'Enter') {
                     ev.preventDefault();
                     manager.selectSuggestion(injector);
@@ -90,67 +64,14 @@ export const CommandPalette = Shade({
                 }
                 void manager.getSuggestion({ injector, term: ev.target.value });
             } },
-            createComponent("div", { className: "input-container", style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'flex-end',
-                    padding: '0 1.25em',
-                    borderRadius: '12px',
-                    position: 'relative',
-                    background: 'rgba(128,128,128,0.08)',
-                    border: `1px solid ${manager.isOpened.getValue() ? 'rgba(128,128,128,0.3)' : 'rgba(128,128,128,0.15)'}`,
-                    boxShadow: manager.isOpened.getValue()
-                        ? '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)'
-                        : '0 2px 4px rgba(0,0,0,0.05)',
-                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                    ...props.style,
-                } },
-                createComponent("div", { className: "term-icon", style: {
-                        cursor: 'pointer',
-                        color: theme.text.secondary,
-                        fontWeight: '600',
-                        fontSize: '0.95em',
-                        transition: 'color 0.2s ease',
-                        padding: '0.5em 0.75em 0.5em 0',
-                        userSelect: 'none',
-                    }, onmouseenter: (ev) => {
-                        ;
-                        ev.target.style.color = theme.text.primary;
-                    }, onmouseleave: (ev) => {
-                        ;
-                        ev.target.style.color = theme.text.secondary;
-                    }, onclick: () => setIsOpened(true) }, props.defaultPrefix),
+            createComponent("div", { className: "input-container", style: props.style },
+                createComponent("div", { className: "term-icon", onclick: () => setIsOpened(true) }, props.defaultPrefix),
                 createComponent(CommandPaletteInput, { manager: manager }),
-                createComponent("div", { className: "post-controls", style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        width: isOpenedAtRender ? '50px' : '0px',
-                        overflow: 'hidden',
-                    } },
-                    createComponent("div", { className: "loader-container", style: { width: '20px', height: '20px', opacity: isLoadingAtRender ? '1' : '0' } },
+                createComponent("div", { className: "post-controls" },
+                    createComponent("div", { className: "loader-container" },
                         createComponent(Loader, { style: { width: '100%', height: '100%' } })),
-                    createComponent("div", { className: "close-suggestions", onclick: () => setIsOpened(false), onmouseenter: (ev) => {
-                            ;
-                            ev.target.style.background = 'rgba(255,255,255,0.15)';
-                            ev.target.style.transform = 'scale(1.1)';
-                        }, onmouseleave: (ev) => {
-                            ;
-                            ev.target.style.background = 'transparent';
-                            ev.target.style.transform = 'scale(1)';
-                        }, style: {
-                            width: '24px',
-                            height: '24px',
-                            opacity: manager.isOpened.getValue() ? '1' : '0',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            cursor: 'pointer',
-                            borderRadius: '6px',
-                            transition: 'all 0.2s ease',
-                            fontSize: '14px',
-                            color: theme.text.secondary,
-                        } }, "\u2716"))),
+                    createComponent("div", { className: "close-suggestions", onclick: () => setIsOpened(false) },
+                        createComponent(Icon, { icon: close, size: 14 })))),
             createComponent(CommandPaletteSuggestionList, { manager: manager, fullScreenSuggestions: props.fullScreenSuggestions })));
     },
 });