@stisocial/ui 0.2.0 → 0.3.0

package/dist/id/ApiKeyList/ApiKeyList.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+export interface ApiKey {
+  id: string;
+  name: string;
+  /** Anahtarın görünür başı ("sti_live_4f9a"); gizli kısmı asla verilmez. */
+  prefix: string;
+  /** İzin adları ("Raporları okuma"). */
+  scopes?: readonly string[];
+  createdAt: Date | string | number;
+  lastUsedAt?: Date | string | number;
+  expiresAt?: Date | string | number;
+}
+export interface ApiKeyListProps {
+  keys: readonly ApiKey[];
+  title?: ReactNode;
+  description?: ReactNode;
+  /** "Yeni anahtar oluşturun" (ad ve izin seçimi uygulamanın penceresindedir). */
+  onCreate?: () => void;
+  /** Anahtarı iptal eder (söz dönerse beklenir). */
+  onRevoke?: (id: string) => void | Promise<void>;
+  /**
+   * Az önce oluşturulan anahtarın tamamı: yalnız bir kez gösterilir, kopyalanır, kapatılınca
+   * `onDismissSecret` ile uygulama belleğinden de silmelidir.
+   */
+  newSecret?: {
+    name: string;
+    value: string;
+  };
+  onDismissSecret?: () => void;
+  /** Süresi bu kadar gün içinde dolacak anahtar uyarı rozeti alır. */
+  expiryWarningDays?: number;
+  now?: Date | string | number;
+  className?: string;
+  id?: string;
+}
+/**
+ * API anahtarları: ad, görünür başlangıç (gizli kısım yok), izinler, oluşturma, son kullanım ve
+ * son geçerlilik (yaklaşan ve dolmuş rozetleri); oluşturma ve iptal. Yeni anahtarın tamamı yalnız
+ * bir kez, uyarıyla ve kopyalama düğmesiyle gösterilir.
+ */
+export declare function ApiKeyList({ keys, title, description, onCreate, onRevoke, newSecret, onDismissSecret, expiryWarningDays, now, className, id }: ApiKeyListProps): import("react").JSX.Element;

package/dist/id/ApiKeyList/ApiKeyList.js

