@flxgde/gigamenu 0.0.1 → 0.0.3

package/src/lib/frecency.service.ts

@@ -1,185 +0,0 @@
-import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-interface FrecencyEntry {
-  itemId: string;
-  count: number;
-  lastUsed: number;
-}
-
-interface FrecencyData {
-  [searchTerm: string]: FrecencyEntry[];
-}
-
-const STORAGE_KEY = 'gigamenu_frecency';
-const GLOBAL_KEY = '__global__';
-const MAX_ENTRIES_PER_TERM = 10;
-const MAX_TERMS = 100;
-const DECAY_FACTOR = 0.9;
-
-@Injectable({ providedIn: 'root' })
-export class FrecencyService {
-  private data: FrecencyData = {};
-  private readonly isBrowser: boolean;
-
-  constructor(@Inject(PLATFORM_ID) platformId: object) {
-    this.isBrowser = isPlatformBrowser(platformId);
-    this.load();
-  }
-
-  /**
-   * Record that an item was selected for a given search term.
-   */
-  recordSelection(searchTerm: string, itemId: string): void {
-    // Always record to global for overall frecency
-    this.recordToKey(GLOBAL_KEY, itemId);
-
-    // Also record to specific search term if provided
-    const normalizedTerm = this.normalizeTerm(searchTerm);
-    if (normalizedTerm) {
-      this.recordToKey(normalizedTerm, itemId);
-    }
-
-    this.pruneAndSave();
-  }
-
-  private recordToKey(key: string, itemId: string): void {
-    if (!this.data[key]) {
-      this.data[key] = [];
-    }
-
-    const entries = this.data[key];
-    const existing = entries.find((e) => e.itemId === itemId);
-
-    if (existing) {
-      existing.count++;
-      existing.lastUsed = Date.now();
-    } else {
-      entries.push({
-        itemId,
-        count: 1,
-        lastUsed: Date.now(),
-      });
-    }
-
-    // Keep only top entries
-    this.data[key] = entries
-      .sort((a, b) => this.calculateScore(b) - this.calculateScore(a))
-      .slice(0, MAX_ENTRIES_PER_TERM);
-  }
-
-  /**
-   * Get frecency scores for items matching a search term.
-   * Returns a map of itemId -> score (higher is better).
-   */
-  getScores(searchTerm: string): Map<string, number> {
-    const scores = new Map<string, number>();
-    const normalizedTerm = this.normalizeTerm(searchTerm);
-
-    // If no search term, return global scores
-    if (!normalizedTerm) {
-      const globalEntries = this.data[GLOBAL_KEY];
-      if (globalEntries) {
-        for (const entry of globalEntries) {
-          scores.set(entry.itemId, this.calculateScore(entry));
-        }
-      }
-      return scores;
-    }
-
-    // Exact match for search term
-    const exactEntries = this.data[normalizedTerm];
-    if (exactEntries) {
-      for (const entry of exactEntries) {
-        const score = this.calculateScore(entry);
-        scores.set(entry.itemId, score);
-      }
-    }
-
-    // Prefix matches (for partial typing)
-    for (const [term, entries] of Object.entries(this.data)) {
-      if (term !== GLOBAL_KEY && term !== normalizedTerm && term.startsWith(normalizedTerm)) {
-        for (const entry of entries) {
-          const currentScore = scores.get(entry.itemId) ?? 0;
-          // Prefix matches get reduced weight
-          const prefixScore = this.calculateScore(entry) * 0.5;
-          scores.set(entry.itemId, Math.max(currentScore, prefixScore));
-        }
-      }
-    }
-
-    return scores;
-  }
-
-  /**
-   * Get the most likely item for a search term (for auto-selection).
-   * Returns itemId if there's a strong match, null otherwise.
-   */
-  getTopMatch(searchTerm: string): string | null {
-    const normalizedTerm = this.normalizeTerm(searchTerm);
-    if (!normalizedTerm) return null;
-
-    const entries = this.data[normalizedTerm];
-    if (!entries || entries.length === 0) return null;
-
-    const topEntry = entries[0];
-    const score = this.calculateScore(topEntry);
-
-    // Only auto-select if strong confidence (used multiple times recently)
-    if (topEntry.count >= 2 && score > 5) {
-      return topEntry.itemId;
-    }
-
-    return null;
-  }
-
-  private calculateScore(entry: FrecencyEntry): number {
-    const ageInHours = (Date.now() - entry.lastUsed) / (60 * 60 * 24);
-    const recencyScore = Math.pow(DECAY_FACTOR, ageInHours);
-    return entry.count * recencyScore;
-  }
-
-  private normalizeTerm(term: string): string {
-    return term.toLowerCase().trim();
-  }
-
-  private load(): void {
-    if (!this.isBrowser) return;
-
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) {
-        this.data = JSON.parse(stored);
-      }
-    } catch {
-      this.data = {};
-    }
-  }
-
-  private pruneAndSave(): void {
-    if (!this.isBrowser) return;
-
-    // Prune old terms if we have too many
-    const terms = Object.keys(this.data);
-    if (terms.length > MAX_TERMS) {
-      const termScores = terms.map((term) => ({
-        term,
-        maxScore: Math.max(...this.data[term].map((e) => this.calculateScore(e))),
-      }));
-      termScores.sort((a, b) => b.maxScore - a.maxScore);
-
-      const keepTerms = new Set(termScores.slice(0, MAX_TERMS).map((t) => t.term));
-      for (const term of terms) {
-        if (!keepTerms.has(term)) {
-          delete this.data[term];
-        }
-      }
-    }
-
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.data));
-    } catch {
-      // Storage full or unavailable
-    }
-  }
-}

