# LivaSpotlight
Package: @dataliva/livalib
Description: @dataliva/livalib komut paleti (spotlight) bileşeni.

Klavye kısayoluyla açılan, aranabilir bir komut paleti. Eylem listesi
`actions` prop'uyla verilir; kullanıcı yazdıkça `label`, `description` ve
`keywords` alanlarında arama yapılır, eylemler `group` alanına göre
başlıklar altında toplanır. Palet açıkken ok tuşlarıyla gezilir, Enter ile
seçilir, Escape ile kapanır. Bileşen `document.body` içine portal ile
çizilir; kapalıyken DOM'a hiçbir şey eklemez.

```tsx
import { LivaSpotlight, type LivaSpotlightAction } from "@dataliva/livalib";
```

## Komut paleti

Varsayılan kısayol Ctrl+K'dır (macOS'ta Cmd+K). Aşağıdaki örnek `isOpen` ve
`onOpenChange` ile kontrollü kullanımı gösterir; butonla ya da kısayolla
açabilirsiniz. Bir eylem seçildiğinde palet kapanır ve eylemin `onClick`
fonksiyonu çalışır.

**Örnek — Komut paleti:**

```tsx
const [open, setOpen] = useState<boolean>(false);
const [lastAction, setLastAction] = useState<string>("henüz yok");

const actions: LivaSpotlightAction[] = [
  {
    id: "dashboard",
    label: "Dashboard",
    description: "Genel bakış ekranına git",
    group: "Navigasyon",
    keywords: ["anasayfa", "özet"],
    leftSection: <i className="dx-icon-home" />,
    onClick: () => setLastAction("Dashboard"),
  },
  {
    id: "reports",
    label: "Raporlar",
    description: "Bütçe raporlarını aç",
    group: "Navigasyon",
    keywords: ["bütçe", "analiz"],
    leftSection: <i className="dx-icon-chart" />,
    onClick: () => setLastAction("Raporlar"),
  },
  {
    id: "new-record",
    label: "Yeni Kayıt",
    description: "Yeni bir gider kaydı oluştur",
    group: "İşlemler",
    leftSection: <i className="dx-icon-plus" />,
    onClick: () => setLastAction("Yeni Kayıt"),
  },
  {
    id: "settings",
    label: "Ayarlar",
    group: "İşlemler",
    leftSection: <i className="dx-icon-preferences" />,
    onClick: () => setLastAction("Ayarlar"),
  },
];

<LivaButton text="Spotlight'ı Aç" onClick={() => setOpen(true)} />
<span style={{ fontSize: 13 }}>Son eylem: {lastAction}</span>
<LivaSpotlight
  actions={actions}
  isOpen={open}
  onOpenChange={setOpen}
  searchPlaceholder="Komut ara..."
  nothingFoundMessage="Sonuç bulunamadı"
/>
```

## Özel kısayol ve limit

`shortcut` prop'u Ctrl/Cmd ile birlikte basılacak tuşu değiştirir; `limit`
aynı anda listelenecek en fazla eylem sayısını sınırlar. Bu örnek Ctrl+M
ile açılır ve dört eylemden en fazla üçünü listeler.

**Örnek — Özel kısayol ve limit:**

```tsx
const [open, setOpen] = useState<boolean>(false);

const actions: LivaSpotlightAction[] = [
  { id: "copy", label: "Kopyala", keywords: ["pano"], onClick: () => {} },
  { id: "paste", label: "Yapıştır", keywords: ["pano"], onClick: () => {} },
  { id: "duplicate", label: "Çoğalt", onClick: () => {} },
  { id: "archive", label: "Arşivle", onClick: () => {} },
];

<LivaButton text="Aç (Ctrl+M)" variant="outlined" onClick={() => setOpen(true)} />
<LivaSpotlight
  actions={actions}
  shortcut="m"
  limit={3}
  isOpen={open}
  onOpenChange={setOpen}
  searchPlaceholder="Eylem ara..."
  nothingFoundMessage="Eşleşen eylem yok"
/>
```

Not: Kısayol dinleyicisi bileşen mount olduğu sürece pencere genelinde
aktiftir. Aynı sayfada birden fazla `LivaSpotlight` kullanılacaksa her
birine farklı bir `shortcut` verilmelidir.

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `actions` | `LivaSpotlightAction[]` | — (zorunlu) |
| `shortcut` | `string` | `'k'` |
| `searchPlaceholder` | `string` | `'Search...'` |
| `nothingFoundMessage` | `string` | `'Nothing found...'` |
| `limit` | `number` | `10` |
| `isOpen` | `boolean` | — (verilirse kontrollü mod) |
| `onOpenChange` | `(isOpen: boolean) => void` | — |

### LivaSpotlightAction

| Alan | Tip | Açıklama |
|------|------|---------|
| `id` | `string` | Benzersiz eylem kimliği (zorunlu) |
| `label` | `string` | Listede görünen başlık (zorunlu) |
| `description` | `string` | Başlığın altındaki açıklama |
| `group` | `string` | Eylemin toplandığı grup başlığı |
| `onClick` | `() => void` | Eylem seçildiğinde çalışır (zorunlu) |
| `leftSection` | `ReactNode` | Sol tarafta ikon/işaret |
| `rightSection` | `ReactNode` | Sağ tarafta kısayol/rozet |
| `keywords` | `string[]` | Aramaya dahil edilen ek anahtar kelimeler |