@@ -0,0 +1,131 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../../components/Button/Button.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { KeyIcon } from "../../icons/generated/KeyIcon.js";
+import { SecurityItem, SecurityList } from "../_internal/SecurityList/SecurityList.js";
+import ApiKeyList_module_default from "./ApiKeyList.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/ApiKeyList/ApiKeyList.tsx
+const DAY = 864e5;
+/**
+* API anahtarları: ad, görünür başlangıç (gizli kısım yok), izinler, oluşturma, son kullanım ve
+* son geçerlilik (yaklaşan ve dolmuş rozetleri); oluşturma ve iptal. Yeni anahtarın tamamı yalnız
+* bir kez, uyarıyla ve kopyalama düğmesiyle gösterilir.
+*/
+function ApiKeyList({ keys, title, description, onCreate, onRevoke, newSecret, onDismissSecret, expiryWarningDays = 14, now, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const [initialNow] = useState(() => Date.now());
+	const [pending, setPending] = useState(null);
+	const current = new Date(now ?? initialNow).getTime();
+	const expiry = (k) => {
+		if (k.expiresAt === void 0) return null;
+		const left = new Date(k.expiresAt).getTime() - current;
+		if (left <= 0) return /* @__PURE__ */ jsx(Badge, {
+			tone: "danger",
+			children: t.idApiKeyExpired
+		});
+		if (left <= expiryWarningDays * DAY) return /* @__PURE__ */ jsx(Badge, {
+			tone: "warning",
+			children: template(t.idApiKeyExpiresSoon, { days: Math.ceil(left / DAY) })
+		});
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: [ApiKeyList_module_default.root, className].filter(Boolean).join(" "),
+		id,
+		children: [newSecret ? /* @__PURE__ */ jsxs("section", {
+			className: ApiKeyList_module_default.secret,
+			"aria-labelledby": `${id ?? "api"}-secret`,
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					id: `${id ?? "api"}-secret`,
+					className: ApiKeyList_module_default.secretTitle,
+					children: template(t.idApiKeyCreated, { name: newSecret.name })
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: ApiKeyList_module_default.secretNote,
+					children: t.idApiKeyShownOnce
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: ApiKeyList_module_default.secretRow,
+					children: [/* @__PURE__ */ jsx("code", {
+						className: ApiKeyList_module_default.secretValue,
+						children: newSecret.value
+					}), /* @__PURE__ */ jsx(CopyButton, {
+						value: newSecret.value,
+						label: t.idApiKeyCopy
+					})]
+				}),
+				onDismissSecret ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					onPress: onDismissSecret,
+					className: ApiKeyList_module_default.secretDone,
+					children: t.idApiKeySaved
+				}) : null
+			]
+		}) : null, /* @__PURE__ */ jsx(SecurityList, {
+			label: t.idApiKeys,
+			title: title ?? t.idApiKeys,
+			description: description ?? t.idApiKeysDescription,
+			action: onCreate ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+				onPress: onCreate,
+				children: t.idApiKeyCreate
+			}) : null,
+			isEmpty: keys.length === 0,
+			empty: t.idApiKeysEmpty,
+			children: keys.map((k) => {
+				const badge = expiry(k);
+				return /* @__PURE__ */ jsx(SecurityItem, {
+					icon: /* @__PURE__ */ jsx(KeyIcon, {}),
+					tone: k.expiresAt !== void 0 && new Date(k.expiresAt).getTime() <= current ? "danger" : badge ? "warning" : void 0,
+					title: k.name,
+					badges: badge,
+					meta: [
+						/* @__PURE__ */ jsx("code", {
+							className: ApiKeyList_module_default.prefix,
+							children: `${k.prefix}…`
+						}, "p"),
+						template(t.idApiKeyCreatedAt, { date: fmt.date(new Date(k.createdAt)) }),
+						k.lastUsedAt ? template(t.idDeviceLastUsed, { time: fmt.relative(new Date(k.lastUsedAt), new Date(current)) }) : t.idDeviceNeverUsed,
+						k.expiresAt ? template(t.idApiKeyExpiresAt, { date: fmt.date(new Date(k.expiresAt)) }) : null
+					],
+					extra: k.scopes && k.scopes.length > 0 ? /* @__PURE__ */ jsx("ul", {
+						className: ApiKeyList_module_default.scopes,
+						"aria-label": t.idApiKeyScopes,
+						children: k.scopes.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
+							tone: "neutral",
+							children: s
+						}) }, s))
+					}) : null,
+					actions: onRevoke ? /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						isPending: pending === k.id,
+						isDisabled: pending !== null && pending !== k.id,
+						onPress: async () => {
+							setPending(k.id);
+							try {
+								await onRevoke(k.id);
+							} finally {
+								setPending(null);
+							}
+						},
+						children: [t.idApiKeyRevoke, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (${k.name})` })]
+					}) : null
+				}, k.id);
+			})
+		})]
+	});
+}
+export { ApiKeyList };

package/dist/id/ApiKeyList/ApiKeyList.module.js

@@ -0,0 +1,14 @@
+import './ApiKeyList.css';
+// src/id/ApiKeyList/ApiKeyList.module.css
+var ApiKeyList_module_default = {
+	"root": "sti-ApiKeyList-root-c1173",
+	"secret": "sti-ApiKeyList-secret-2b7b1",
+	"secretTitle": "sti-ApiKeyList-secretTitle-eada3",
+	"secretNote": "sti-ApiKeyList-secretNote-399bb",
+	"secretRow": "sti-ApiKeyList-secretRow-32136",
+	"secretValue": "sti-ApiKeyList-secretValue-f5f84",
+	"secretDone": "sti-ApiKeyList-secretDone-44ea2",
+	"prefix": "sti-ApiKeyList-prefix-eefe1",
+	"scopes": "sti-ApiKeyList-scopes-89292"
+};
+export { ApiKeyList_module_default as default };

package/dist/id/ApiKeyList/index.d.ts

@@ -0,0 +1,2 @@
+import { ApiKey, ApiKeyList, ApiKeyListProps } from "./ApiKeyList.js";
+export { ApiKey, ApiKeyList, ApiKeyListProps };

package/dist/id/AppSwitcher/AppSwitcher.css

@@ -1,31 +1,58 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-AppSwitcher-grid-1bb9f {
-    gap: var(--sti-space-1);
+  .sti-AppSwitcher-trigger-4e70a {
+    flex: none;
+    align-self: center;
+  }
+
+  .sti-AppSwitcher-card-225e3 {
+    --sti-floating-w: 21rem;
+  }
+
+  .sti-AppSwitcher-panel-a6602 {
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    color: var(--sti-fg);
     font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-AppSwitcher-title-6d2e0 {
+    padding-inline: var(--sti-space-1);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-AppSwitcher-grid-337c1 {
+    gap: var(--sti-space-1);
+    padding: var(--sti-space-1);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
     grid-template-columns: repeat(3, minmax(0, 1fr));
     margin: 0;
-    padding: 0;
     list-style: none;
     display: grid;
   }
 
   @media (width <= 22.5rem) {
-    .sti-AppSwitcher-grid-1bb9f {
+    .sti-AppSwitcher-grid-337c1 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  .sti-AppSwitcher-cell-419c9 {
+  .sti-AppSwitcher-cell-8b890 {
     min-inline-size: 0;
   }
 
-  .sti-AppSwitcher-app-2a6b7 {
+  .sti-AppSwitcher-app-4fff1 {
     align-items: center;
     gap: var(--sti-space-2);
     box-sizing: border-box;
-    min-block-size: 5.5rem;
-    padding: var(--sti-space-3) var(--sti-space-2);
+    min-block-size: 6rem;
+    padding: var(--sti-space-3) var(--sti-space-1) var(--sti-space-2);
     border: var(--sti-border-width) solid transparent;
     border-radius: var(--sti-radius-md);
     color: var(--sti-fg);
@@ -36,73 +63,168 @@
     flex-direction: column;
     text-decoration: none;
     display: flex;
+    position: relative;
   }
 
   @media (hover: hover) {
-    .sti-AppSwitcher-app-2a6b7[data-hovered] {
+    .sti-AppSwitcher-app-4fff1[data-hovered] {
       background: var(--sti-bg-surface-hover);
     }
   }
 
-  .sti-AppSwitcher-app-2a6b7[data-pressed] {
+  .sti-AppSwitcher-app-4fff1[data-pressed] {
     background: var(--sti-bg-surface-active);
   }
 
-  .sti-AppSwitcher-app-2a6b7[data-current] {
+  .sti-AppSwitcher-app-4fff1[data-current] {
     border-color: var(--sti-border-selected);
     background: var(--sti-bg-accent-subtle);
   }
 
-  .sti-AppSwitcher-app-2a6b7[data-focus-visible] {
+  .sti-AppSwitcher-app-4fff1[data-focus-visible] {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
-    outline-offset: var(--sti-focus-ring-offset);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
   }
 
-  .sti-AppSwitcher-tile-ba8b2 {
-    inline-size: var(--sti-control-h-lg);
-    block-size: var(--sti-control-h-lg);
-    border-radius: var(--sti-radius-md);
-    background: var(--sti-bg-surface-active);
-    color: var(--sti-fg);
-    font-size: var(--sti-icon-lg);
+  .sti-AppSwitcher-tile-3c344 {
+    --sti-app-tile-bg: var(--sti-bg-surface);
+    --sti-app-tile-fg: var(--sti-fg);
+    box-sizing: border-box;
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-app-tile-bg);
+    block-size: 3rem;
+    inline-size: 3rem;
+    color: var(--sti-app-tile-fg);
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-lg);
     font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-lg);
+    box-shadow: inset 0 0 0 var(--sti-border-width) var(--sti-border-subtle);
     flex: none;
     place-items: center;
+    line-height: 1;
     display: inline-grid;
   }
 
-  .sti-AppSwitcher-app-2a6b7[data-current] .sti-AppSwitcher-tile-ba8b2 {
-    background: var(--sti-fill-accent);
-    color: var(--sti-fg-on-accent);
+  .sti-AppSwitcher-tile-3c344[data-icon] {
+    font-size: var(--sti-icon-lg);
   }
 
-  .sti-AppSwitcher-name-c7544 {
-    min-inline-size: 0;
-    font-size: var(--sti-font-size-sm);
+  .sti-AppSwitcher-tile-3c344[data-icon] > svg {
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+  }
+
+  .sti-AppSwitcher-tile-3c344[data-color="neutral"] {
+    --sti-app-tile-bg: var(--sti-bg-surface-active);
+    --sti-app-tile-fg: var(--sti-fg);
+  }
+
+  .sti-AppSwitcher-tile-3c344[data-color="neutral-strong"] {
+    --sti-app-tile-bg: var(--sti-fill-neutral);
+    --sti-app-tile-fg: var(--sti-fg-on-neutral);
+  }
+
+  .sti-AppSwitcher-tile-3c344[data-color="success"] {
+    --sti-app-tile-bg: var(--sti-bg-success-subtle);
+    --sti-app-tile-fg: var(--sti-fg-success-strong);
+  }
+
+  .sti-AppSwitcher-tile-3c344[data-color="success-strong"] {
+    --sti-app-tile-bg: var(--sti-fill-success);
+    --sti-app-tile-fg: var(--sti-fg-on-success);
+  }
+
+  .sti-AppSwitcher-tile-3c344[data-color="warning"] {
+    --sti-app-tile-bg: var(--sti-bg-warning-subtle);
+    --sti-app-tile-fg: var(--sti-fg-warning-strong);
+  }
+
+  .sti-AppSwitcher-tile-3c344[data-color="warning-strong"] {
+    --sti-app-tile-bg: var(--sti-fill-warning);
+    --sti-app-tile-fg: var(--sti-fg-on-warning);
+  }
+
+  .sti-AppSwitcher-name-d8837 {
+    max-inline-size: 100%;
+    font-size: var(--sti-font-size-xs);
     font-weight: var(--sti-font-weight-medium);
-    line-height: var(--sti-line-height-sm);
+    line-height: var(--sti-line-height-xs);
     overflow-wrap: anywhere;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
   }
 
-  .sti-AppSwitcher-empty-1bdf0 {
+  .sti-AppSwitcher-empty-21386 {
+    padding: var(--sti-space-4) var(--sti-space-3);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
     line-height: var(--sti-line-height-sm);
+    text-align: center;
     margin: 0;
   }
 
+  .sti-AppSwitcher-more-0361c {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg-link);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .sti-AppSwitcher-moreIcon-8c7d2 {
+    block-size: 1em;
+    inline-size: 1em;
+    transition: translate var(--sti-duration-fast) var(--sti-ease-snap);
+  }
+
+  @media (hover: hover) {
+    .sti-AppSwitcher-more-0361c[data-hovered] {
+      text-underline-offset: .2em;
+      text-decoration: underline;
+    }
+
+    .sti-AppSwitcher-more-0361c[data-hovered] .sti-AppSwitcher-moreIcon-8c7d2 {
+      translate: .125rem;
+    }
+  }
+
+  .sti-AppSwitcher-more-0361c[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-AppSwitcher-moreIcon-8c7d2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    scale: -1 1;
+  }
+
   @media (forced-colors: active) {
-    .sti-AppSwitcher-app-2a6b7[data-current] {
+    .sti-AppSwitcher-app-4fff1[data-current] {
       border-color: highlight;
     }
 
-    .sti-AppSwitcher-app-2a6b7[data-focus-visible] {
+    .sti-AppSwitcher-app-4fff1[data-focus-visible], .sti-AppSwitcher-more-0361c[data-focus-visible] {
       outline-color: highlight;
     }
+
+    .sti-AppSwitcher-tile-3c344, .sti-AppSwitcher-grid-337c1 {
+      border: var(--sti-border-width) solid CanvasText;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .sti-AppSwitcher-app-2a6b7 {
+    .sti-AppSwitcher-app-4fff1, .sti-AppSwitcher-moreIcon-8c7d2 {
       transition: none;
     }
   }

package/dist/id/AppSwitcher/AppSwitcher.d.ts

@@ -1,3 +1,4 @@
+import { AvatarColor } from "../../components/Avatar/Avatar.js";
 import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
 import "../../components/Popover/Popover.js";
 import { ReactNode } from "react";
@@ -7,13 +8,25 @@ export interface AppSwitcherApp {
   name: string;
   /** Uygulamanın adresi. */
   href: string;
-  /** Karodaki ikon (süs); yoksa adın baş harfi çizilir. */
+  /** Karodaki ikon (süs); yoksa kısaltma yazılır ("STI Office" → "O", "STI ID" → "ID"). */
   icon?: ReactNode;
+  /** Karonun rengi (ikonlu ve kısaltmalı karoda); verilmezse anahtardan kalıcı olarak seçilir (Avatar paleti). */
+  color?: AvatarColor;
   /** Geçerli uygulama: işaretlenir ve ekran okuyucuya bildirilir. */
   isCurrent?: boolean;
 }
-export interface AppSwitcherProps {
+export interface AppSwitcherPanelProps {
   apps: readonly AppSwitcherApp[];
+  /** Panelin başlığı; varsayılan "STI uygulamaları". */
+  title?: string;
+  /** Verilirse altta "Tüm uygulamalar" bağlantısı çıkar. */
+  moreHref?: string;
+  /** Bir bağlantı seçildiğinde çağrılır; açılır kutuda paneli kapatır. */
+  onAction?: () => void;
+  className?: string;
+  id?: string;
+}
+export interface AppSwitcherProps extends Omit<AppSwitcherPanelProps, "onAction" | "id"> {
   /** Tetikleyicinin adı; varsayılan "STI uygulamaları". */
   label?: string;
   size?: "sm" | "md" | "lg";
@@ -21,11 +34,23 @@ export interface AppSwitcherProps {
   isOpen?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
-  className?: string;
+  /** Tetikleyici düğmenin kimliği. */
   id?: string;
 }
 /**
- * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının karo ızgarası.
- * Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla gezilir.
+ * Karodaki kısaltma: "STI" ön eki atılır; kalan ad en çok üç harfse olduğu gibi ("ID"), değilse
+ * ilk harf ("Office" → "O").
+ */
+export declare function appMonogram(name: string): string;
+/**
+ * Uygulama ızgarası: başlık, uygulama karoları (ikon ya da kısaltma, ad) ve isteğe bağlı "Tüm
+ * uygulamalar" bağlantısı. `AppSwitcher` bunu açılır kutuda çizer; uygulama bir sayfada ya da dar
+ * ekran çekmecesinde doğrudan kullanabilir.
+ */
+export declare function AppSwitcherPanel({ apps, title, moreHref, onAction, className, id }: AppSwitcherPanelProps): import("react").JSX.Element;
+/**
+ * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının paneli
+ * (`AppSwitcherPanel`). Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla
+ * gezilir.
  */
-export declare function AppSwitcher({ apps, label, size, placement, isOpen, defaultOpen, onOpenChange, className, id }: AppSwitcherProps): import("react").JSX.Element;
+export declare function AppSwitcher({ label, size, placement, isOpen, defaultOpen, onOpenChange, className, id, ...panel }: AppSwitcherProps): import("react").JSX.Element;

package/dist/id/AppSwitcher/AppSwitcher.js

@@ -1,7 +1,9 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { IconButton } from "../../components/IconButton/IconButton.js";
+import { avatarColorOf } from "../../components/Avatar/Avatar.js";
 import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
 import { Popover as Popover$1 } from "../../components/Popover/Popover.js";
 import { AppsIcon } from "../../icons/generated/AppsIcon.js";
 import AppSwitcher_module_default from "./AppSwitcher.module.js";
@@ -24,16 +26,94 @@ function onGridKeyDown(event) {
 	else if (event.key === "End") next = links.length - 1;
 	else if (ARROWS[event.key]) {
 		const cols = Math.max(1, getComputedStyle(event.currentTarget).gridTemplateColumns.split(" ").length);
-		next = Math.min(links.length - 1, Math.max(0, index + (ARROWS[event.key]?.(cols) ?? 0)));
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const step = ARROWS[event.key]?.(cols) ?? 0;
+		const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+		next = Math.min(links.length - 1, Math.max(0, index + (rtl && horizontal ? -step : step)));
 	} else return;
 	event.preventDefault();
 	links[next]?.focus();
 }
 /**
-* Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının karo ızgarası.
-* Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla gezilir.
+* Karodaki kısaltma: "STI" ön eki atılır; kalan ad en çok üç harfse olduğu gibi ("ID"), değilse
+* ilk harf ("Office" → "O").
+*/
+function appMonogram(name) {
+	const rest = name.trim().replace(/^sti\s+/i, "").trim() || name.trim();
+	const letters = Array.from(rest);
+	if (letters.length <= 3 && !/\s/.test(rest)) return rest.toLocaleUpperCase("tr-TR");
+	return (letters[0] ?? "").toLocaleUpperCase("tr-TR");
+}
+/**
+* Uygulama ızgarası: başlık, uygulama karoları (ikon ya da kısaltma, ad) ve isteğe bağlı "Tüm
+* uygulamalar" bağlantısı. `AppSwitcher` bunu açılır kutuda çizer; uygulama bir sayfada ya da dar
+* ekran çekmecesinde doğrudan kullanabilir.
+*/
+function AppSwitcherPanel({ apps, title, moreHref, onAction, className, id }) {
+	const t = useMessages();
+	const heading = title ?? t.idAppSwitcher;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [AppSwitcher_module_default.panel, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: AppSwitcher_module_default.title,
+				children: heading
+			}),
+			apps.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: AppSwitcher_module_default.empty,
+				children: t.idAppSwitcherEmpty
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: AppSwitcher_module_default.grid,
+				"aria-label": heading,
+				onKeyDown: onGridKeyDown,
+				children: apps.map((app) => /* @__PURE__ */ jsx("li", {
+					className: AppSwitcher_module_default.cell,
+					children: /* @__PURE__ */ jsxs(Link, {
+						className: AppSwitcher_module_default.app,
+						href: app.href,
+						"data-current": app.isCurrent ? "" : void 0,
+						"aria-current": app.isCurrent ? "true" : void 0,
+						onPress: onAction,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: AppSwitcher_module_default.tile,
+								"data-color": app.color ?? avatarColorOf(app.id),
+								"data-icon": app.icon ? "" : void 0,
+								"aria-hidden": "true",
+								children: app.icon ?? appMonogram(app.name)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: AppSwitcher_module_default.name,
+								children: app.name
+							}),
+							app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+								" (",
+								t.idAppSwitcherCurrent,
+								")"
+							] }) : null
+						]
+					})
+				}, app.id))
+			}),
+			moreHref ? /* @__PURE__ */ jsxs(Link, {
+				href: moreHref,
+				className: AppSwitcher_module_default.more,
+				onPress: onAction,
+				children: [t.idAppSwitcherMore, /* @__PURE__ */ jsx(ArrowRightIcon, {
+					className: AppSwitcher_module_default.moreIcon,
+					"aria-hidden": "true"
+				})]
+			}) : null
+		]
+	});
+}
+/**
+* Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının paneli
+* (`AppSwitcherPanel`). Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla
+* gezilir.
 */
-function AppSwitcher({ apps, label, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id }) {
+function AppSwitcher({ label, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id, ...panel }) {
 	const t = useMessages();
 	const name = label ?? t.idAppSwitcher;
 	return /* @__PURE__ */ jsx(Popover$1, {
@@ -43,46 +123,19 @@ function AppSwitcher({ apps, label, size = "md", placement = "bottom end", isOpe
 		placement,
 		"aria-label": name,
 		size: "md",
+		className: AppSwitcher_module_default.card,
 		trigger: /* @__PURE__ */ jsx(IconButton, {
 			id,
-			className,
+			className: [AppSwitcher_module_default.trigger, className].filter(Boolean).join(" "),
 			label: name,
 			icon: /* @__PURE__ */ jsx(AppsIcon, {}),
 			variant: "ghost",
 			size
 		}),
-		children: apps.length === 0 ? /* @__PURE__ */ jsx("p", {
-			className: AppSwitcher_module_default.empty,
-			children: t.idAppSwitcherEmpty
-		}) : /* @__PURE__ */ jsx("ul", {
-			className: AppSwitcher_module_default.grid,
-			onKeyDown: onGridKeyDown,
-			children: apps.map((app) => /* @__PURE__ */ jsx("li", {
-				className: AppSwitcher_module_default.cell,
-				children: /* @__PURE__ */ jsxs(Link, {
-					className: AppSwitcher_module_default.app,
-					href: app.href,
-					"data-current": app.isCurrent ? "" : void 0,
-					"aria-current": app.isCurrent ? "true" : void 0,
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: AppSwitcher_module_default.tile,
-							"aria-hidden": "true",
-							children: app.icon ?? Array.from(app.name.trim())[0]?.toLocaleUpperCase("tr-TR")
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: AppSwitcher_module_default.name,
-							children: app.name
-						}),
-						app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-							" (",
-							t.idAppSwitcherCurrent,
-							")"
-						] }) : null
-					]
-				})
-			}, app.id))
+		children: (close) => /* @__PURE__ */ jsx(AppSwitcherPanel, {
+			...panel,
+			onAction: close
 		})
 	});
 }
-export { AppSwitcher };
+export { AppSwitcher, AppSwitcherPanel, appMonogram };