package/src/lib/gigamenu-templates.directive.ts

@@ -1,178 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-import { GigamenuItem } from './types';
-
-/**
- * Context provided to the item template.
- */
-export interface GigamenuItemContext {
-  /** The menu item being rendered */
-  $implicit: GigamenuItem;
-  /** The index of the item in the filtered list */
-  index: number;
-  /** Whether this item is currently selected */
-  selected: boolean;
-}
-
-/**
- * Context provided to the empty template.
- */
-export interface GigamenuEmptyContext {
-  /** The current search query */
-  $implicit: string;
-}
-
-/**
- * Context provided to the header template.
- */
-export interface GigamenuHeaderContext {
-  /** The current full query */
-  $implicit: string;
-  /** The search term (before separator) */
-  searchTerm: string;
-  /** The arguments (after separator) */
-  args: string;
-  /** Callback to update the query */
-  onQueryChange: (value: string) => void;
-  /** Callback for keydown events */
-  onKeydown: (event: KeyboardEvent) => void;
-  /** Placeholder text */
-  placeholder: string;
-}
-
-/**
- * Context provided to the footer template.
- */
-export interface GigamenuFooterContext {
-  /** Number of filtered items */
-  $implicit: number;
-  /** Total number of items */
-  total: number;
-}
-
-/**
- * Template directive for customizing menu item rendering.
- *
- * @example
- * ```html
- * <gm-gigamenu>
- *   <ng-template gmItem let-item let-selected="selected" let-index="index">
- *     <div [class.active]="selected">
- *       {{ item.label }}
- *     </div>
- *   </ng-template>
- * </gm-gigamenu>
- * ```
- */
-@Directive({
-  selector: '[gmItem]',
-  standalone: true,
-})
-export class GigamenuItemTemplate {
-  readonly template = inject<TemplateRef<GigamenuItemContext>>(TemplateRef);
-}
-
-/**
- * Template directive for customizing empty state rendering.
- *
- * @example
- * ```html
- * <gm-gigamenu>
- *   <ng-template gmEmpty let-query>
- *     <div>No results for "{{ query }}"</div>
- *   </ng-template>
- * </gm-gigamenu>
- * ```
- */
-@Directive({
-  selector: '[gmEmpty]',
-  standalone: true,
-})
-export class GigamenuEmptyTemplate {
-  readonly template = inject<TemplateRef<GigamenuEmptyContext>>(TemplateRef);
-}
-
-/**
- * Template directive for customizing header/search input rendering.
- *
- * @example
- * ```html
- * <gm-gigamenu>
- *   <ng-template gmHeader let-query let-onQueryChange="onQueryChange" let-onKeydown="onKeydown">
- *     <input [value]="query" (input)="onQueryChange($event.target.value)" (keydown)="onKeydown($event)" />
- *   </ng-template>
- * </gm-gigamenu>
- * ```
- */
-@Directive({
-  selector: '[gmHeader]',
-  standalone: true,
-})
-export class GigamenuHeaderTemplate {
-  readonly template = inject<TemplateRef<GigamenuHeaderContext>>(TemplateRef);
-}
-
-/**
- * Template directive for customizing footer rendering.
- *
- * @example
- * ```html
- * <gm-gigamenu>
- *   <ng-template gmFooter let-count let-total="total">
- *     <div>Showing {{ count }} of {{ total }} items</div>
- *   </ng-template>
- * </gm-gigamenu>
- * ```
- */
-@Directive({
-  selector: '[gmFooter]',
-  standalone: true,
-})
-export class GigamenuFooterTemplate {
-  readonly template = inject<TemplateRef<GigamenuFooterContext>>(TemplateRef);
-}
-
-/**
- * Template directive for customizing the entire panel/dialog container.
- * When provided, replaces the entire default panel structure.
- *
- * @example
- * ```html
- * <gm-gigamenu>
- *   <ng-template gmPanel let-items let-query="query" let-selectedIndex="selectedIndex">
- *     <div class="my-custom-panel">
- *       <!-- Custom implementation -->
- *     </div>
- *   </ng-template>
- * </gm-gigamenu>
- * ```
- */
-export interface GigamenuPanelContext {
-  /** Filtered items to display */
-  $implicit: GigamenuItem[];
-  /** Current full query */
-  query: string;
-  /** The search term (before separator) */
-  searchTerm: string;
-  /** The arguments (after separator) */
-  args: string;
-  /** Currently selected index */
-  selectedIndex: number;
-  /** Callback to execute an item */
-  executeItem: (item: GigamenuItem) => void;
-  /** Callback to update selection */
-  setSelectedIndex: (index: number) => void;
-  /** Callback to update query */
-  setQuery: (query: string) => void;
-  /** Callback to close the menu */
-  close: () => void;
-  /** Placeholder text from config */
-  placeholder: string;
-}
-
-@Directive({
-  selector: '[gmPanel]',
-  standalone: true,
-})
-export class GigamenuPanelTemplate {
-  readonly template = inject<TemplateRef<GigamenuPanelContext>>(TemplateRef);
-}

