@flxgde/gigamenu 0.2.0 → 0.5.0

package/fesm2022/flxgde-gigamenu.mjs

@@ -15,6 +15,9 @@ const DEFAULT_CONFIG = {
     maxResults: 10,
     autoDiscoverRoutes: true,
     argSeparator: ' ',
+    darkModeClass: 'dark',
+    autocompleteTabBehavior: 'cycle',
+    autocompleteDismiss: 'on-type',
 };
 /**
  * Helper function to define a command with type safety.
@@ -23,12 +26,19 @@ function defineCommand(command) {
     return command;
 }
 
+const DEFAULT_PROVIDER_OPTIONS = {
+    minQueryLength: 2,
+    debounceMs: 200,
+    group: '',
+};
 class GigamenuService {
     _router;
     _items = signal(new Map(), ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _providers = signal(new Map(), ...(ngDevMode ? [{ debugName: "_providers" }] : []));
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
     _config = signal(DEFAULT_CONFIG, ...(ngDevMode ? [{ debugName: "_config" }] : []));
     items = computed(() => Array.from(this._items().values()), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    providers = this._providers.asReadonly();
     isOpen = this._isOpen.asReadonly();
     config = this._config.asReadonly();
     /**
@@ -55,6 +65,10 @@ class GigamenuService {
     toggle() {
         this._isOpen.update((v) => !v);
     }
+    toggleDarkMode() {
+        const darkModeClass = this._config().darkModeClass ?? 'dark';
+        document.documentElement.classList.toggle(darkModeClass);
+    }
     registerItem(item) {
         this._items.update((items) => {
             const newItems = new Map(items);
@@ -69,6 +83,31 @@ class GigamenuService {
             return newItems;
         });
     }
+    /**
+     * Register a dynamic item provider. The provider is invoked when the user
+     * types in the menu (in action-selection mode) and its results are merged
+     * into the displayed items alongside statically registered items.
+     */
+    registerProvider(id, provider, options = {}) {
+        const resolved = {
+            ...DEFAULT_PROVIDER_OPTIONS,
+            ...options,
+        };
+        this._providers.update((providers) => {
+            const next = new Map(providers);
+            next.set(id, { provider, options: resolved });
+            return next;
+        });
+    }
+    unregisterProvider(id) {
+        this._providers.update((providers) => {
+            if (!providers.has(id))
+                return providers;
+            const next = new Map(providers);
+            next.delete(id);
+            return next;
+        });
+    }
     registerCommand(command) {
         this.registerItem({
             ...command,
@@ -78,17 +117,22 @@ class GigamenuService {
     registerPage(page) {
         // Extract parameter names from path (e.g., /users/:id -> ['id'])
         const paramNames = this.extractParamNames(page.path);
+        // Use manually specified params if provided, otherwise use extracted ones
+        const finalParams = page.params ?? (paramNames.length > 0 ? paramNames : undefined);
         this.registerItem({
             ...page,
             category: 'page',
-            params: paramNames.length > 0 ? paramNames : undefined,
+            params: finalParams,
+            // Preserve paramProviders if specified
+            paramProviders: page.paramProviders,
             action: (args) => {
                 let path = page.path;
-                if (paramNames.length > 0 && args) {
+                const paramsToReplace = finalParams ?? [];
+                if (paramsToReplace.length > 0 && args) {
                     // Split args by whitespace to get parameter values
                     const argValues = args.trim().split(/\s+/);
                     // Replace each parameter with corresponding arg value
-                    paramNames.forEach((param, index) => {
+                    paramsToReplace.forEach((param, index) => {
                         if (argValues[index]) {
                             path = path.replace(`:${param}`, argValues[index]);
                         }
@@ -285,6 +329,634 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+/**
+ * Handles parsing of gigamenu query input.
+ * Supports quoted strings for labels/values containing spaces.
+ */
+class QueryParser {
+    separator;
+    constructor(separator = ' ') {
+        this.separator = separator;
+    }
+    /**
+     * Parse a query string into search term and arguments.
+     * Simple split on first separator - no quote handling.
+     */
+    parseQuery(query) {
+        const sepIndex = query.indexOf(this.separator);
+        if (sepIndex === -1) {
+            return { searchTerm: query, args: '', hasSeparator: false };
+        }
+        return {
+            searchTerm: query.substring(0, sepIndex),
+            args: query.substring(sepIndex + this.separator.length),
+            hasSeparator: true,
+        };
+    }
+    /**
+     * Parse an arguments string into an array.
+     * Simple space-based splitting - quotes are ignored.
+     */
+    parseArgs(args) {
+        if (!args) {
+            return { values: [], display: [] };
+        }
+        // Simple split on spaces, filter out empty strings
+        const parts = args.split(' ').filter(part => part.length > 0);
+        return { values: parts, display: parts };
+    }
+    /**
+     * Strip quotes from a string if it's quoted (legacy, kept for compatibility).
+     */
+    stripQuotes(str) {
+        if ((str.startsWith("'") && str.endsWith("'")) ||
+            (str.startsWith('"') && str.endsWith('"'))) {
+            return str.slice(1, -1);
+        }
+        return str;
+    }
+    /**
+     * Return the string as-is (no escaping needed).
+     */
+    escapeIfNeeded(str) {
+        return str;
+    }
+    /**
+     * Check if a search term matches a label (case-insensitive).
+     */
+    matchesLabel(searchTerm, label) {
+        const trimmed = searchTerm.trim().toLowerCase();
+        return trimmed === label.toLowerCase();
+    }
+    /**
+     * Build a query string from search term and args.
+     */
+    buildQuery(searchTerm, args) {
+        if (args.length === 0) {
+            return searchTerm;
+        }
+        return searchTerm + this.separator + args.join(' ');
+    }
+}
+
+/**
+ * Represents the different states of the gigamenu input.
+ * New paradigm: input handles ONE thing at a time.
+ */
+var InputState;
+(function (InputState) {
+    /** Menu is closed */
+    InputState["Closed"] = "closed";
+    /** User is searching/selecting an action (page or command) */
+    InputState["ActionSelection"] = "actionSelection";
+    /** User is inputting a parameter value */
+    InputState["ParameterInput"] = "parameterInput";
+})(InputState || (InputState = {}));
+/**
+ * Compute the current input state based on menu status.
+ */
+function computeInputState(ctx) {
+    if (!ctx.isOpen) {
+        return InputState.Closed;
+    }
+    if (ctx.hasLockedAction) {
+        return InputState.ParameterInput;
+    }
+    return InputState.ActionSelection;
+}
+
+/**
+ * Scroll the selected menu item into view.
+ */
+function scrollSelectedIntoView(container, selectedIndex) {
+    if (!container)
+        return;
+    const selectedButton = container.querySelector(`[data-index="${selectedIndex}"]`);
+    if (selectedButton) {
+        selectedButton.scrollIntoView({ block: 'nearest' });
+    }
+}
+/**
+ * Scroll the selected autocomplete suggestion into view.
+ */
+function scrollAutocompleteIntoView(container, selectedIndex) {
+    if (!container)
+        return;
+    const selectedButton = container.querySelector(`[data-autocomplete-index="${selectedIndex}"]`);
+    if (selectedButton) {
+        selectedButton.scrollIntoView({ block: 'nearest' });
+    }
+}
+
+/**
+ * Filter items based on search query.
+ */
+function filterItems(items, searchTerm, queryParser) {
+    const normalizedTerm = searchTerm.toLowerCase().trim();
+    if (!normalizedTerm) {
+        return items;
+    }
+    return items.filter((item) => matchesQuery(item, normalizedTerm, queryParser));
+}
+/**
+ * Check if an item matches the search query.
+ * Uses word-based matching across label, description, and keywords.
+ */
+function matchesQuery(item, query, _queryParser) {
+    const searchableText = [
+        item.label,
+        item.description,
+        ...(item.keywords ?? []),
+    ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+    const words = query.split(/\s+/);
+    return words.every((word) => searchableText.includes(word));
+}
+/**
+ * Sort items by frecency scores (frequency + recency).
+ */
+function sortByFrecency(items, scores) {
+    if (scores.size === 0)
+        return items;
+    return [...items].sort((a, b) => {
+        const scoreA = scores.get(a.id) ?? 0;
+        const scoreB = scores.get(b.id) ?? 0;
+        return scoreB - scoreA;
+    });
+}
+/**
+ * Build searchable text from an item for matching.
+ */
+function buildSearchableText(item) {
+    return [item.label, item.description, ...(item.keywords ?? [])]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+}
+
+/**
+ * Compute the current parameter index being edited.
+ * Returns null if no parameter is being edited.
+ */
+function computeCurrentParamIndex(item, args, argsCount) {
+    if (!item || !item.params || item.params.length === 0)
+        return null;
+    const endsWithSpace = args.endsWith(' ');
+    // If user is still typing a param (no trailing space) and has typed at least one arg
+    if (!endsWithSpace && argsCount > 0 && argsCount <= item.params.length) {
+        return argsCount - 1; // Currently editing the last typed arg
+    }
+    // If we have fewer args than params, we're about to type the next param
+    if (argsCount < item.params.length)
+        return argsCount;
+    // All params complete (with trailing space confirming completion)
+    return null;
+}
+/**
+ * Get the name of the current parameter being edited.
+ */
+function computeCurrentParamName(item, paramIndex) {
+    if (paramIndex === null || !item || !item.params)
+        return null;
+    return item.params[paramIndex] ?? null;
+}
+/**
+ * Compute the current partial value of the parameter being edited.
+ */
+function computeCurrentParamValue(args, argsArray, paramIndex) {
+    const trimmedArgs = args.trim();
+    if (!trimmedArgs)
+        return '';
+    if (paramIndex === null)
+        return '';
+    const endsWithSpace = args.endsWith(' ');
+    // If we're on the last arg and still typing
+    if (!endsWithSpace && argsArray.length === paramIndex + 1) {
+        return argsArray[paramIndex] ?? '';
+    }
+    // If we're starting a new arg (after a space)
+    if (endsWithSpace || argsArray.length === paramIndex) {
+        return '';
+    }
+    return '';
+}
+/**
+ * Check if the selected item can be executed (has all required params).
+ */
+function computeCanExecute(item, argsCount) {
+    if (!item)
+        return false;
+    if (!item.params || item.params.length === 0)
+        return true;
+    return argsCount >= item.params.length;
+}
+/**
+ * Get completed arguments for display (excludes the incomplete arg being typed).
+ */
+function computeCompletedArgsDisplay(display, args) {
+    const endsWithSpace = args.endsWith(' ');
+    // If args ends with space, all args are complete
+    if (endsWithSpace || !args)
+        return display;
+    // Otherwise, exclude the last incomplete arg (shown in currentParamValue)
+    return display.slice(0, -1);
+}
+/**
+ * Get actual values for args (substituting labels with values from selected options).
+ */
+function computeArgsValues(argsArray, selectedOptions) {
+    return argsArray.map((arg, index) => {
+        const option = selectedOptions.get(index);
+        // If we have a selected option for this param and the current arg matches its label, use the value
+        if (option && arg === option.label) {
+            return option.value;
+        }
+        return arg;
+    });
+}
+/**
+ * Check if the selected item has autocomplete available for the current param.
+ */
+function computeHasAutocomplete(item, paramName) {
+    if (!item || !paramName)
+        return false;
+    return !!(item.paramProviders?.[paramName]);
+}
+
+/**
+ * Get color class for a parameter index.
+ */
+function getParamColor(index) {
+    return PARAM_COLORS[index % PARAM_COLORS.length];
+}
+/**
+ * Create context for item template.
+ */
+function createItemContext(item, index, selectedIndex) {
+    return {
+        $implicit: item,
+        index,
+        selected: selectedIndex === index,
+    };
+}
+/**
+ * Create context for empty state template.
+ */
+function createEmptyContext(query) {
+    return {
+        $implicit: query,
+    };
+}
+/**
+ * Create context for footer template.
+ */
+function createFooterContext(filteredCount, totalCount) {
+    return {
+        $implicit: filteredCount,
+        total: totalCount,
+    };
+}
+
+/**
+ * Get the initial/reset state for the menu.
+ */
+function getInitialMenuState() {
+    return {
+        query: '',
+        selectedIndex: 0,
+        showAutocomplete: false,
+        autocompleteSelectedIndex: 0,
+        selectedParamOptions: new Map(),
+    };
+}
+/**
+ * Check if an input element is currently focused.
+ */
+function isInputFocused() {
+    const activeElement = document.activeElement;
+    if (!activeElement)
+        return false;
+    const tagName = activeElement.tagName.toLowerCase();
+    return (tagName === 'input' ||
+        tagName === 'textarea' ||
+        activeElement.isContentEditable);
+}
+/**
+ * Check if the current search term matches the selected item's label.
+ */
+function isSearchTermMatchingItem(searchTerm, itemLabel, queryParser) {
+    return queryParser.matchesLabel(searchTerm, itemLabel);
+}
+/**
+ * Complete the selected item's label in the search input.
+ * Returns the new query string.
+ */
+function completeItemLabel(item, separator, queryParser) {
+    const escapedLabel = queryParser.escapeIfNeeded(item.label);
+    const hasParams = item.params && item.params.length > 0;
+    return hasParams ? escapedLabel + separator : escapedLabel;
+}
+
+/**
+ * Fetch autocomplete suggestions from a provider.
+ */
+async function fetchAutocompleteSuggestions(provider, query, cache) {
+    // Handle static array provider
+    if (Array.isArray(provider)) {
+        const cacheKey = `${JSON.stringify(provider)}-${query}`;
+        if (cache.has(cacheKey)) {
+            return { options: cache.get(cacheKey), isAsync: false };
+        }
+        cache.set(cacheKey, provider);
+        return { options: provider, isAsync: false };
+    }
+    // Handle async function provider (server-side filtering)
+    const result = await Promise.resolve(provider(query));
+    return { options: result, isAsync: true };
+}
+/**
+ * Filter suggestions client-side based on query.
+ */
+function filterSuggestionsClientSide(options, query) {
+    const lowerQuery = query.toLowerCase().trim();
+    if (!lowerQuery)
+        return options;
+    return options.filter((opt) => opt.label.toLowerCase().includes(lowerQuery));
+}
+/**
+ * Compute typeahead ghost text suggestion.
+ * Returns the portion of the label that extends beyond the typed text.
+ */
+function computeTypeaheadSuggestion(suggestions, selectedIndex, paramValue) {
+    if (suggestions.length === 0)
+        return null;
+    const suggestion = suggestions[selectedIndex] ?? suggestions[0];
+    if (!suggestion)
+        return null;
+    // Return portion of label that extends beyond typed text (case-insensitive prefix match)
+    const suggestionLabel = suggestion.label;
+    if (suggestionLabel.toLowerCase().startsWith(paramValue.toLowerCase())) {
+        return suggestionLabel.slice(paramValue.length);
+    }
+    return null;
+}
+/**
+ * Build the new query string after selecting an autocomplete option.
+ */
+function buildQueryWithSelection(ctx, option, addTrailingSpace) {
+    if (ctx.paramIndex === null)
+        return ctx.searchTerm;
+    // Quote labels that contain spaces
+    const escapedLabel = ctx.queryParser.escapeIfNeeded(option.label);
+    // Replace current param with the selected option's label
+    const newArgs = [...ctx.argsArray];
+    newArgs[ctx.paramIndex] = escapedLabel;
+    // Build new query with or without trailing space
+    const baseQuery = ctx.searchTerm + ctx.separator + newArgs.join(' ');
+    return addTrailingSpace ? baseQuery + ' ' : baseQuery;
+}
+/**
+ * Process autocomplete suggestion selection.
+ * Returns the new query and the selected option for tracking.
+ */
+function processAutocompleteSuggestionSelection(suggestions, selectedIdx, ctx, addTrailingSpace) {
+    const option = suggestions[selectedIdx];
+    if (!option || ctx.paramIndex === null)
+        return null;
+    const newQuery = buildQueryWithSelection(ctx, option, addTrailingSpace);
+    return {
+        newQuery,
+        selectedOption: option,
+        paramIndex: ctx.paramIndex,
+    };
+}
+/**
+ * Process autocomplete suggestion selection with cycling to next.
+ * zsh-style: select current and prepare for next Tab press.
+ */
+function processAutocompleteSuggestionAndCycle(suggestions, currentIdx, ctx) {
+    if (suggestions.length === 0)
+        return null;
+    const option = suggestions[currentIdx];
+    if (!option || ctx.paramIndex === null)
+        return null;
+    // Don't add trailing space - keep cursor position for cycling
+    const newQuery = buildQueryWithSelection(ctx, option, false);
+    // Cycle to next suggestion
+    const nextIdx = (currentIdx + 1) % suggestions.length;
+    return {
+        newQuery,
+        selectedOption: option,
+        paramIndex: ctx.paramIndex,
+        nextIndex: nextIdx,
+    };
+}
+
+/**
+ * Handle global keydown events (Ctrl+K, /, Escape).
+ * Returns action if handled, null otherwise.
+ */
+function handleGlobalKeydown(event, ctx) {
+    // Ctrl/Cmd + K: Toggle menu
+    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        return { type: 'toggle' };
+    }
+    // /: Open menu (only when no input is focused)
+    if (event.key === '/' && !ctx.isInputFocused) {
+        return { type: 'open' };
+    }
+    // Escape: Close menu (only when input is NOT focused - let input handler deal with it)
+    if (event.key === 'Escape' && ctx.isOpen && !ctx.isInputFocused) {
+        return { type: 'close' };
+    }
+    return null;
+}
+/**
+ * Handle keyboard events in ActionSelection state.
+ */
+function handleActionSelectionKeydown(event, ctx) {
+    const actions = [];
+    const item = ctx.selectedItem;
+    switch (event.key) {
+        case 'ArrowDown':
+            actions.push({
+                type: 'setSelectedIndex',
+                value: Math.min(ctx.selectedIndex + 1, ctx.items.length - 1),
+            });
+            actions.push({ type: 'scrollIntoView' });
+            break;
+        case 'ArrowUp':
+            actions.push({
+                type: 'setSelectedIndex',
+                value: Math.max(ctx.selectedIndex - 1, 0),
+            });
+            actions.push({ type: 'scrollIntoView' });
+            break;
+        case 'Tab':
+            if (item) {
+                // Tab: always tries to go to params first, or execute if no params
+                if (item.params && item.params.length > 0) {
+                    actions.push({ type: 'lockAction', item });
+                }
+                else {
+                    actions.push({ type: 'executeAction', item });
+                }
+            }
+            break;
+        case 'Enter':
+            if (item) {
+                const hasRequiredParams = item.params && item.params.length > 0 && !hasOnlyOptionalParams(item);
+                if (hasRequiredParams) {
+                    // Has required params - go to parameter input
+                    actions.push({ type: 'lockAction', item });
+                }
+                else {
+                    // No params or only optional - execute immediately
+                    actions.push({ type: 'executeAction', item });
+                }
+            }
+            break;
+        case 'Escape':
+            actions.push({ type: 'close' });
+            break;
+    }
+    return actions;
+}
+/**
+ * Handle keyboard events in ParameterInput state.
+ */
+function handleParameterInputKeydown(event, ctx) {
+    const actions = [];
+    const item = ctx.lockedItem;
+    const params = item.params ?? [];
+    const currentParam = params[ctx.currentParamIndex];
+    const isLastParam = ctx.currentParamIndex >= params.length - 1;
+    const hasSuggestions = ctx.suggestions.length > 0;
+    switch (event.key) {
+        case 'ArrowDown':
+            if (hasSuggestions) {
+                actions.push({
+                    type: 'setSelectedIndex',
+                    value: Math.min(ctx.selectedSuggestionIndex + 1, ctx.suggestions.length - 1),
+                });
+                actions.push({ type: 'scrollIntoView' });
+            }
+            break;
+        case 'ArrowUp':
+            if (hasSuggestions) {
+                actions.push({
+                    type: 'setSelectedIndex',
+                    value: Math.max(ctx.selectedSuggestionIndex - 1, 0),
+                });
+                actions.push({ type: 'scrollIntoView' });
+            }
+            break;
+        case 'Tab':
+            // Tab: select suggestion (if any), then go to next param or execute
+            if (hasSuggestions) {
+                actions.push({ type: 'selectSuggestion', option: ctx.suggestions[ctx.selectedSuggestionIndex] });
+            }
+            if (isLastParam) {
+                // Execute - args will be built at dispatch time from current state
+                actions.push({ type: 'executeLockedAction' });
+            }
+            else {
+                actions.push({ type: 'nextParameter' });
+            }
+            break;
+        case 'Enter':
+            // Enter: select suggestion if any
+            if (hasSuggestions && ctx.selectedSuggestionIndex >= 0) {
+                actions.push({ type: 'selectSuggestion', option: ctx.suggestions[ctx.selectedSuggestionIndex] });
+            }
+            if (isLastParam) {
+                // Execute - args will be built at dispatch time from current state
+                actions.push({ type: 'executeLockedAction' });
+            }
+            else {
+                // More params - go to next (Enter acts like Tab when more required params)
+                actions.push({ type: 'nextParameter' });
+            }
+            break;
+        case 'Escape':
+            // Escape: go back one step (like Backspace on empty)
+            if (ctx.currentParamIndex > 0) {
+                // Go to previous parameter
+                actions.push({ type: 'previousParameter' });
+            }
+            else {
+                // At first param, go back to action selection
+                actions.push({ type: 'unlockAction' });
+            }
+            break;
+        case 'Backspace':
+            // Backspace when query is empty: go back
+            if (ctx.query === '') {
+                if (ctx.currentParamIndex > 0) {
+                    // Go to previous parameter
+                    actions.push({ type: 'previousParameter' });
+                }
+                else {
+                    // At first param, go back to action selection
+                    actions.push({ type: 'unlockAction' });
+                }
+            }
+            break;
+    }
+    return actions;
+}
+/**
+ * Check if item has only optional parameters (none required).
+ * For now, we treat all params as required. Can be extended later.
+ */
+function hasOnlyOptionalParams(_item) {
+    // TODO: Add optional param support to GigamenuItem type
+    return false;
+}
+/**
+ * Handle zsh-like keyboard shortcuts (Ctrl+W, Ctrl+U).
+ * Returns the new query if handled, null otherwise.
+ */
+function handleZshShortcuts(event, query) {
+    // Ctrl+W or Alt+Backspace or Ctrl+Backspace: Delete last word
+    if ((event.ctrlKey && event.key === 'w') ||
+        (event.altKey && event.key === 'Backspace') ||
+        (event.ctrlKey && event.key === 'Backspace')) {
+        return deleteLastWord(query);
+    }
+    // Ctrl+U: Clear line
+    if (event.ctrlKey && event.key === 'u') {
+        return '';
+    }
+    return null;
+}
+/**
+ * Delete the last word from the query.
+ */
+function deleteLastWord(query) {
+    if (!query)
+        return '';
+    let newQuery = query.replace(/\s+$/, '');
+    const lastSpaceIndex = newQuery.lastIndexOf(' ');
+    if (lastSpaceIndex !== -1) {
+        newQuery = newQuery.substring(0, lastSpaceIndex);
+    }
+    else {
+        newQuery = '';
+    }
+    return newQuery;
+}
+/**
+ * Check if any actions were generated.
+ */
+function hasActions(actions) {
+    return actions.length > 0;
+}
+
+// Scroll utilities
+
 const STORAGE_KEY = 'gigamenu_frecency';
 const GLOBAL_KEY = '__global__';
 const MAX_ENTRIES_PER_TERM = 10;
@@ -458,88 +1130,114 @@ class GigamenuComponent {
     headerTemplate = contentChild(GigamenuHeaderTemplate, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
     footerTemplate = contentChild(GigamenuFooterTemplate, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
     panelTemplate = contentChild(GigamenuPanelTemplate, ...(ngDevMode ? [{ debugName: "panelTemplate" }] : []));
+    // Core state signals
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
     selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
-    /** Parsed search term (before first separator) */
-    searchTerm = computed(() => {
-        const q = this.query();
-        const separator = this.service.config().argSeparator ?? ' ';
-        const sepIndex = q.indexOf(separator);
-        if (sepIndex === -1)
-            return q;
-        return q.substring(0, sepIndex);
-    }, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    /** Parsed arguments (after first separator) */
-    args = computed(() => {
-        const q = this.query();
+    // Step-by-step input state
+    lockedAction = signal(null, ...(ngDevMode ? [{ debugName: "lockedAction" }] : []));
+    paramValues = signal([], ...(ngDevMode ? [{ debugName: "paramValues" }] : []));
+    // Autocomplete state signals
+    autocompleteSuggestions = signal([], ...(ngDevMode ? [{ debugName: "autocompleteSuggestions" }] : []));
+    autocompleteCache = new Map();
+    selectedParamOptions = signal(new Map(), ...(ngDevMode ? [{ debugName: "selectedParamOptions" }] : []));
+    // Dynamic provider state
+    providerResults = signal(new Map(), ...(ngDevMode ? [{ debugName: "providerResults" }] : []));
+    providerTimers = new Map();
+    providerGeneration = new Map();
+    // Query parsing (simplified - only used for filtering)
+    queryParser = computed(() => {
         const separator = this.service.config().argSeparator ?? ' ';
-        const sepIndex = q.indexOf(separator);
-        if (sepIndex === -1)
-            return '';
-        return q.substring(sepIndex + separator.length);
-    }, ...(ngDevMode ? [{ debugName: "args" }] : []));
-    /** Whether the query contains a separator (for display purposes) */
-    hasSeparator = computed(() => {
-        const q = this.query();
-        const separator = this.service.config().argSeparator ?? ' ';
-        return q.includes(separator);
-    }, ...(ngDevMode ? [{ debugName: "hasSeparator" }] : []));
-    /** Parsed arguments as array */
-    argsArray = computed(() => {
-        const args = this.args();
-        if (!args)
-            return [];
-        return args.split(/\s+/).filter(Boolean);
-    }, ...(ngDevMode ? [{ debugName: "argsArray" }] : []));
-    /** Currently selected item */
+        return new QueryParser(separator);
+    }, ...(ngDevMode ? [{ debugName: "queryParser" }] : []));
+    // Selected item from display list
     selectedItem = computed(() => {
-        const items = this.filteredItems();
+        const items = this.displayItems();
         const index = this.selectedIndex();
         return items[index] ?? null;
     }, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
-    /** Whether the selected item can be executed (has all required params) */
-    canExecute = computed(() => {
-        const item = this.selectedItem();
-        if (!item)
+    currentParamIndex = computed(() => {
+        const action = this.lockedAction();
+        if (!action || !action.params)
+            return null;
+        const filled = this.paramValues().length;
+        if (filled >= action.params.length)
+            return null;
+        return filled;
+    }, ...(ngDevMode ? [{ debugName: "currentParamIndex" }] : []));
+    currentParamName = computed(() => {
+        const action = this.lockedAction();
+        const idx = this.currentParamIndex();
+        if (!action || idx === null || !action.params)
+            return null;
+        return action.params[idx] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "currentParamName" }] : []));
+    hasAutocomplete = computed(() => {
+        const action = this.lockedAction();
+        const paramName = this.currentParamName();
+        if (!action || !paramName)
             return false;
-        if (!item.params || item.params.length === 0)
-            return true;
-        return this.argsArray().length >= item.params.length;
-    }, ...(ngDevMode ? [{ debugName: "canExecute" }] : []));
-    /** Get color class for a parameter index */
-    getParamColor(index) {
-        return PARAM_COLORS[index % PARAM_COLORS.length];
-    }
+        return computeHasAutocomplete(action, paramName);
+    }, ...(ngDevMode ? [{ debugName: "hasAutocomplete" }] : []));
+    currentState = computed(() => {
+        return computeInputState({
+            isOpen: this.service.isOpen(),
+            hasLockedAction: this.lockedAction() !== null,
+        });
+    }, ...(ngDevMode ? [{ debugName: "currentState" }] : []));
     filteredItems = computed(() => {
-        const searchTerm = this.searchTerm().toLowerCase().trim();
+        const searchTerm = this.query().toLowerCase().trim();
         const items = this.service.items();
         const maxResults = this.service.config().maxResults ?? 10;
         if (!searchTerm) {
-            // No query: sort by frecency scores from empty searches
             const scores = this.frecency.getScores('');
-            return this.sortByFrecency(items, scores).slice(0, maxResults);
+            return sortByFrecency(items, scores).slice(0, maxResults);
         }
-        // Filter matching items using only search term (not args)
-        const matched = items.filter((item) => this.matchesQuery(item, searchTerm));
-        // Sort by frecency for this search term
+        const matched = filterItems(items, searchTerm, this.queryParser());
         const scores = this.frecency.getScores(searchTerm);
-        return this.sortByFrecency(matched, scores).slice(0, maxResults);
+        return sortByFrecency(matched, scores).slice(0, maxResults);
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    // Display items: actions in ActionSelection, suggestions in ParameterInput
+    displayItems = computed(() => {
+        const state = this.currentState();
+        if (state === InputState.ParameterInput) {
+            // In parameter mode, show autocomplete suggestions as items
+            return this.autocompleteSuggestions().map((opt) => ({
+                id: `suggestion-${opt.value}`,
+                label: opt.label,
+                description: opt.value !== opt.label ? opt.value : undefined,
+                category: 'command',
+                action: () => { }, // Handled via selectSuggestion action
+            }));
+        }
+        // Action selection: static items + dynamic provider results
+        const staticItems = this.filteredItems();
+        const dynamic = [];
+        for (const items of this.providerResults().values()) {
+            dynamic.push(...items);
+        }
+        return [...staticItems, ...dynamic];
+    }, ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
+    // Template helper
+    getParamColor = getParamColor;
     constructor(service, frecency, platformId) {
         this.service = service;
         this.frecency = frecency;
         this.isBrowser = isPlatformBrowser(platformId);
+        // Focus effect
         effect(() => {
             if (this.service.isOpen() && this.isBrowser) {
                 setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
             }
         });
+        // Frecency auto-select effect (only in ActionSelection mode)
         effect(() => {
+            const state = this.currentState();
+            if (state !== InputState.ActionSelection)
+                return;
             const items = this.filteredItems();
-            const searchTerm = this.searchTerm();
-            // Check for auto-select based on frecency
-            if (searchTerm && items.length > 0) {
-                const topMatch = this.frecency.getTopMatch(searchTerm);
+            const query = this.query();
+            if (query && items.length > 0) {
+                const topMatch = this.frecency.getTopMatch(query);
                 if (topMatch) {
                     const idx = items.findIndex((item) => item.id === topMatch);
                     if (idx !== -1) {
@@ -550,60 +1248,216 @@ class GigamenuComponent {
             }
             this.selectedIndex.set(0);
         });
+        // Dynamic provider effect (only in ActionSelection mode)
+        effect(() => {
+            const state = this.currentState();
+            const providers = this.service.providers();
+            const query = this.query();
+            if (state !== InputState.ActionSelection) {
+                this.clearProviderResults();
+                return;
+            }
+            // Cancel timers for providers that no longer exist
+            for (const id of this.providerTimers.keys()) {
+                if (!providers.has(id)) {
+                    clearTimeout(this.providerTimers.get(id));
+                    this.providerTimers.delete(id);
+                }
+            }
+            // Drop results from removed providers
+            const currentResults = this.providerResults();
+            if (currentResults.size > 0) {
+                let changed = false;
+                const next = new Map(currentResults);
+                for (const id of next.keys()) {
+                    if (!providers.has(id)) {
+                        next.delete(id);
+                        changed = true;
+                    }
+                }
+                if (changed)
+                    this.providerResults.set(next);
+            }
+            // Schedule each provider
+            providers.forEach((registered, id) => {
+                const trimmed = query.trim();
+                if (trimmed.length < registered.options.minQueryLength) {
+                    // Clear any previous results for this provider when below threshold
+                    if (this.providerResults().has(id)) {
+                        this.providerResults.update((map) => {
+                            const next = new Map(map);
+                            next.delete(id);
+                            return next;
+                        });
+                    }
+                    const existing = this.providerTimers.get(id);
+                    if (existing) {
+                        clearTimeout(existing);
+                        this.providerTimers.delete(id);
+                    }
+                    return;
+                }
+                const existing = this.providerTimers.get(id);
+                if (existing)
+                    clearTimeout(existing);
+                const generation = (this.providerGeneration.get(id) ?? 0) + 1;
+                this.providerGeneration.set(id, generation);
+                const timer = setTimeout(async () => {
+                    this.providerTimers.delete(id);
+                    try {
+                        const raw = await registered.provider(trimmed);
+                        if (this.providerGeneration.get(id) !== generation)
+                            return;
+                        const items = this.normalizeProviderItems(raw, id, registered.options.group);
+                        this.providerResults.update((map) => {
+                            const next = new Map(map);
+                            next.set(id, items);
+                            return next;
+                        });
+                    }
+                    catch (err) {
+                        console.error(`gigamenu provider "${id}" failed:`, err);
+                    }
+                }, registered.options.debounceMs);
+                this.providerTimers.set(id, timer);
+            });
+        });
+        // Autocomplete effect (only in ParameterInput mode)
+        effect(() => {
+            const action = this.lockedAction();
+            const paramIndex = this.currentParamIndex();
+            const paramName = this.currentParamName();
+            const paramValue = this.query(); // In ParameterInput, query is the param value
+            if (!action || paramIndex === null || !paramName) {
+                this.autocompleteSuggestions.set([]);
+                return;
+            }
+            const provider = action.paramProviders?.[paramName];
+            if (!provider) {
+                this.autocompleteSuggestions.set([]);
+                return;
+            }
+            this.fetchSuggestions(provider, paramValue);
+        });
     }
     onGlobalKeydown(event) {
         if (!this.isBrowser)
             return;
-        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        const action = handleGlobalKeydown(event, {
+            isOpen: this.service.isOpen(),
+            isInputFocused: isInputFocused(),
+        });
+        if (action) {
             event.preventDefault();
-            this.service.toggle();
-            return;
+            this.dispatchAction(action);
         }
-        if (event.key === '/' && !this.isInputFocused()) {
+    }
+    onInputKeydown(event) {
+        const state = this.currentState();
+        // Handle zsh-like shortcuts first
+        const newQuery = handleZshShortcuts(event, this.query());
+        if (newQuery !== null) {
             event.preventDefault();
-            this.service.open();
+            this.query.set(newQuery);
             return;
         }
-        if (event.key === 'Escape' && this.service.isOpen()) {
+        // Get actions from state-specific handler
+        const actions = this.getActionsForState(state, event);
+        if (hasActions(actions)) {
             event.preventDefault();
-            this.close();
+            actions.forEach((action) => this.dispatchAction(action));
         }
     }
-    onInputKeydown(event) {
-        const items = this.filteredItems();
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this.selectedIndex.update((i) => Math.min(i + 1, items.length - 1));
-                this.scrollSelectedIntoView();
+    getActionsForState(state, event) {
+        switch (state) {
+            case InputState.ActionSelection: {
+                const ctx = {
+                    items: this.displayItems(),
+                    selectedIndex: this.selectedIndex(),
+                    selectedItem: this.selectedItem(),
+                };
+                return handleActionSelectionKeydown(event, ctx);
+            }
+            case InputState.ParameterInput: {
+                const action = this.lockedAction();
+                if (!action)
+                    return [];
+                const ctx = {
+                    lockedItem: action,
+                    currentParamIndex: this.currentParamIndex() ?? 0,
+                    paramValues: this.paramValues(),
+                    query: this.query(),
+                    suggestions: this.autocompleteSuggestions(),
+                    selectedSuggestionIndex: this.selectedIndex(),
+                };
+                return handleParameterInputKeydown(event, ctx);
+            }
+            default:
+                return [];
+        }
+    }
+    dispatchAction(action) {
+        switch (action.type) {
+            case 'setSelectedIndex':
+                this.selectedIndex.set(action.value);
                 break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.selectedIndex.update((i) => Math.max(i - 1, 0));
-                this.scrollSelectedIntoView();
+            case 'setQuery':
+                this.query.set(action.value);
                 break;
-            case 'Enter':
-                event.preventDefault();
-                if (this.canExecute()) {
-                    const selected = items[this.selectedIndex()];
-                    if (selected) {
-                        this.executeItem(selected);
-                    }
+            case 'executeAction':
+                // Execute an action directly (no params)
+                this.executeItemWithArgs(action.item, []);
+                break;
+            case 'executeLockedAction':
+                // Build args from current state (includes any changes from selectSuggestion)
+                const lockedItem = this.lockedAction();
+                if (lockedItem) {
+                    const args = this.buildArgsWithValues();
+                    this.executeItemWithArgs(lockedItem, args);
                 }
                 break;
-            case 'Escape':
-                event.preventDefault();
+            case 'close':
                 this.close();
                 break;
-        }
-    }
-    scrollSelectedIntoView() {
-        const container = this.listContainer()?.nativeElement;
-        if (!container)
-            return;
-        const selectedButton = container.querySelector(`[data-index="${this.selectedIndex()}"]`);
-        if (selectedButton) {
-            selectedButton.scrollIntoView({ block: 'nearest' });
+            case 'toggle':
+                this.service.toggle();
+                break;
+            case 'open':
+                this.service.open();
+                break;
+            case 'scrollIntoView':
+                scrollSelectedIntoView(this.listContainer()?.nativeElement ?? null, this.selectedIndex());
+                break;
+            case 'lockAction':
+                this.lockedAction.set(action.item);
+                this.query.set('');
+                this.selectedIndex.set(0);
+                break;
+            case 'unlockAction':
+                this.lockedAction.set(null);
+                this.paramValues.set([]);
+                this.query.set('');
+                this.selectedIndex.set(0);
+                break;
+            case 'nextParameter':
+                // Push current query value to paramValues, clear query
+                this.paramValues.update((values) => [...values, this.query()]);
+                this.query.set('');
+                this.selectedIndex.set(0);
+                break;
+            case 'previousParameter':
+                // Pop last param value back to query
+                const values = this.paramValues();
+                if (values.length > 0) {
+                    const lastValue = values[values.length - 1];
+                    this.paramValues.update((v) => v.slice(0, -1));
+                    this.query.set(lastValue);
+                    this.selectedIndex.set(0);
+                }
+                break;
+            case 'selectSuggestion':
+                this.selectSuggestion(action.option);
+                break;
         }
     }
     onQueryChange(event) {
@@ -615,101 +1469,192 @@ class GigamenuComponent {
             this.close();
         }
     }
-    executeItem(item) {
-        // Record the selection for frecency learning (use search term, not full query)
-        const searchTerm = this.searchTerm();
-        this.frecency.recordSelection(searchTerm, item.id);
-        // Get args before closing (which resets query)
-        const args = this.args() || undefined;
+    onItemClick(item, index) {
+        // Only proceed if this is the selected item
+        if (this.selectedIndex() !== index) {
+            this.selectedIndex.set(index);
+            return;
+        }
+        const state = this.currentState();
+        if (state === InputState.ParameterInput) {
+            // In parameter mode, clicking selects the suggestion
+            const suggestions = this.autocompleteSuggestions();
+            const option = suggestions[index];
+            if (option) {
+                this.selectSuggestion(option);
+            }
+        }
+        else {
+            // In action selection mode, trigger the action selection
+            const actions = handleActionSelectionKeydown(new KeyboardEvent('keydown', { key: 'Enter' }), {
+                items: this.displayItems(),
+                selectedIndex: index,
+                selectedItem: item,
+            });
+            actions.forEach((action) => this.dispatchAction(action));
+        }
+    }
+    executeItemWithArgs(item, args) {
+        // Record frecency for the action
+        this.frecency.recordSelection(this.query(), item.id);
+        // Build args string from array
+        const argsStr = args.length > 0 ? args.join(' ') : undefined;
         this.close();
-        item.action(args);
+        item.action(argsStr);
+    }
+    selectSuggestion(option) {
+        // Set the query to the selected option's label (for display)
+        this.query.set(option.label);
+        // Track the selected option for value substitution when executing
+        const paramIndex = this.currentParamIndex();
+        if (paramIndex !== null) {
+            this.selectedParamOptions.update((map) => {
+                const newMap = new Map(map);
+                newMap.set(paramIndex, option);
+                return newMap;
+            });
+        }
     }
-    // Template context getters
+    /**
+     * Build args array using values from selectedParamOptions when available.
+     * For each param, if a suggestion was selected, use its value; otherwise use the typed text.
+     */
+    buildArgsWithValues() {
+        const paramValues = this.paramValues();
+        const currentQuery = this.query();
+        const selectedOptions = this.selectedParamOptions();
+        const args = [];
+        // Add completed param values (use selected option's value if available)
+        for (let i = 0; i < paramValues.length; i++) {
+            const selectedOption = selectedOptions.get(i);
+            if (selectedOption) {
+                args.push(selectedOption.value);
+            }
+            else {
+                args.push(paramValues[i]);
+            }
+        }
+        // Add current param value (use selected option's value if available)
+        if (currentQuery) {
+            const currentParamIdx = this.currentParamIndex();
+            if (currentParamIdx !== null) {
+                const selectedOption = selectedOptions.get(currentParamIdx);
+                if (selectedOption) {
+                    args.push(selectedOption.value);
+                }
+                else {
+                    args.push(currentQuery);
+                }
+            }
+            else {
+                args.push(currentQuery);
+            }
+        }
+        return args.filter(Boolean);
+    }
+    // Template context methods
     getItemContext(item, index) {
-        return {
-            $implicit: item,
-            index,
-            selected: this.selectedIndex() === index,
-        };
+        return createItemContext(item, index, this.selectedIndex());
     }
     getEmptyContext() {
-        return {
-            $implicit: this.query(),
-        };
+        return createEmptyContext(this.query());
+    }
+    getFooterContext() {
+        return createFooterContext(this.displayItems().length, this.service.items().length);
     }
     getHeaderContext() {
         return {
             $implicit: this.query(),
-            searchTerm: this.searchTerm(),
-            args: this.args(),
-            hasSeparator: this.hasSeparator(),
+            query: this.query(),
+            lockedAction: this.lockedAction(),
+            paramValues: this.paramValues(),
+            currentParamName: this.currentParamName(),
+            placeholder: this.service.config().placeholder ?? '',
             onQueryChange: (value) => this.query.set(value),
             onKeydown: (event) => this.onInputKeydown(event),
-            placeholder: this.service.config().placeholder ?? '',
-        };
-    }
-    getFooterContext() {
-        return {
-            $implicit: this.filteredItems().length,
-            total: this.service.items().length,
+            onUnlockAction: () => this.unlockActionFromUI(),
+            onGoToParam: (index) => this.goToParam(index),
         };
     }
     getPanelContext() {
         return {
-            $implicit: this.filteredItems(),
+            $implicit: this.displayItems(),
+            items: this.displayItems(),
             query: this.query(),
-            searchTerm: this.searchTerm(),
-            args: this.args(),
-            hasSeparator: this.hasSeparator(),
+            lockedAction: this.lockedAction(),
+            paramValues: this.paramValues(),
             selectedIndex: this.selectedIndex(),
-            executeItem: (item) => this.executeItem(item),
-            setSelectedIndex: (index) => this.selectedIndex.set(index),
-            setQuery: (query) => this.query.set(query),
-            close: () => this.close(),
             placeholder: this.service.config().placeholder ?? '',
+            onItemClick: (item, index) => this.onItemClick(item, index),
+            onSelectIndex: (index) => this.selectedIndex.set(index),
+            onQueryChange: (query) => this.query.set(query),
+            onClose: () => this.close(),
         };
     }
+    // Autocomplete methods
+    async fetchSuggestions(provider, query) {
+        try {
+            const { options, isAsync } = await fetchAutocompleteSuggestions(provider, query, this.autocompleteCache);
+            const filtered = isAsync ? options : filterSuggestionsClientSide(options, query);
+            this.autocompleteSuggestions.set(filtered);
+            this.selectedIndex.set(0);
+        }
+        catch (error) {
+            console.error('Error fetching autocomplete suggestions:', error);
+            this.autocompleteSuggestions.set([]);
+        }
+    }
     close() {
         this.service.close();
         this.query.set('');
         this.selectedIndex.set(0);
+        this.lockedAction.set(null);
+        this.paramValues.set([]);
+        this.autocompleteCache.clear();
+        this.selectedParamOptions.set(new Map());
+        this.clearProviderResults();
     }
-    sortByFrecency(items, scores) {
-        if (scores.size === 0)
-            return items;
-        return [...items].sort((a, b) => {
-            const scoreA = scores.get(a.id) ?? 0;
-            const scoreB = scores.get(b.id) ?? 0;
-            return scoreB - scoreA;
-        });
+    clearProviderResults() {
+        for (const timer of this.providerTimers.values())
+            clearTimeout(timer);
+        this.providerTimers.clear();
+        // Bump all generations to invalidate any in-flight responses
+        for (const id of this.providerGeneration.keys()) {
+            this.providerGeneration.set(id, (this.providerGeneration.get(id) ?? 0) + 1);
+        }
+        if (this.providerResults().size > 0) {
+            this.providerResults.set(new Map());
+        }
     }
-    matchesQuery(item, query) {
-        const searchableText = [
-            item.label,
-            item.description,
-            ...(item.keywords ?? []),
-        ]
-            .filter(Boolean)
-            .join(' ')
-            .toLowerCase();
-        const words = query.split(/\s+/);
-        return words.every((word) => searchableText.includes(word));
-    }
-    isInputFocused() {
-        const activeElement = document.activeElement;
-        if (!activeElement)
-            return false;
-        const tagName = activeElement.tagName.toLowerCase();
-        return (tagName === 'input' ||
-            tagName === 'textarea' ||
-            activeElement.isContentEditable);
+    normalizeProviderItems(raw, providerId, group) {
+        return raw.map((item) => ({
+            ...item,
+            category: item.category ?? 'command',
+            providerId,
+            group: item.group ?? (group || undefined),
+        }));
+    }
+    // Template helper for going back from breadcrumb
+    unlockActionFromUI() {
+        this.dispatchAction({ type: 'unlockAction' });
+    }
+    goToParam(index) {
+        // Go back to a specific parameter
+        const values = this.paramValues();
+        if (index < values.length) {
+            // Set query to the value at that index
+            this.query.set(values[index]);
+            // Keep only values before that index
+            this.paramValues.set(values.slice(0, index));
+            this.selectedIndex.set(0);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuComponent, deps: [{ token: GigamenuService }, { token: FrecencyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GigamenuComponent, isStandalone: true, selector: "gm-gigamenu", host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: GigamenuItemTemplate, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: GigamenuEmptyTemplate, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: GigamenuHeaderTemplate, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: GigamenuFooterTemplate, descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: GigamenuPanelTemplate, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (service.isOpen()) {\n<div\n  class=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div class=\"fixed inset-0 bg-black/50 backdrop-blur-sm\"></div>\n\n  <!-- Custom panel template -->\n  @if (panelTemplate(); as pt) {\n    <ng-container\n      [ngTemplateOutlet]=\"pt.template\"\n      [ngTemplateOutletContext]=\"getPanelContext()\"\n    ></ng-container>\n  } @else {\n  <!-- Default panel -->\n  <div\n    class=\"relative z-10 w-full max-w-xl overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command menu\"\n  >\n    <!-- Header -->\n    @if (headerTemplate(); as ht) {\n      <ng-container\n        [ngTemplateOutlet]=\"ht.template\"\n        [ngTemplateOutletContext]=\"getHeaderContext()\"\n      ></ng-container>\n    } @else {\n    <div class=\"flex items-center border-b border-neutral-200 px-4 dark:border-neutral-700\">\n      <svg\n        class=\"h-5 w-5 text-neutral-400\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n        />\n      </svg>\n      <div class=\"relative flex-1\">\n        <!-- Styled overlay for syntax highlighting -->\n        <div\n          class=\"pointer-events-none absolute inset-0 flex items-center px-3 py-4 text-base\"\n          aria-hidden=\"true\"\n        >\n          <span class=\"text-neutral-900 dark:text-neutral-100\">{{ searchTerm() }}</span>@for (arg of argsArray(); track $index) {<span class=\"whitespace-pre text-neutral-900 dark:text-neutral-100\">{{ service.config().argSeparator }}</span><span [class]=\"getParamColor($index)\">{{ arg }}</span>}@if (hasSeparator() && args().endsWith(' ')) {<span class=\"whitespace-pre text-neutral-900 dark:text-neutral-100\">{{ service.config().argSeparator }}</span>}\n        </div>\n        <!-- Transparent input on top -->\n        <input\n          #searchInput\n          type=\"text\"\n          [placeholder]=\"service.config().placeholder\"\n          [value]=\"query()\"\n          (input)=\"onQueryChange($event)\"\n          (keydown)=\"onInputKeydown($event)\"\n          class=\"relative z-10 w-full bg-transparent px-3 py-4 text-base text-transparent caret-neutral-900 placeholder-neutral-400 outline-none dark:caret-neutral-100\"\n        />\n      </div>\n      <kbd\n        class=\"rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400\"\n      >\n        ESC\n      </kbd>\n    </div>\n    }\n\n    <!-- Items list -->\n    <div #listContainer class=\"max-h-80 overflow-y-auto p-2\">\n      @if (filteredItems().length === 0) {\n        <!-- Empty state -->\n        @if (emptyTemplate(); as et) {\n          <ng-container\n            [ngTemplateOutlet]=\"et.template\"\n            [ngTemplateOutletContext]=\"getEmptyContext()\"\n          ></ng-container>\n        } @else {\n        <div class=\"px-3 py-8 text-center text-neutral-500\">\n          No results found\n        </div>\n        }\n      } @else {\n        @for (item of filteredItems(); track item.id; let i = $index) {\n          <!-- Custom item template -->\n          @if (itemTemplate(); as it) {\n            <ng-container\n              [ngTemplateOutlet]=\"it.template\"\n              [ngTemplateOutletContext]=\"getItemContext(item, i)\"\n            ></ng-container>\n          } @else {\n          <!-- Default item -->\n          <button\n            type=\"button\"\n            (click)=\"selectedIndex() === i && canExecute() && executeItem(item)\"\n            (mouseenter)=\"selectedIndex.set(i)\"\n            [attr.data-index]=\"i\"\n            [class]=\"\n            'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +\n            (selectedIndex() === i\n            ? (canExecute() ? 'bg-neutral-100 dark:bg-neutral-800' : 'bg-red-50 dark:bg-red-900/20 ring-1 ring-red-200 dark:ring-red-800')\n            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')\n            \"\n          >\n            @if (item.iconClass) {\n            <i [class]=\"item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'\"></i>\n            } @else if (item.icon) {\n            <span class=\"text-lg\">{{ item.icon }}</span>\n            } @else {\n            <span\n              class=\"flex h-6 w-6 items-center justify-center rounded bg-neutral-200 text-xs font-medium text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300\"\n            >\n              {{ item.category === 'page' ? 'P' : 'C' }}\n            </span>\n            }\n            <div class=\"flex-1 min-w-0\">\n              <div class=\"truncate font-medium text-neutral-900 dark:text-neutral-100\">\n                {{ item.label }}@if (item.params) { @for (param of item.params; track $index) {<span class=\"whitespace-pre\"> </span><span [class]=\"getParamColor($index)\">&lt;{{ param }}&gt;</span>}}\n              </div>\n              @if (item.description) {\n              <div class=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n                {{ item.description }}\n              </div>\n              }\n            </div>\n            <span\n              class=\"rounded-full px-2 py-0.5 text-xs\"\n              [class]=\"\n              item.category === 'page'\n              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n              : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'\n              \"\n            >\n              {{ item.category }}\n            </span>\n          </button>\n          }\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    @if (footerTemplate(); as ft) {\n      <ng-container\n        [ngTemplateOutlet]=\"ft.template\"\n        [ngTemplateOutletContext]=\"getFooterContext()\"\n      ></ng-container>\n    } @else {\n    <div\n      class=\"flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2191</kbd>\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2193</kbd>\n          navigate\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u21B5</kbd>\n          select\n        </span>\n      </div>\n      <span>gigamenu</span>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GigamenuComponent, isStandalone: true, selector: "gm-gigamenu", host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: GigamenuItemTemplate, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: GigamenuEmptyTemplate, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: GigamenuHeaderTemplate, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: GigamenuFooterTemplate, descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: GigamenuPanelTemplate, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (service.isOpen()) {\n<div\n  class=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div class=\"fixed inset-0 bg-black/50 backdrop-blur-sm\"></div>\n\n  <!-- Custom panel template -->\n  @if (panelTemplate(); as pt) {\n  <ng-container\n    [ngTemplateOutlet]=\"pt.template\"\n    [ngTemplateOutletContext]=\"getPanelContext()\"\n  ></ng-container>\n  } @else {\n  <!-- Default panel -->\n  <div\n    class=\"relative z-10 w-full max-w-xl min-h-50 overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command menu\"\n  >\n    <!-- Header -->\n    @if (headerTemplate(); as ht) {\n    <ng-container\n      [ngTemplateOutlet]=\"ht.template\"\n      [ngTemplateOutletContext]=\"getHeaderContext()\"\n    ></ng-container>\n    } @else {\n    <div class=\"border-b border-neutral-200 dark:border-neutral-700\">\n      <!-- Breadcrumb (when action is locked) -->\n      @if (lockedAction(); as action) {\n      <div class=\"flex flex-wrap items-center gap-1 px-4 py-2 text-sm\">\n        <button\n          type=\"button\"\n          (click)=\"unlockActionFromUI()\"\n          class=\"inline-flex items-center gap-1.5 rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-800 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/60\"\n        >\n          @if (action.icon) {\n          <span>{{ action.icon }}</span>\n          }\n          {{ action.label }}\n        </button>\n        @for (value of paramValues(); track $index) {\n        <span class=\"text-neutral-400\">\u203A</span>\n        <button\n          type=\"button\"\n          (click)=\"goToParam($index)\"\n          [class]=\"'rounded-md px-2 py-1 font-medium hover:opacity-80 ' + getParamColor($index)\"\n        >\n          <span class=\"text-xs opacity-60\">{{ action.params?.[$index] }}:</span>\n          {{ value }}\n        </button>\n        }\n        @if (currentParamName(); as paramName) {\n        <span class=\"text-neutral-400\">\u203A</span>\n        <span class=\"text-neutral-500 dark:text-neutral-400 italic\">{{ paramName }}:</span>\n        }\n      </div>\n      }\n\n      <!-- Search input row -->\n      <div class=\"flex items-center px-4\">\n        <svg\n          class=\"h-5 w-5 text-neutral-400\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n          />\n        </svg>\n        <input\n          #searchInput\n          type=\"text\"\n          [placeholder]=\"lockedAction() ? (currentParamName() ?? 'Enter value...') : service.config().placeholder\"\n          [value]=\"query()\"\n          (input)=\"onQueryChange($event)\"\n          (keydown)=\"onInputKeydown($event)\"\n          class=\"w-full px-3 py-4 text-base text-neutral-900 placeholder-neutral-400 outline-none dark:text-neutral-100 bg-transparent\"\n        />\n        <kbd\n          class=\"rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400\"\n        >\n          ESC\n        </kbd>\n      </div>\n    </div>\n    }\n\n    <!-- Items list -->\n    <div #listContainer class=\"max-h-80 overflow-y-auto p-2\">\n      @if (displayItems().length === 0) {\n      <!-- Empty state -->\n      @if (emptyTemplate(); as et) {\n      <ng-container\n        [ngTemplateOutlet]=\"et.template\"\n        [ngTemplateOutletContext]=\"getEmptyContext()\"\n      ></ng-container>\n      } @else {\n      <div class=\"px-3 py-8 text-center text-neutral-500\">\n        @if (lockedAction()) {\n        @if (hasAutocomplete()) {\n        Type to search...\n        } @else {\n        Enter a value and press Tab or Enter\n        }\n        } @else {\n        No results found\n        }\n      </div>\n      }\n      } @else {\n      @for (item of displayItems(); track item.id; let i = $index) {\n      <!-- Custom item template -->\n      @if (itemTemplate(); as it) {\n      <ng-container\n        [ngTemplateOutlet]=\"it.template\"\n        [ngTemplateOutletContext]=\"getItemContext(item, i)\"\n      ></ng-container>\n      } @else {\n      <!-- Default item -->\n      <button\n        type=\"button\"\n        (click)=\"onItemClick(item, i)\"\n        (mouseenter)=\"selectedIndex.set(i)\"\n        [attr.data-index]=\"i\"\n        [class]=\"\n        'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +\n        (selectedIndex() === i\n        ? 'bg-neutral-100 dark:bg-neutral-800'\n        : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')\n        \"\n      >\n        @if (!lockedAction()) {\n        <!-- Action mode: show icon -->\n        @if (item.iconClass) {\n        <i [class]=\"item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'\"></i>\n        } @else if (item.icon) {\n        <span class=\"text-lg\">{{ item.icon }}</span>\n        } @else {\n        <span\n          class=\"flex h-6 w-6 items-center justify-center rounded bg-neutral-200 text-xs font-medium text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300\"\n        >\n          {{ item.category === 'page' ? 'P' : 'C' }}\n        </span>\n        }\n        }\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"truncate font-medium text-neutral-900 dark:text-neutral-100\">\n            {{ item.label }}@if (!lockedAction() && item.params) { @for (param of item.params; track $index) {<span class=\"whitespace-pre\"> </span><span [class]=\"getParamColor($index)\">&lt;{{ param }}&gt;</span>}@if (item.paramProviders) {<span class=\"ml-2 inline-flex items-center rounded border border-neutral-300 bg-neutral-100 px-1 py-0.5 text-[10px] font-normal text-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-400\">Tab</span>}}\n          </div>\n          @if (item.description) {\n          <div class=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n            {{ item.description }}\n          </div>\n          }\n        </div>\n        @if (!lockedAction()) {\n        <span\n          class=\"rounded-full px-2 py-0.5 text-xs\"\n          [class]=\"\n          item.category === 'page'\n          ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n          : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'\n          \"\n        >\n          {{ item.category }}\n        </span>\n        }\n      </button>\n      }\n      }\n      }\n    </div>\n\n    <!-- Footer -->\n    @if (footerTemplate(); as ft) {\n    <ng-container\n      [ngTemplateOutlet]=\"ft.template\"\n      [ngTemplateOutletContext]=\"getFooterContext()\"\n    ></ng-container>\n    } @else {\n    <div\n      class=\"flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2191</kbd>\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2193</kbd>\n          navigate\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">Tab</kbd>\n          @if (lockedAction()) {\n          next\n          } @else {\n          params\n          }\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u21B5</kbd>\n          @if (lockedAction()) {\n          execute\n          } @else {\n          select\n          }\n        </span>\n      </div>\n      <span>gigamenu</span>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gm-gigamenu', standalone: true, imports: [NgTemplateOutlet], template: "@if (service.isOpen()) {\n<div\n  class=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div class=\"fixed inset-0 bg-black/50 backdrop-blur-sm\"></div>\n\n  <!-- Custom panel template -->\n  @if (panelTemplate(); as pt) {\n    <ng-container\n      [ngTemplateOutlet]=\"pt.template\"\n      [ngTemplateOutletContext]=\"getPanelContext()\"\n    ></ng-container>\n  } @else {\n  <!-- Default panel -->\n  <div\n    class=\"relative z-10 w-full max-w-xl overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command menu\"\n  >\n    <!-- Header -->\n    @if (headerTemplate(); as ht) {\n      <ng-container\n        [ngTemplateOutlet]=\"ht.template\"\n        [ngTemplateOutletContext]=\"getHeaderContext()\"\n      ></ng-container>\n    } @else {\n    <div class=\"flex items-center border-b border-neutral-200 px-4 dark:border-neutral-700\">\n      <svg\n        class=\"h-5 w-5 text-neutral-400\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n        />\n      </svg>\n      <div class=\"relative flex-1\">\n        <!-- Styled overlay for syntax highlighting -->\n        <div\n          class=\"pointer-events-none absolute inset-0 flex items-center px-3 py-4 text-base\"\n          aria-hidden=\"true\"\n        >\n          <span class=\"text-neutral-900 dark:text-neutral-100\">{{ searchTerm() }}</span>@for (arg of argsArray(); track $index) {<span class=\"whitespace-pre text-neutral-900 dark:text-neutral-100\">{{ service.config().argSeparator }}</span><span [class]=\"getParamColor($index)\">{{ arg }}</span>}@if (hasSeparator() && args().endsWith(' ')) {<span class=\"whitespace-pre text-neutral-900 dark:text-neutral-100\">{{ service.config().argSeparator }}</span>}\n        </div>\n        <!-- Transparent input on top -->\n        <input\n          #searchInput\n          type=\"text\"\n          [placeholder]=\"service.config().placeholder\"\n          [value]=\"query()\"\n          (input)=\"onQueryChange($event)\"\n          (keydown)=\"onInputKeydown($event)\"\n          class=\"relative z-10 w-full bg-transparent px-3 py-4 text-base text-transparent caret-neutral-900 placeholder-neutral-400 outline-none dark:caret-neutral-100\"\n        />\n      </div>\n      <kbd\n        class=\"rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400\"\n      >\n        ESC\n      </kbd>\n    </div>\n    }\n\n    <!-- Items list -->\n    <div #listContainer class=\"max-h-80 overflow-y-auto p-2\">\n      @if (filteredItems().length === 0) {\n        <!-- Empty state -->\n        @if (emptyTemplate(); as et) {\n          <ng-container\n            [ngTemplateOutlet]=\"et.template\"\n            [ngTemplateOutletContext]=\"getEmptyContext()\"\n          ></ng-container>\n        } @else {\n        <div class=\"px-3 py-8 text-center text-neutral-500\">\n          No results found\n        </div>\n        }\n      } @else {\n        @for (item of filteredItems(); track item.id; let i = $index) {\n          <!-- Custom item template -->\n          @if (itemTemplate(); as it) {\n            <ng-container\n              [ngTemplateOutlet]=\"it.template\"\n              [ngTemplateOutletContext]=\"getItemContext(item, i)\"\n            ></ng-container>\n          } @else {\n          <!-- Default item -->\n          <button\n            type=\"button\"\n            (click)=\"selectedIndex() === i && canExecute() && executeItem(item)\"\n            (mouseenter)=\"selectedIndex.set(i)\"\n            [attr.data-index]=\"i\"\n            [class]=\"\n            'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +\n            (selectedIndex() === i\n            ? (canExecute() ? 'bg-neutral-100 dark:bg-neutral-800' : 'bg-red-50 dark:bg-red-900/20 ring-1 ring-red-200 dark:ring-red-800')\n            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')\n            \"\n          >\n            @if (item.iconClass) {\n            <i [class]=\"item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'\"></i>\n            } @else if (item.icon) {\n            <span class=\"text-lg\">{{ item.icon }}</span>\n            } @else {\n            <span\n              class=\"flex h-6 w-6 items-center justify-center rounded bg-neutral-200 text-xs font-medium text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300\"\n            >\n              {{ item.category === 'page' ? 'P' : 'C' }}\n            </span>\n            }\n            <div class=\"flex-1 min-w-0\">\n              <div class=\"truncate font-medium text-neutral-900 dark:text-neutral-100\">\n                {{ item.label }}@if (item.params) { @for (param of item.params; track $index) {<span class=\"whitespace-pre\"> </span><span [class]=\"getParamColor($index)\">&lt;{{ param }}&gt;</span>}}\n              </div>\n              @if (item.description) {\n              <div class=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n                {{ item.description }}\n              </div>\n              }\n            </div>\n            <span\n              class=\"rounded-full px-2 py-0.5 text-xs\"\n              [class]=\"\n              item.category === 'page'\n              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n              : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'\n              \"\n            >\n              {{ item.category }}\n            </span>\n          </button>\n          }\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    @if (footerTemplate(); as ft) {\n      <ng-container\n        [ngTemplateOutlet]=\"ft.template\"\n        [ngTemplateOutletContext]=\"getFooterContext()\"\n      ></ng-container>\n    } @else {\n    <div\n      class=\"flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2191</kbd>\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2193</kbd>\n          navigate\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u21B5</kbd>\n          select\n        </span>\n      </div>\n      <span>gigamenu</span>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'gm-gigamenu', standalone: true, imports: [NgTemplateOutlet], template: "@if (service.isOpen()) {\n<div\n  class=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div class=\"fixed inset-0 bg-black/50 backdrop-blur-sm\"></div>\n\n  <!-- Custom panel template -->\n  @if (panelTemplate(); as pt) {\n  <ng-container\n    [ngTemplateOutlet]=\"pt.template\"\n    [ngTemplateOutletContext]=\"getPanelContext()\"\n  ></ng-container>\n  } @else {\n  <!-- Default panel -->\n  <div\n    class=\"relative z-10 w-full max-w-xl min-h-50 overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command menu\"\n  >\n    <!-- Header -->\n    @if (headerTemplate(); as ht) {\n    <ng-container\n      [ngTemplateOutlet]=\"ht.template\"\n      [ngTemplateOutletContext]=\"getHeaderContext()\"\n    ></ng-container>\n    } @else {\n    <div class=\"border-b border-neutral-200 dark:border-neutral-700\">\n      <!-- Breadcrumb (when action is locked) -->\n      @if (lockedAction(); as action) {\n      <div class=\"flex flex-wrap items-center gap-1 px-4 py-2 text-sm\">\n        <button\n          type=\"button\"\n          (click)=\"unlockActionFromUI()\"\n          class=\"inline-flex items-center gap-1.5 rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-800 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/60\"\n        >\n          @if (action.icon) {\n          <span>{{ action.icon }}</span>\n          }\n          {{ action.label }}\n        </button>\n        @for (value of paramValues(); track $index) {\n        <span class=\"text-neutral-400\">\u203A</span>\n        <button\n          type=\"button\"\n          (click)=\"goToParam($index)\"\n          [class]=\"'rounded-md px-2 py-1 font-medium hover:opacity-80 ' + getParamColor($index)\"\n        >\n          <span class=\"text-xs opacity-60\">{{ action.params?.[$index] }}:</span>\n          {{ value }}\n        </button>\n        }\n        @if (currentParamName(); as paramName) {\n        <span class=\"text-neutral-400\">\u203A</span>\n        <span class=\"text-neutral-500 dark:text-neutral-400 italic\">{{ paramName }}:</span>\n        }\n      </div>\n      }\n\n      <!-- Search input row -->\n      <div class=\"flex items-center px-4\">\n        <svg\n          class=\"h-5 w-5 text-neutral-400\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n          />\n        </svg>\n        <input\n          #searchInput\n          type=\"text\"\n          [placeholder]=\"lockedAction() ? (currentParamName() ?? 'Enter value...') : service.config().placeholder\"\n          [value]=\"query()\"\n          (input)=\"onQueryChange($event)\"\n          (keydown)=\"onInputKeydown($event)\"\n          class=\"w-full px-3 py-4 text-base text-neutral-900 placeholder-neutral-400 outline-none dark:text-neutral-100 bg-transparent\"\n        />\n        <kbd\n          class=\"rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400\"\n        >\n          ESC\n        </kbd>\n      </div>\n    </div>\n    }\n\n    <!-- Items list -->\n    <div #listContainer class=\"max-h-80 overflow-y-auto p-2\">\n      @if (displayItems().length === 0) {\n      <!-- Empty state -->\n      @if (emptyTemplate(); as et) {\n      <ng-container\n        [ngTemplateOutlet]=\"et.template\"\n        [ngTemplateOutletContext]=\"getEmptyContext()\"\n      ></ng-container>\n      } @else {\n      <div class=\"px-3 py-8 text-center text-neutral-500\">\n        @if (lockedAction()) {\n        @if (hasAutocomplete()) {\n        Type to search...\n        } @else {\n        Enter a value and press Tab or Enter\n        }\n        } @else {\n        No results found\n        }\n      </div>\n      }\n      } @else {\n      @for (item of displayItems(); track item.id; let i = $index) {\n      <!-- Custom item template -->\n      @if (itemTemplate(); as it) {\n      <ng-container\n        [ngTemplateOutlet]=\"it.template\"\n        [ngTemplateOutletContext]=\"getItemContext(item, i)\"\n      ></ng-container>\n      } @else {\n      <!-- Default item -->\n      <button\n        type=\"button\"\n        (click)=\"onItemClick(item, i)\"\n        (mouseenter)=\"selectedIndex.set(i)\"\n        [attr.data-index]=\"i\"\n        [class]=\"\n        'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +\n        (selectedIndex() === i\n        ? 'bg-neutral-100 dark:bg-neutral-800'\n        : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')\n        \"\n      >\n        @if (!lockedAction()) {\n        <!-- Action mode: show icon -->\n        @if (item.iconClass) {\n        <i [class]=\"item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'\"></i>\n        } @else if (item.icon) {\n        <span class=\"text-lg\">{{ item.icon }}</span>\n        } @else {\n        <span\n          class=\"flex h-6 w-6 items-center justify-center rounded bg-neutral-200 text-xs font-medium text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300\"\n        >\n          {{ item.category === 'page' ? 'P' : 'C' }}\n        </span>\n        }\n        }\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"truncate font-medium text-neutral-900 dark:text-neutral-100\">\n            {{ item.label }}@if (!lockedAction() && item.params) { @for (param of item.params; track $index) {<span class=\"whitespace-pre\"> </span><span [class]=\"getParamColor($index)\">&lt;{{ param }}&gt;</span>}@if (item.paramProviders) {<span class=\"ml-2 inline-flex items-center rounded border border-neutral-300 bg-neutral-100 px-1 py-0.5 text-[10px] font-normal text-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-400\">Tab</span>}}\n          </div>\n          @if (item.description) {\n          <div class=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n            {{ item.description }}\n          </div>\n          }\n        </div>\n        @if (!lockedAction()) {\n        <span\n          class=\"rounded-full px-2 py-0.5 text-xs\"\n          [class]=\"\n          item.category === 'page'\n          ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n          : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'\n          \"\n        >\n          {{ item.category }}\n        </span>\n        }\n      </button>\n      }\n      }\n      }\n    </div>\n\n    <!-- Footer -->\n    @if (footerTemplate(); as ft) {\n    <ng-container\n      [ngTemplateOutlet]=\"ft.template\"\n      [ngTemplateOutletContext]=\"getFooterContext()\"\n    ></ng-container>\n    } @else {\n    <div\n      class=\"flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2191</kbd>\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2193</kbd>\n          navigate\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">Tab</kbd>\n          @if (lockedAction()) {\n          next\n          } @else {\n          params\n          }\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u21B5</kbd>\n          @if (lockedAction()) {\n          execute\n          } @else {\n          select\n          }\n        </span>\n      </div>\n      <span>gigamenu</span>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [{ type: GigamenuService }, { type: FrecencyService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]