@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/TreeView/TreeView.css

@@ -1,10 +1,10 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-TreeView-keys-7d559 {
+  .sti-TreeView-keys-5fc06 {
     display: contents;
   }
 
-  .sti-TreeView-root-64a03 {
+  .sti-TreeView-root-4df6d {
     align-content: start;
     gap: var(--sti-space-0-5);
     inline-size: 100%;
@@ -14,13 +14,13 @@
     display: grid;
   }
 
-  .sti-TreeView-root-64a03[data-focus-visible] {
+  .sti-TreeView-root-4df6d[data-focus-visible] {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
     outline-offset: var(--sti-focus-ring-offset);
     border-radius: var(--sti-radius-md);
   }
 
-  .sti-TreeView-item-f6540 {
+  .sti-TreeView-item-3536c {
     border-radius: var(--sti-radius-md);
     color: var(--sti-fg);
     font-size: var(--sti-font-size-sm);
@@ -31,49 +31,101 @@
   }
 
   @media (hover: hover) {
-    .sti-TreeView-item-f6540[data-hovered]:not([data-selected], [data-disabled]) {
+    .sti-TreeView-item-3536c[data-hovered]:not([data-selected], [data-disabled]) {
       background: var(--sti-bg-surface-hover);
     }
   }
 
-  .sti-TreeView-item-f6540[data-focus-visible] {
+  .sti-TreeView-item-3536c[data-focus-visible] {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
     outline-offset: calc(var(--sti-focus-ring-width) * -1);
   }
 
-  .sti-TreeView-item-f6540[data-selected] {
+  .sti-TreeView-item-3536c[data-selected] {
     background: var(--sti-bg-accent-subtle);
     color: var(--sti-fg-accent-strong);
   }
 
-  .sti-TreeView-item-f6540[data-selected] .sti-TreeView-label-e88eb {
+  .sti-TreeView-item-3536c[data-selected] .sti-TreeView-label-55a7a {
     font-weight: var(--sti-font-weight-semibold);
   }
 
-  .sti-TreeView-item-f6540[data-disabled] {
+  .sti-TreeView-item-3536c[data-disabled] {
     cursor: default;
   }
 
-  .sti-TreeView-item-f6540[data-disabled] .sti-TreeView-label-e88eb, .sti-TreeView-item-f6540[data-disabled] .sti-TreeView-icon-98cc2 {
+  .sti-TreeView-item-3536c[data-disabled] .sti-TreeView-label-55a7a, .sti-TreeView-item-3536c[data-disabled] .sti-TreeView-icon-e3c6f {
     opacity: var(--sti-opacity-disabled);
   }
 
-  .sti-TreeView-row-62108 {
+  .sti-TreeView-item-3536c {
+    --sti-tree-level: var(--tree-item-level, 1);
+  }
+
+  .sti-TreeView-item-3536c[data-level="1"] {
+    --sti-tree-level: 1;
+  }
+
+  .sti-TreeView-item-3536c[data-level="2"] {
+    --sti-tree-level: 2;
+  }
+
+  .sti-TreeView-item-3536c[data-level="3"] {
+    --sti-tree-level: 3;
+  }
+
+  .sti-TreeView-item-3536c[data-level="4"] {
+    --sti-tree-level: 4;
+  }
+
+  .sti-TreeView-item-3536c[data-level="5"] {
+    --sti-tree-level: 5;
+  }
+
+  .sti-TreeView-item-3536c[data-level="6"] {
+    --sti-tree-level: 6;
+  }
+
+  .sti-TreeView-item-3536c[data-level="7"] {
+    --sti-tree-level: 7;
+  }
+
+  .sti-TreeView-item-3536c[data-level="8"] {
+    --sti-tree-level: 8;
+  }
+
+  .sti-TreeView-item-3536c[data-level="9"] {
+    --sti-tree-level: 9;
+  }
+
+  .sti-TreeView-item-3536c[data-level="10"] {
+    --sti-tree-level: 10;
+  }
+
+  .sti-TreeView-item-3536c[data-level="11"] {
+    --sti-tree-level: 11;
+  }
+
+  .sti-TreeView-item-3536c[data-level="12"] {
+    --sti-tree-level: 12;
+  }
+
+  .sti-TreeView-row-1fb60 {
     align-items: center;
     gap: var(--sti-space-2);
     min-block-size: var(--sti-control-h-sm);
-    padding-inline-start: calc((var(--tree-item-level, 1) - 1) * 1.25rem + var(--sti-space-1));
+    padding-inline-start: calc((var(--sti-tree-level) - 1) * 1.25rem + var(--sti-space-1));
     padding-inline-end: var(--sti-space-2);
     display: flex;
   }
 
   @media (pointer: coarse) {
-    .sti-TreeView-row-62108 {
+    .sti-TreeView-row-1fb60 {
       min-block-size: var(--sti-control-h-md);
     }
   }
 
-  .sti-TreeView-chevron-97a97, .sti-TreeView-spacer-29b18 {
+  .sti-TreeView-chevron-f1432, .sti-TreeView-spacer-ca971 {
     flex: none;
     place-items: center;
     block-size: 1.5rem;
@@ -81,7 +133,7 @@
     display: inline-grid;
   }
 
-  .sti-TreeView-chevron-97a97 {
+  .sti-TreeView-chevron-f1432 {
     border-radius: var(--sti-radius-sm);
     color: var(--sti-fg-muted);
     font-size: var(--sti-icon-sm);
@@ -93,49 +145,49 @@
   }
 
   @media (hover: hover) {
-    .sti-TreeView-chevron-97a97[data-hovered] {
+    .sti-TreeView-chevron-f1432[data-hovered] {
       background: var(--sti-bg-surface-active);
       color: var(--sti-fg);
     }
   }
 
-  .sti-TreeView-chevron-97a97[data-expanded] {
+  .sti-TreeView-chevron-f1432[data-expanded] {
     rotate: 90deg;
   }
 
-  .sti-TreeView-chevron-97a97: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)) {
+  .sti-TreeView-chevron-f1432: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)) {
     rotate: 180deg;
   }
 
-  .sti-TreeView-chevron-97a97[data-expanded]: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)) {
+  .sti-TreeView-chevron-f1432[data-expanded]: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)) {
     rotate: 90deg;
   }
 
-  .sti-TreeView-icon-98cc2 {
+  .sti-TreeView-icon-e3c6f {
     color: var(--sti-fg-muted);
     font-size: var(--sti-icon-sm);
     flex: none;
     display: inline-flex;
   }
 
-  .sti-TreeView-item-f6540[data-selected] .sti-TreeView-icon-98cc2 {
+  .sti-TreeView-item-3536c[data-selected] .sti-TreeView-icon-e3c6f {
     color: inherit;
   }
 
-  .sti-TreeView-label-e88eb {
+  .sti-TreeView-label-55a7a {
     overflow-wrap: anywhere;
     flex: auto;
     min-inline-size: 0;
   }
 
-  .sti-TreeView-meta-2e0e4 {
+  .sti-TreeView-meta-8d932 {
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-xs);
     font-variant-numeric: tabular-nums;
     flex: none;
   }
 
-  .sti-TreeView-box-a209f {
+  .sti-TreeView-box-2a8da {
     border: var(--sti-border-width) solid var(--sti-border-control);
     border-radius: var(--sti-radius-xs);
     background: var(--sti-bg-canvas);
@@ -148,12 +200,12 @@
     display: inline-grid;
   }
 
-  .sti-TreeView-box-a209f[data-checked] {
+  .sti-TreeView-box-2a8da[data-checked], .sti-TreeView-box-2a8da[data-partial] {
     border-color: var(--sti-fg-accent);
     background: var(--sti-fill-accent);
   }
 
-  .sti-TreeView-empty-da3a0 {
+  .sti-TreeView-empty-44656 {
     padding: var(--sti-space-4);
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
@@ -162,11 +214,11 @@
   }
 
   @media (forced-colors: active) {
-    .sti-TreeView-item-f6540[data-selected] {
+    .sti-TreeView-item-3536c[data-selected] {
       outline: var(--sti-border-width) solid Highlight;
     }
 
-    .sti-TreeView-box-a209f[data-checked] {
+    .sti-TreeView-box-2a8da[data-checked], .sti-TreeView-box-2a8da[data-partial] {
       background: highlight;
     }
   }

package/dist/components/TreeView/TreeView.js

@@ -1,31 +1,14 @@
 "use client";
+import { useMessages } from "../../provider/UIProvider.js";
 import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import { MinusIcon } from "../../icons/generated/MinusIcon.js";
+import { onOpenBranchKey } from "../_internal/tree/openBranchKey.js";
 import TreeView_module_default from "./TreeView.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Button, Tree, TreeItem, TreeItemContent } from "react-aria-components";
 // src/components/TreeView/TreeView.tsx
-/**
-* APG Tree: açık dalda → (sağdan sola yazımda ←) ilk çocuğa iner. React Aria açık dalda bu tuşta
-* yerinde kalır; tuş React'in yakalama aşamasında, ağacın kendi işleyicisinden önce karşılanır ve
-* ilk çocuk bir sonraki satır olduğundan ↓ hareketine çevrilir (odak React Aria'nın durumundadır).
-*/
-function onOpenBranchKey(e) {
-	const forward = getComputedStyle(e.currentTarget).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
-	if (e.key !== forward || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-	const row = e.target;
-	if (row.getAttribute("role") !== "row" || row.getAttribute("aria-expanded") !== "true") return;
-	const level = Number(row.getAttribute("aria-level"));
-	const next = row.nextElementSibling;
-	if (!next || Number(next.getAttribute("aria-level")) !== level + 1) return;
-	e.preventDefault();
-	e.stopPropagation();
-	row.dispatchEvent(new globalThis.KeyboardEvent("keydown", {
-		key: "ArrowDown",
-		bubbles: true,
-		cancelable: true
-	}));
-}
 const toSet = (s) => s === "all" ? /* @__PURE__ */ new Set() : new Set(Array.from(s, String));
 /**
 * Ağaç görünümü (APG Tree, React Aria Tree): klasör, kategori ve hiyerarşi gezinmesi. ↑/↓
@@ -33,6 +16,11 @@ const toSet = (s) => s === "all" ? /* @__PURE__ */ new Set() : new Set(Array.fro
 * arama; Enter etkinleştirir, Boşluk seçer. Her düzey 1.25rem içeri; açma oku ayrı bir düğmedir.
 */
 function TreeView({ items, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, expandedKeys, defaultExpandedKeys, onExpandedChange, onAction, emptyText, className, id, ...aria }) {
+	const t = useMessages();
+	const [mirror, setMirror] = useState(() => new Set(Array.from(selectedKeys ?? defaultSelectedKeys ?? [], String)));
+	const selected = selectedKeys !== void 0 ? new Set(Array.from(selectedKeys, String)) : mirror;
+	/** Dalın altında seçili bir düğüm var mı (kendisi hariç). */
+	const hasSelectedDescendant = (n) => (n.children ?? []).some((c) => selected.has(c.id) || hasSelectedDescendant(c));
 	const disabled = [];
 	const collect = (list) => {
 		for (const n of list) {
@@ -41,9 +29,11 @@ function TreeView({ items, selectionMode = "none", selectedKeys, defaultSelected
 		}
 	};
 	collect(items);
+	/** Çoklu seçimde dal seçili değil ama altında seçili düğüm var. */
+	const isPartial = (n) => selectionMode === "multiple" && !selected.has(n.id) && hasSelectedDescendant(n);
 	const render = (list) => list.map((n) => /* @__PURE__ */ jsxs(TreeItem, {
 		id: n.id,
-		textValue: n.label,
+		textValue: isPartial(n) ? `${n.label}, ${t.treePartial}` : n.label,
 		href: n.href,
 		className: TreeView_module_default.item,
 		children: [/* @__PURE__ */ jsx(TreeItemContent, { children: ({ hasChildItems, isExpanded, isSelected, selectionMode: mode }) => /* @__PURE__ */ jsxs("div", {
@@ -61,8 +51,9 @@ function TreeView({ items, selectionMode = "none", selectedKeys, defaultSelected
 				mode === "multiple" ? /* @__PURE__ */ jsx("span", {
 					className: TreeView_module_default.box,
 					"data-checked": isSelected ? "" : void 0,
+					"data-partial": !isSelected && isPartial(n) ? "" : void 0,
 					"aria-hidden": "true",
-					children: isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+					children: isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : isPartial(n) ? /* @__PURE__ */ jsx(MinusIcon, {}) : null
 				}) : null,
 				n.icon ? /* @__PURE__ */ jsx("span", {
 					className: TreeView_module_default.icon,
@@ -90,7 +81,11 @@ function TreeView({ items, selectionMode = "none", selectedKeys, defaultSelected
 			selectionMode,
 			selectedKeys,
 			defaultSelectedKeys,
-			onSelectionChange: onSelectionChange ? (s) => onSelectionChange(toSet(s)) : void 0,
+			onSelectionChange: (s) => {
+				const next = toSet(s);
+				setMirror(next);
+				onSelectionChange?.(next);
+			},
 			expandedKeys,
 			defaultExpandedKeys,
 			onExpandedChange: onExpandedChange ? (s) => onExpandedChange(toSet(s)) : void 0,

package/dist/components/TreeView/TreeView.module.js

@@ -1,16 +1,16 @@
 import './TreeView.css';
 // src/components/TreeView/TreeView.module.css
 var TreeView_module_default = {
-	"keys": "sti-TreeView-keys-7d559",
-	"root": "sti-TreeView-root-64a03",
-	"item": "sti-TreeView-item-f6540",
-	"label": "sti-TreeView-label-e88eb",
-	"icon": "sti-TreeView-icon-98cc2",
-	"row": "sti-TreeView-row-62108",
-	"chevron": "sti-TreeView-chevron-97a97",
-	"spacer": "sti-TreeView-spacer-29b18",
-	"meta": "sti-TreeView-meta-2e0e4",
-	"box": "sti-TreeView-box-a209f",
-	"empty": "sti-TreeView-empty-da3a0"
+	"keys": "sti-TreeView-keys-5fc06",
+	"root": "sti-TreeView-root-4df6d",
+	"item": "sti-TreeView-item-3536c",
+	"label": "sti-TreeView-label-55a7a",
+	"icon": "sti-TreeView-icon-e3c6f",
+	"row": "sti-TreeView-row-1fb60",
+	"chevron": "sti-TreeView-chevron-f1432",
+	"spacer": "sti-TreeView-spacer-ca971",
+	"meta": "sti-TreeView-meta-8d932",
+	"box": "sti-TreeView-box-2a8da",
+	"empty": "sti-TreeView-empty-44656"
 };
 export { TreeView_module_default as default };

package/dist/components/TurnstileField/TurnstileField.js

@@ -1,9 +1,9 @@
 "use client";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { readContext } from "../_internal/themeContext.js";
 import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { fieldStyles } from "../Field/Field.js";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import TurnstileField_module_default from "./TurnstileField.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";

package/dist/components/UpdatePrompt/UpdatePrompt.js

@@ -1,7 +1,7 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { announce } from "../Alert/announcer.js";
 import { Button } from "../Button/Button.js";
+import { announce } from "../Alert/announcer.js";
 import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
 import UpdatePrompt_module_default from "./UpdatePrompt.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/UploadQueue/UploadQueue.js

@@ -1,13 +1,13 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { Spinner } from "../Spinner/Spinner.js";
+import { Button } from "../Button/Button.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { CloseIcon } from "../../icons/generated/CloseIcon.js";
 import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
 import { announce } from "../Alert/announcer.js";
-import { Button } from "../Button/Button.js";
 import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
 import { FileIcon } from "../../icons/generated/FileIcon.js";
 import { FileSize } from "../FileSize/FileSize.js";

package/dist/components/VirtualList/VirtualList.css

@@ -0,0 +1,83 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-VirtualList-root-1e693 {
+    --sti-virtual-list-h: calc(var(--sti-row-h) * 12);
+    box-sizing: border-box;
+    block-size: var(--sti-virtual-list-h);
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sti-border-control) transparent;
+    overflow-anchor: auto;
+    outline: none;
+    min-inline-size: 0;
+    position: relative;
+    overflow: hidden auto;
+  }
+
+  .sti-VirtualList-root-1e693[data-height="sm"] {
+    --sti-virtual-list-h: calc(var(--sti-row-h) * 8);
+  }
+
+  .sti-VirtualList-root-1e693[data-height="lg"] {
+    --sti-virtual-list-h: calc(var(--sti-row-h) * 20);
+  }
+
+  .sti-VirtualList-root-1e693[data-height="viewport"] {
+    --sti-virtual-list-h: calc(100dvh - var(--sti-height-topbar) - var(--sti-space-8));
+  }
+
+  .sti-VirtualList-root-1e693[data-height="fill"] {
+    --sti-virtual-list-h: 100%;
+  }
+
+  .sti-VirtualList-root-1e693:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  @media (hover: hover) {
+    .sti-VirtualList-root-1e693:hover {
+      scrollbar-color: var(--sti-fg-muted) transparent;
+    }
+  }
+
+  .sti-VirtualList-spacer-426d8 {
+    overflow-anchor: none;
+  }
+
+  .sti-VirtualList-list-b80bb {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flow-root;
+  }
+
+  .sti-VirtualList-item-16c47 {
+    display: flow-root;
+  }
+
+  .sti-VirtualList-empty-62194 {
+    min-block-size: 100%;
+    padding: var(--sti-space-8) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    text-align: center;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-VirtualList-footer-0d80e {
+    min-block-size: var(--sti-control-h-lg);
+    padding: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    place-items: center;
+    display: grid;
+  }
+
+  @media (forced-colors: active) {
+    .sti-VirtualList-root-1e693:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/VirtualList/VirtualList.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, Ref } from "react";
+export interface VirtualListHandle {
+  /** Öğeyi görünüme getirir (`start` üstte, `center` ortada, `nearest` gerektiği kadar). */
+  scrollToIndex: (index: number, align?: "start" | "center" | "nearest") => void;
+}
+export interface VirtualListProps<T> {
+  items: readonly T[];
+  /** Öğenin kalıcı anahtarı (ölçülen yükseklik bununla saklanır). */
+  getKey: (item: T, index: number) => string;
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Listenin adı (zorunlu). */
+  label: string;
+  /** Ölçülmeden önce varsayılan öğe yüksekliği (piksel). Gerçek yükseklik ölçülür. */
+  estimatedItemHeight?: number;
+  /** Görünür alanın üstünde ve altında fazladan çizilen pay (piksel). */
+  overscan?: number;
+  /** Görünür alanın yüksekliği: satır katları, ekran ya da kapsayıcının tamamı. */
+  height?: "sm" | "md" | "lg" | "viewport" | "fill";
+  /** Sona `endThreshold` öğe kala bir kez çağrılır (öğe sayısı artınca yeniden). */
+  onEndReached?: () => void;
+  endThreshold?: number;
+  /** Listenin altında (sanal alanın dışında): yükleniyor göstergesi, son bilgisi. */
+  footer?: ReactNode;
+  /** Öğe yokken. */
+  empty?: ReactNode;
+  /** Sunucu çıktısında çizilen ilk öğe sayısı (JavaScript yüklenmeden görünenler). */
+  initialCount?: number;
+  className?: string;
+  id?: string;
+  ref?: Ref<VirtualListHandle>;
+}
+/**
+ * Binlerce öğelik liste: yalnız görünen öğeler (ve küçük bir pay) çizilir; öğe yükseklikleri
+ * ölçülür (değişken olabilir). Kaydırma tarayıcının kendisidir (tekerlek, dokunma, klavye).
+ * Ekran okuyucu için her öğe sırasını ve toplamı bildirir (`aria-posinset`, `aria-setsize`).
+ * Satır içi stil yok: boşluklar CSSOM ile ayarlanır.
+ */
+export declare function VirtualList<T>({ items, getKey, renderItem, label, estimatedItemHeight, overscan, height, onEndReached, endThreshold, footer, empty, initialCount, className, id, ref }: VirtualListProps<T>): import("react").JSX.Element;

package/dist/components/VirtualList/VirtualList.js

@@ -0,0 +1,166 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { buildOffsets, visibleRange } from "./offsets.js";
+import VirtualList_module_default from "./VirtualList.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+// src/components/VirtualList/VirtualList.tsx
+/**
+* Binlerce öğelik liste: yalnız görünen öğeler (ve küçük bir pay) çizilir; öğe yükseklikleri
+* ölçülür (değişken olabilir). Kaydırma tarayıcının kendisidir (tekerlek, dokunma, klavye).
+* Ekran okuyucu için her öğe sırasını ve toplamı bildirir (`aria-posinset`, `aria-setsize`).
+* Satır içi stil yok: boşluklar CSSOM ile ayarlanır.
+*/
+function VirtualList({ items, getKey, renderItem, label, estimatedItemHeight = 48, overscan = 320, height = "md", onEndReached, endThreshold = 5, footer, empty, initialCount = 20, className, id, ref }) {
+	const t = useMessages();
+	const viewport = useRef(null);
+	const before = useRef(null);
+	const after = useRef(null);
+	const heights = useRef(/* @__PURE__ */ new Map());
+	const [version, setVersion] = useState(0);
+	const [range, setRange] = useState(() => ({
+		start: 0,
+		end: Math.min(items.length, initialCount)
+	}));
+	const keys = useMemo(() => items.map((item, i) => getKey(item, i)), [items, getKey]);
+	const offsets = useMemo(() => buildOffsets(keys.length, (i) => heights.current.get(keys[i] ?? "") ?? estimatedItemHeight), [
+		keys,
+		estimatedItemHeight,
+		version
+	]);
+	const update = useCallback(() => {
+		const el = viewport.current;
+		if (!el) return;
+		const next = visibleRange(offsets, el.scrollTop, el.clientHeight, overscan);
+		setRange((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
+	}, [offsets, overscan]);
+	useLayoutEffect(() => {
+		before.current?.style.setProperty("block-size", `${offsets[range.start] ?? 0}px`);
+		after.current?.style.setProperty("block-size", `${(offsets[keys.length] ?? 0) - (offsets[range.end] ?? 0)}px`);
+	}, [
+		offsets,
+		range,
+		keys.length
+	]);
+	useLayoutEffect(() => update(), [update]);
+	useEffect(() => {
+		const el = viewport.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => update());
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [update]);
+	const frame = useRef(0);
+	const measure = useRef(null);
+	const getMeasure = useCallback(() => {
+		if (measure.current || typeof ResizeObserver === "undefined") return measure.current;
+		measure.current = new ResizeObserver((entries) => {
+			let changed = false;
+			for (const entry of entries) {
+				const el = entry.target;
+				const key = el.dataset.key;
+				if (!key) continue;
+				const h = el.getBoundingClientRect().height;
+				if (h > 0 && heights.current.get(key) !== h) {
+					heights.current.set(key, h);
+					changed = true;
+				}
+			}
+			if (changed) {
+				cancelAnimationFrame(frame.current);
+				frame.current = requestAnimationFrame(() => setVersion((v) => v + 1));
+			}
+		});
+		return measure.current;
+	}, []);
+	useEffect(() => {
+		const ro = getMeasure();
+		for (const el of viewport.current?.querySelectorAll("[data-key]") ?? []) ro?.observe(el);
+		return () => {
+			ro?.disconnect();
+			measure.current = null;
+			cancelAnimationFrame(frame.current);
+		};
+	}, [getMeasure]);
+	const observe = useCallback((el) => {
+		if (!el) return;
+		getMeasure()?.observe(el);
+		return () => measure.current?.unobserve(el);
+	}, [getMeasure]);
+	const endFor = useRef(-1);
+	useEffect(() => {
+		if (!onEndReached || items.length === 0) return;
+		if (range.end >= items.length - endThreshold && endFor.current !== items.length) {
+			endFor.current = items.length;
+			onEndReached();
+		}
+	}, [
+		range.end,
+		items.length,
+		endThreshold,
+		onEndReached
+	]);
+	useImperativeHandle(ref, () => ({ scrollToIndex: (index, align = "start") => {
+		const el = viewport.current;
+		if (!el || index < 0 || index >= keys.length) return;
+		const top = offsets[index] ?? 0;
+		const bottom = offsets[index + 1] ?? top;
+		let target = top;
+		if (align === "center") target = top - (el.clientHeight - (bottom - top)) / 2;
+		else if (align === "nearest") {
+			if (top >= el.scrollTop && bottom <= el.scrollTop + el.clientHeight) return;
+			target = top < el.scrollTop ? top : bottom - el.clientHeight;
+		}
+		el.scrollTop = Math.max(0, target);
+		update();
+	} }), [
+		keys.length,
+		offsets,
+		update
+	]);
+	const shown = [];
+	for (let i = range.start; i < Math.min(range.end, items.length); i++) {
+		const item = items[i];
+		const key = keys[i] ?? String(i);
+		shown.push(/* @__PURE__ */ jsx("li", {
+			ref: observe,
+			"aria-posinset": i + 1,
+			"aria-setsize": items.length,
+			"data-key": key,
+			className: VirtualList_module_default.item,
+			children: renderItem(item, i)
+		}, key));
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		ref: viewport,
+		className: [VirtualList_module_default.root, className].filter(Boolean).join(" "),
+		"data-height": height,
+		tabIndex: 0,
+		"aria-label": label,
+		onScroll: update,
+		children: [items.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: VirtualList_module_default.empty,
+			children: empty ?? t.listViewEmpty
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: before,
+				"aria-hidden": "true",
+				className: VirtualList_module_default.spacer
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: VirtualList_module_default.list,
+				children: shown
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: after,
+				"aria-hidden": "true",
+				className: VirtualList_module_default.spacer
+			})
+		] }), footer ? /* @__PURE__ */ jsx("div", {
+			className: VirtualList_module_default.footer,
+			children: footer
+		}) : null]
+	});
+}
+export { VirtualList };