package/src/lib/gigamenu.component.html

@@ -1,170 +0,0 @@
-@if (service.isOpen()) {
-<div
-  class="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]"
-  (click)="onBackdropClick($event)"
->
-  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>
-
-  <!-- Custom panel template -->
-  @if (panelTemplate(); as pt) {
-    <ng-container
-      [ngTemplateOutlet]="pt.template"
-      [ngTemplateOutletContext]="getPanelContext()"
-    ></ng-container>
-  } @else {
-  <!-- Default panel -->
-  <div
-    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"
-    role="dialog"
-    aria-modal="true"
-    aria-label="Command menu"
-  >
-    <!-- Header -->
-    @if (headerTemplate(); as ht) {
-      <ng-container
-        [ngTemplateOutlet]="ht.template"
-        [ngTemplateOutletContext]="getHeaderContext()"
-      ></ng-container>
-    } @else {
-    <div class="flex items-center border-b border-neutral-200 px-4 dark:border-neutral-700">
-      <svg
-        class="h-5 w-5 text-neutral-400"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-        />
-      </svg>
-      <div class="relative flex-1">
-        <!-- Styled overlay for syntax highlighting -->
-        <div
-          class="pointer-events-none absolute inset-0 flex items-center px-3 py-4 text-base"
-          aria-hidden="true"
-        >
-          <span class="text-neutral-900 dark:text-neutral-100">{{ searchTerm() }}</span>@if (args()) {<span class="text-neutral-900 dark:text-neutral-100">{{ service.config().argSeparator }}</span><span class="text-purple-600 dark:text-purple-400">{{ args() }}</span>}
-        </div>
-        <!-- Transparent input on top -->
-        <input
-          #searchInput
-          type="text"
-          [placeholder]="service.config().placeholder"
-          [value]="query()"
-          (input)="onQueryChange($event)"
-          (keydown)="onInputKeydown($event)"
-          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"
-        />
-      </div>
-      <kbd
-        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"
-      >
-        ESC
-      </kbd>
-    </div>
-    }
-
-    <!-- Items list -->
-    <div #listContainer class="max-h-80 overflow-y-auto p-2">
-      @if (filteredItems().length === 0) {
-        <!-- Empty state -->
-        @if (emptyTemplate(); as et) {
-          <ng-container
-            [ngTemplateOutlet]="et.template"
-            [ngTemplateOutletContext]="getEmptyContext()"
-          ></ng-container>
-        } @else {
-        <div class="px-3 py-8 text-center text-neutral-500">
-          No results found
-        </div>
-        }
-      } @else {
-        @for (item of filteredItems(); track item.id; let i = $index) {
-          <!-- Custom item template -->
-          @if (itemTemplate(); as it) {
-            <ng-container
-              [ngTemplateOutlet]="it.template"
-              [ngTemplateOutletContext]="getItemContext(item, i)"
-            ></ng-container>
-          } @else {
-          <!-- Default item -->
-          <button
-            type="button"
-            (click)="executeItem(item)"
-            (mouseenter)="selectedIndex.set(i)"
-            [attr.data-index]="i"
-            [class]="
-            'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +
-            (selectedIndex() === i
-            ? 'bg-neutral-100 dark:bg-neutral-800'
-            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')
-            "
-          >
-            @if (item.iconClass) {
-            <i [class]="item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'"></i>
-            } @else if (item.icon) {
-            <span class="text-lg">{{ item.icon }}</span>
-            } @else {
-            <span
-              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"
-            >
-              {{ item.category === 'page' ? 'P' : 'C' }}
-            </span>
-            }
-            <div class="flex-1 min-w-0">
-              <div class="truncate font-medium text-neutral-900 dark:text-neutral-100">
-                {{ item.label }}
-              </div>
-              @if (item.description) {
-              <div class="truncate text-sm text-neutral-500 dark:text-neutral-400">
-                {{ item.description }}
-              </div>
-              }
-            </div>
-            <span
-              class="rounded-full px-2 py-0.5 text-xs"
-              [class]="
-              item.category === 'page'
-              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
-              : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
-              "
-            >
-              {{ item.category }}
-            </span>
-          </button>
-          }
-        }
-      }
-    </div>
-
-    <!-- Footer -->
-    @if (footerTemplate(); as ft) {
-      <ng-container
-        [ngTemplateOutlet]="ft.template"
-        [ngTemplateOutletContext]="getFooterContext()"
-      ></ng-container>
-    } @else {
-    <div
-      class="flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700"
-    >
-      <div class="flex items-center gap-3">
-        <span class="flex items-center gap-1">
-          <kbd class="rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800">↑</kbd>
-          <kbd class="rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800">↓</kbd>
-          navigate
-        </span>
-        <span class="flex items-center gap-1">
-          <kbd class="rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800">↵</kbd>
-          select
-        </span>
-      </div>
-      <span>gigamenu</span>
-    </div>
-    }
-  </div>
-  }
-</div>
-}