@stisocial/ui 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,74 @@
 Sürüm numaraları anlamlıdır: kırıcı değişiklik yalnız büyük sürümde, önceden kullanımdan kaldırma
 uyarısıyla gelir. `1.0`'a kadar (dalga 2 sonu) küçük sürümler de kırıcı olabilir; burada yazılır.
 
+## 0.3.0 — 2026-11-15
+
+Bileşen gözden geçirmesinin tamamı (gruplar 1–23): envanterdeki eksik bileşenler yazıldı, mevcutlar açık/koyu ve dar ekranda denetlenip düzeltildi.
+
+- **Yeni belge bileşenleri:** CoverPage, DocumentToc, NumberedClauses, SignatureBlock, QuoteTemplate, InvoiceTemplate, ReportTemplate, ContractTemplate (`@stisocial/ui/document`).
+- **MapView:** karolar arasında alt piksel boşluğu kalmaz; katalog örnek karoları gerçekçi çizimle.
+- **Yeni e-ticaret bileşenleri:** ProductCard, ProductGallery, SizeGuide, ProductReviews, CartItem, CartSummary, CouponField, CartDrawer, CheckoutSteps, BillingTypeToggle, ShippingOptions, PaymentMethodSelect, InstallmentTable, OrderSummary, OrderTracker (`@stisocial/ui/commerce`).
+- **Site örnekleri:** AnnouncementBar kapatılamaz örneği, SiteFooter bülten ve sosyal bağlantı örneği.
+- **Yeni site bileşenleri:** Hero, Showreel, CountUp, StatsBand, CtaBand, Marquee, BentoGrid, FeatureGrid, FeatureSplit, LogoCloud, AwardsStrip, PressMentions, Testimonial, CaseStudyCard, PortfolioGrid, ServiceCard, ProcessSteps, TeamGrid, SocialLinks, PricingSection, ComparisonTable, Faq, CareerList, EventCard, Gallery, JsonLd, BlogCard, ArticleLayout, AuthorBox, RelatedPosts, ShareBar, NewsletterForm, ContactForm, AuroraMesh, Reveal, ScrollProgress, OgImage (`@stisocial/ui/site`).
+- **Select, ModelSelect:** `hideLabel`; ModelSelect geçersizken "Bir model seçin." yazar (`errorMessage`).
+- **Yapay zekâ arayüzü düzeltmeleri:** AttachmentChip yükleme yüzdesi çakışması, ToolCallCard dar kap başlığı, ChatThread ortalı boş durum.
+- **Ajans, parti E:** CampaignCard, BudgetTracker (`budgetPace`), ChannelPerformanceTable (`channelMetrics`, `totalRow`), UtmBuilder (`normalizeUtm`, `buildUtmUrl`), TimeTracker (`formatClockDuration`).
+- **Ajans, parti D:** AssetCard, AssetLibrary (`filterAssets`), AssetPicker, ColorPaletteDisplay (`hexToRgb`, `contrastRatio`, `contrastLevel`), BrandKitViewer.
+- **Ajans, parti C:** ApprovalFlow, ApprovalActions, RevisionHistory, AnnotationLayer, BriefForm.
+- **Ajans, parti B:** HashtagInput, PublishScheduler, ContentCalendar, PostComposer.
+- **CalendarView:** hafta görünümü sütun başlıklarının erişilebilir adı görünür metinle başlar (WCAG 2.5.3).
+- **Yeni ajans bileşenleri (`@stisocial/ui/agency`), parti A:** MetaAdPreview, GoogleSearchAdPreview, GoogleDisplayAdPreview, SerpPreview, LinkPreview, SafeZoneOverlay, PlatformCharacterLimit; `displayDomain`, `checkPlatformLimits`, `SAFE_ZONES`, `SEARCH_AD_LIMITS`, `META_AD_LIMITS`, `SERP_LIMITS` dışa açık.
+- **Yeni editörler (`@stisocial/ui/editor`):** RichTextEditor (güvenli çıktı; `sanitizeRichText`, `safeHref`, `richTextToPlain` dışa açık) ve CommentComposer (anma, dosya ekleri, Ctrl+Enter).
+- **Yeni medya bileşenleri (`@stisocial/ui/media`):** Embed (gizlilik modunda YouTube ve Vimeo; `parseEmbedUrl`, `embedSrc`, `watchUrl` dışa açık), ImageCompare, ImageCropper (`cropToBlob` ve kırpma geometrisi dışa açık), ZoomableImage, PdfViewer, MockupFrame.
+- **Medya düzeltmeleri:** `data:` kapak görseli artık izin istemez; AudioPlayer yükleme hatası ikonlu satırla; dar oynatıcıda atlama düğmeleri gizlenir.
+- **Yeni STI ID parçaları (`@stisocial/ui/id`):** SignInMethods, ReauthDialog, VerifyEmailBanner, OrgInvitation, PasskeyButton, SessionList, DeviceList, ConnectedApps, ApiKeyList (yeni anahtar bir kez gösterilir), TwoFactorSetup, RecoveryCodes (kopyalama, .txt indirme, onay), SecurityCheckup, ConsentScreen (OAuth izin ekranı; alan adı ve güvenli bağlantı denetimi, `safeHost` dışa açık), ProfileCard, CookieConsent (KVKK; eşit ağırlıkta ret, kategori anahtarları), AccountAuditLog.
+- **AuditLogList:** `hideActor` (işlemi yapan satırı gizlenir) ve kayıt başına `resultLabel`.
+- **InviteMembers:** `defaultEmails` ile alan önceden doldurulabilir.
+- **WhatsNew:** süzgeç segmentleri geniş kapta kısaltılmaz.
+- **MasterDetail:** katalog örneği ListView ile, seçili kayıtla açılır.
+- **Yeni grafikler (`@stisocial/ui/charts`):** Sparkline (özetli img), DonutChart (halka/pasta, ortada toplam), Gauge (meter rolü, eşik bantları, hedef), BulletChart (gerçekleşen/hedef/nitel aralık), ScatterChart (saçılım ve kabarcık), Heatmap (beş basamaklı ton, ızgara gezinmesi), CalendarHeatmap (yıllık günlük yoğunluk, aylık özet tablosu), FunnelChart (geçiş oranları), WaterfallChart (artış/azalış/toplam, birikim çizgileri), RadarChart, Treemap (karelendirilmiş yerleşim), SankeyChart (akış bantları), GeoChart (Türkiye il haritası ve en yüksek iller). Saf yardımcılar `squarify`, `sankeyLayout`, `linkPath`, `linkTopAt` dışa açık.
+- **Düzeltme:** grafik çerçevesinin başlığı `header` yerine `div` (aynı sayfada iki başlıklı grafikte yinelenen banner yer işareti).
+- **Yeni: Gantt.** Gantt çizelgesi: görevler gerçek tabloda (başlangıç, bitiş, ilerleme; bağımlılıklar ve kilometre taşı ekran okuyucuya metinle), yanında zaman çizelgesi: ilerlemeli çubuklar, kilometre taşı, SVG bağımlılık okları, bugün çizgisi; gün, hafta ve ay ölçeği; yapışkan görev sütunu; konumlar CSSOM ile.
+- **Yeni: CalendarView.** Takvim: ay, hafta ve gün görünümü; tüm gün ve çok günlü etkinlik şeritleri, çakışan etkinlikler yan yana, şimdiki zaman çizgisi, "+N daha", Bugün/önceki/sonraki ve görünüm seçimi; dar kapta noktalar ve yatay kayan hafta; hesap saat dilimindeki sivil tarih üzerinden (sunucu ve tarayıcı aynı), konumlar CSSOM ile. Saf takvim yardımcıları dışa açık.
+- **Yeni: DataGrid.** Düzenlenebilir veri ızgarası (APG Data Grid): oklarla gezinme, Enter/F2/yazarak düzenleme, Enter aşağı ve Tab yana kaydederek ilerleme, Escape, Delete, Ctrl+C/Ctrl+V; metin, sayı (yerel yazım) ve seçim düzenleyicileri; sütun doğrulaması (hata hemen okunur), salt okunur sütun ve ızgara.
+- **Yeni: FilePreview.** Dosya ön izlemesi: görsel, PDF (yedek açıklamalı), video, ses, CSV (tablo, sayısal sütunlar sona hizalı), JSON ve kod (renklendirilmiş), düz metin; desteklenmeyen türde ve güvensiz adreste açıklama; başlıkta tür, boyut, yeni sekmede açma ve indirme. Adres şeması denetlenir. Saf `mimeOf`, `previewKind`, `isSafePreviewUrl`, `parseCsv` dışa açık.
+- **Yeni: Kanban.** Pano: sütunlar arası ve sütun içinde erişilebilir sürükle-bırak (klavyeyle de), sürüklemesiz "Sütuna taşı" menüsü (WCAG 2.5.7), sütun sınırı (WIP) ve aşım uyarısı, boş sütun hedefi, kart ayrıntısı için eylem. Saf `moveCards` dışa açık.
+- **CSP:** sürükleme tutamacının `pointer-events:none` stili `CSP_STYLE_ATTR_HASHES`'e ve paketin genel kurallarına eklendi (ListView, Kanban).
+- **Düzeltme:** DataTable'ın saf modülü `tableData.ts` oldu (Windows'ta `DataTable.js` ile çakışıyordu).
+- **Yeni: PivotTable.** Çapraz tablo: bir ya da iki satır alanı ve isteğe bağlı sütun alanı; toplam, sayı, ortalama, en küçük, en büyük; ara ve genel toplamlar, veri ya da alfabetik grup sırası, isteğe bağlı ısı tonu (değer her zaman metin); yalnız veri alır. Saf `pivot`, `aggregateValue`, `heatLevel` dışa açık.
+- **Yeni: TreeTable.** Ağaç tablo (APG Treegrid): ağaç sütununda açma oku ve düzeye göre girinti (sıkı CSP'de de doğru), DataTable sütun tanımları ve görünüşü, her düzeyde kardeşler arasında sıralama, tümünü genişlet/daralt, seçim ve satır eylemi.
+- **Düzeltme: TreeView, JsonViewer — sıkı CSP'de girinti.** Düzey artık React Aria'nın `data-level` özniteliğinden CSS ile hesaplanır (`--sti-tree-level`); satır içi `--tree-item-level` engellense de girinti doğrudur.
+- **Yeni: DataTable.** Veri tablosu (APG Grid): sütuna göre sıralama (Türkçe ve doğal sıra), Türkçe duyarsız arama ve sonuç duyurusu, sayfalama, sayfalar arası korunan seçim ve toplu işlem çubuğu, satır eylemi, sütun gizleme, kayıtlı görünümler, CSV dışa aktarma (formül enjeksiyonuna karşı korumalı, BOM'lu), yükleniyor ve boş durumları; sunucu tarafı kip (`totalCount`, `onQueryChange`). Saf `sortRows`, `filterRows`, `pageRows`, `csvCell`, `toCsv` dışa açık.
+- **CSP:** React Aria tablo satırının `--table-row-level:1` stili `CSP_STYLE_ATTR_HASHES`'e eklendi. ListView hücre stili paketin genel kuralına bağlandı.
+- **Yeni: VirtualList.** Binlerce öğelik liste: yalnız görünen öğeler çizilir, değişken yükseklikler ölçülür, kaydırma tarayıcının kendisidir; `aria-posinset`/`aria-setsize` ile gerçek sıra, `scrollToIndex`, sona yaklaşınca `onEndReached`, alt bilgi ve boş durum; sunucu çıktısında ilk öğeler; satır içi stil yok (CSSOM). Saf `buildOffsets`, `indexAt`, `visibleRange` dışa açık.
+- **Yeni: ListView.** Etkileşimli liste (APG Grid): tek ya da çoklu seçim (onay kutusu, Shift aralığı, Ctrl+A), satır eylemi ve bağlantılı satır, → ile ulaşılan satır içi eylemler, baş/ad/açıklama/ikincil bilgi yuvaları, çerçeveli ve çerçevesiz görünüş, erişilebilir sürükle-bırak sıralama (klavyeyle de); dar kapta ikincil bilgi gizlenir. Saf `moveKeys` dışa açık.
+- **Yeni: Carousel.** Slayt gösterisi (APG Carousel): kaydırma yaslamalı şerit (dokunma ve iz ped), önceki/sonraki düğmeleri, slayt göstergeleri, şeritte ← → ile geçiş, yandaki slaytı gösteren boylar (dar kapta otomatik genişler); isteğe bağlı otomatik geçiş duraklatılabilir, üzerine gelince, odakta, sekme gizliyken ve hareketi azaltma tercihinde durur; slayt değişimi canlı bölgeden duyurulur; satır içi stil yok.
+- **Yeni: Comparison.** Karşılaştırma tablosu: 2–4 öğe yan yana, bölümlü özellik satırları, sayısal satırda en iyi değer (yüksek ya da düşük yönde), var/yok ikonları, Yalnız farkları göster, yapışkan özellik sütunu ve dar kapta yatay kaydırma; görünen değerler `display` ile (sunucudan aktarılabilir). Saf `bestItems`, `isUniform` dışa açık.
+- **Yeni: QrCode.** QR kodu: kütüphanenin içinde bağımlılıksız kodlayıcı (UTF-8 bayt kipi, L/M/Q/H, sürüm 1–40, standart maske seçimi), SVG çıktı, koyu temada ve zorunlu renklerde de açık zemin; sığmayan veride açıklayıcı kutu. Kodlayıcı, başvuru kodlayıcıyla (uqr, yalnız geliştirme bağımlılığı) modül modül doğrulanır. Saf `encodeQr`, `encodeQrText`, `qrPath` dışa açık.
+- **Yeni: Image.** Görsel: tembel yükleme, önceden ayrılan yer, oran ve yerleşim, bulanık ön izleme ya da sakin zemin, yüklenince yumuşak belirme (sunucu çıktısında hep görünür), yüklenemezse açıklayıcı kutu; satır içi stil yok.
+- **Yeni: DiffViewer.** Fark görüntüleyici: satır farkı (LCS), birleşik ve yan yana görünüm, eklenen/silinen satırlar renk, işaret ve ekran okuyucu metniyle, değişmemiş uzun bölümleri katlama, özet; büyük girdide donmaz. Saf `diffLines` dışa açık.
+- **Yeni: JsonViewer.** JSON görüntüleyici: açılıp kapanan ağaç (APG Tree), türüne göre renkli değerler, kapalı düğümde öğe sayısı, bütün JSON'u kopyalama, yükseklik sınırı; döngüsel başvuruda çökmez. Saf dönüşüm `toJsonTree` dışa açık.
+- **TreeView:** açık dalda → tuşunun ilk çocuğa inmesini sağlayan işleyici ortak iç dosyaya taşındı (davranış aynı).
+- **Yeni: FilterBar.** Süzme çubuğu: arama, seçili değerleri gösteren süzgeç düğmeleri (tek ya da çoklu seçimli menü), sonuç sayısı ve Tümünü temizle; etkin süzgeç sayısı duyurulur. Yeni metinler `filterBarCleared`, `filterBarResults`, `filterBarSelected`, `filterBarSearch`.
+- **Yeni: BulkActionBar.** Toplu işlem çubuğu: seçim varken belirir; Seçimi kaldır, seçim sayısı, Bütün N öğeyi seçin ve eylemler (APG Toolbar); satır içi ya da ekranın altında süzülen (ters zemin); seçim değişiklikleri her zaman var olan canlı bölgeden duyurulur. Yeni metinler `bulkActionBarLabel`, `bulkActionBarSelectAll`, `bulkActionBarClear`, `bulkActionBarCleared`.
+- **Yeni: SortMenu.** Sıralama seçimi: alanı seçen açılır menü (tek seçimli) ve yönü değiştiren düğme, bitişik grup; yeni metinler `sortMenuLabel`, `sortMenuTrigger`, `sortMenuDirection`, `sortAscending`, `sortDescending`.
+- **Yeni: CodeBlock.** Kod bloğu: sözdizimi renklendirme (TypeScript, JavaScript, JSON, CSS, HTML, SQL, Bash; dış bağımlılık yok), kopyalama, satır numaraları (kopyalanan metne girmez), vurgulu satırlar, sarma ve yükseklik sınırı; yeni metinler `codeBlockCopy`, `codeBlockLabel`.
+- **Yeni: AuditLogList.** Denetim kaydı: işlem ve sonuç rozeti, kişi ve hedef, tam zaman, IP, konum, cihaz; açılır Ayrıntılar (APG Disclosure); `maskIp` ve dışa açık `maskIpAddress` ile IP'nin son kısmı gizlenir (KVKK).
+- **Yeni: ActivityFeed.** Etkinlik akışı: güne göre gruplar (Bugün, Dün, tarih), avatar ve işlem rozeti, kalın ad, eylem cümlesi, kendini güncelleyen göreli zaman, alıntı kutusu ve "Daha fazla göster"; yeni metin `activityFeedLoadMore`.
+- **Yeni: Timeline.** Zaman çizelgesi: tonlu işaret, başlık, zaman (`time`), açıklama ve ek içerik; bulunulan olay vurgulanır (`aria-current="step"`), gelecek olaylar kesik çizgiyle bağlanır; `sm` ve `md` yoğunluk.
+- **SideNav yenilendi:** sakin ikonlar; alt öğeler ince kılavuz çizginin yanında, yazıları grup yazısıyla aynı hizada; bulunulan alt öğe çizgide turkuaz parçayla işaretli; sayı rozetleri sakin gri (`NavBadge` `tone="neutral"`); grup oku kapalıyken yana bakar.
+- **AppShell / AppHeader:** yan gezinme 48rem ve üstü kapta görünür (önce 64rem); menü düğmesi 48rem altında.
+- **FileUpload:** bırakma alanının kesik kenarı inceltildi; ikon yuvarlak karoda, sürüklerken turkuaz.
+- **Yazı bileşenleri:** Heading, Text, Eyebrow, Accent, Code ve Kbd için katalog örnekleri, tanım belgeleri ve tarayıcı testleri (axe × dört görünüş, 320 pikselde taşmama) eklendi; bu bileşenler artık katalogda görünür. VisuallyHidden için de örnek ve tanım eklendi.
+- **Field:** alan parçaları (FieldLabel, FieldDescription, FieldErrorText) için katalog örneği ve tanım; TextField tanımı.
+- **Spinner:** katalog örneği, tanım ve tarayıcı testi.
+- **Tour:** etkin adımın hedefi turkuaz halkayla vurgulanır.
+- **TreeView:** çoklu seçimde altında seçili düğüm olan dal yarı seçili (eksi) gösterilir ve "kısmen seçili" okunur; yeni metin `treePartial`.
+- **Tarih ve saat alanları:** saat, gün ve ay her zaman iki haneli yazılır (09:05, 05.11.2026).
+- **Tek satırlı alanlar ve Combobox:** taşan değer odak dışında üç noktayla biter (önce kesik kalıyordu).
+- **TransferList:** iki liste eş yükseklikte.
+- **Masonry:** katalogdaki portföy örneği künyeli, renkli proje karolarıyla yenilendi.
+
 ## 0.2.1 — 2026-11-13
 
 - **STI ID parçaları yeniden tasarlandı** (`/id`; mevcut API korunur, eklemeler):

package/dist/agency/AnnotationLayer/AnnotationLayer.css

@@ -0,0 +1,209 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AnnotationLayer-root-368a0 {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-AnnotationLayer-stage-132f9 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    align-self: start;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-AnnotationLayer-stage-132f9[data-adding] {
+    cursor: crosshair;
+  }
+
+  .sti-AnnotationLayer-image-ff708 {
+    -webkit-user-select: none;
+    user-select: none;
+    block-size: auto;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-AnnotationLayer-pin-eac4e {
+    --sti-pin-x: 0%;
+    --sti-pin-y: 0%;
+    inline-size: var(--sti-space-8);
+    block-size: var(--sti-space-8);
+    border: var(--sti-border-width-strong) solid var(--sti-bg-surface);
+    border-radius: var(--sti-radius-pill) var(--sti-radius-pill) var(--sti-radius-pill) 0;
+    background: var(--sti-fill-accent);
+    box-shadow: var(--sti-shadow-md);
+    color: var(--sti-fg-on-accent);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-bold);
+    transition: scale var(--sti-duration-fast) var(--sti-ease-out);
+    place-items: center;
+    padding: 0;
+    display: inline-grid;
+    position: absolute;
+    inset-block-start: var(--sti-pin-y);
+    inset-inline-start: var(--sti-pin-x);
+    translate: 0 -100%;
+  }
+
+  .sti-AnnotationLayer-pin-eac4e:not([data-placed]) {
+    visibility: hidden;
+  }
+
+  .sti-AnnotationLayer-pin-eac4e[data-selected] {
+    z-index: 2;
+    scale: 1.2;
+  }
+
+  .sti-AnnotationLayer-pin-eac4e[data-resolved] {
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg-success-strong);
+    opacity: .85;
+  }
+
+  .sti-AnnotationLayer-pin-eac4e[data-draft] {
+    z-index: 3;
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+  }
+
+  .sti-AnnotationLayer-pin-eac4e:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-AnnotationLayer-side-4cbd8 {
+    align-content: start;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-AnnotationLayer-form-32668 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    display: grid;
+  }
+
+  .sti-AnnotationLayer-hint-678d3, .sti-AnnotationLayer-empty-a1dd7 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  .sti-AnnotationLayer-formActions-87eb1, .sti-AnnotationLayer-noteActions-e48b4 {
+    justify-content: flex-end;
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-AnnotationLayer-list-fa659 {
+    gap: var(--sti-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-AnnotationLayer-note-cea8d {
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    grid-template-columns: auto minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-AnnotationLayer-note-cea8d[data-selected] {
+    border-color: var(--sti-fill-accent);
+    box-shadow: 0 0 0 var(--sti-border-width) var(--sti-fill-accent);
+  }
+
+  .sti-AnnotationLayer-note-cea8d[data-resolved] .sti-AnnotationLayer-text-79b74 {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-AnnotationLayer-number-d98bc {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-bold);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-AnnotationLayer-noteBody-eff9b {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-AnnotationLayer-noteHead-689cd {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-AnnotationLayer-author-8ddaf {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-AnnotationLayer-resolved-6afec {
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-success-subtle);
+    color: var(--sti-fg-success-strong);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-AnnotationLayer-text-79b74 {
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  @media (width >= 60rem) {
+    .sti-AnnotationLayer-root-368a0 {
+      grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-AnnotationLayer-pin-eac4e {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-AnnotationLayer-pin-eac4e {
+      forced-color-adjust: none;
+      border-color: canvastext;
+    }
+
+    .sti-AnnotationLayer-note-cea8d[data-selected] {
+      outline: var(--sti-border-width-strong) solid Highlight;
+    }
+  }
+}

package/dist/agency/AnnotationLayer/AnnotationLayer.d.ts

@@ -0,0 +1,35 @@
+export interface Annotation {
+  id: string;
+  /** Konum (yüzde; görselin sol üstünden). */
+  x: number;
+  y: number;
+  author: string;
+  text: string;
+  resolved?: boolean;
+}
+export interface AnnotationLayerProps {
+  src: string;
+  alt: string;
+  annotations: readonly Annotation[];
+  /** Verilirse yeni not eklenebilir. */
+  onAdd?: (note: {
+    x: number;
+    y: number;
+    text: string;
+  }) => void;
+  /** Notu çözüldü olarak işaretler. */
+  onResolve?: (id: string) => void;
+  selectedId?: string | null;
+  onSelect?: (id: string | null) => void;
+  /** Çözülmüş notlar gösterilsin mi. Varsayılan `true`. */
+  showResolved?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Görsel üzerine yorum iğnesi (tasarım geri bildirimi): numaralı iğneler görselin üstünde, notlar
+ * yanda aynı numaralarla. "Not ekleyin" kipinde görsele tıklanan yere (klavyede ortadan başlayıp
+ * oklarla taşınan) taslak iğne konur ve not yazılır. İğne ve liste maddesi birbirini vurgular;
+ * notlar çözüldü olarak işaretlenebilir. Konumlar CSSOM ile yazılır.
+ */
+export declare function AnnotationLayer({ src, alt, annotations, onAdd, onResolve, selectedId, onSelect, showResolved, className, id }: AnnotationLayerProps): import("react").JSX.Element;

package/dist/agency/AnnotationLayer/AnnotationLayer.js

@@ -0,0 +1,226 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { TextArea } from "../../components/TextArea/TextArea.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { cx } from "../_shared/Preview.js";
+import AnnotationLayer_module_default from "./AnnotationLayer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+// src/agency/AnnotationLayer/AnnotationLayer.tsx
+const clamp = (v) => Math.min(100, Math.max(0, Math.round(v * 10) / 10));
+const STEP = 2;
+/**
+* Görsel üzerine yorum iğnesi (tasarım geri bildirimi): numaralı iğneler görselin üstünde, notlar
+* yanda aynı numaralarla. "Not ekleyin" kipinde görsele tıklanan yere (klavyede ortadan başlayıp
+* oklarla taşınan) taslak iğne konur ve not yazılır. İğne ve liste maddesi birbirini vurgular;
+* notlar çözüldü olarak işaretlenebilir. Konumlar CSSOM ile yazılır.
+*/
+function AnnotationLayer({ src, alt, annotations, onAdd, onResolve, selectedId, onSelect, showResolved = true, className, id }) {
+	const t = useMessages();
+	const [innerSel, setInnerSel] = useState(null);
+	const selected = selectedId !== void 0 ? selectedId : innerSel;
+	const [adding, setAdding] = useState(false);
+	const [draft, setDraft] = useState(null);
+	const [text, setText] = useState("");
+	const draftRef = useRef(null);
+	const shown = annotations.filter((a) => showResolved || !a.resolved);
+	const numberOf = (aid) => annotations.findIndex((a) => a.id === aid) + 1;
+	const select = (aid) => {
+		if (selectedId === void 0) setInnerSel(aid);
+		onSelect?.(aid);
+	};
+	const place = useCallback((pos) => (el) => {
+		if (!el) return;
+		el.style.setProperty("--sti-pin-x", `${pos.x}%`);
+		el.style.setProperty("--sti-pin-y", `${pos.y}%`);
+		el.dataset.placed = "";
+	}, []);
+	const startAdding = () => {
+		setAdding(true);
+		setDraft({
+			x: 50,
+			y: 50
+		});
+		setText("");
+		requestAnimationFrame(() => draftRef.current?.focus());
+	};
+	const cancel = () => {
+		setAdding(false);
+		setDraft(null);
+		setText("");
+	};
+	const onStageClick = (e) => {
+		if (!adding) return;
+		const r = e.currentTarget.getBoundingClientRect();
+		setDraft({
+			x: clamp((e.clientX - r.left) / r.width * 100),
+			y: clamp((e.clientY - r.top) / r.height * 100)
+		});
+	};
+	const onDraftKey = (e) => {
+		if (!draft) return;
+		const d = {
+			ArrowLeft: [-2, 0],
+			ArrowRight: [STEP, 0],
+			ArrowUp: [0, -2],
+			ArrowDown: [0, STEP]
+		}[e.key];
+		if (d) {
+			e.preventDefault();
+			setDraft({
+				x: clamp(draft.x + d[0]),
+				y: clamp(draft.y + d[1])
+			});
+		} else if (e.key === "Escape") cancel();
+	};
+	const save = () => {
+		if (!draft || !text.trim()) return;
+		onAdd?.({
+			x: draft.x,
+			y: draft.y,
+			text: text.trim()
+		});
+		cancel();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(AnnotationLayer_module_default.root, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: AnnotationLayer_module_default.stage,
+			"data-adding": adding ? "" : void 0,
+			onClick: onStageClick,
+			children: [
+				/* @__PURE__ */ jsx("img", {
+					className: AnnotationLayer_module_default.image,
+					src,
+					alt,
+					draggable: false
+				}),
+				shown.map((a) => /* @__PURE__ */ jsx("button", {
+					ref: place(a),
+					type: "button",
+					className: AnnotationLayer_module_default.pin,
+					"data-selected": selected === a.id ? "" : void 0,
+					"data-resolved": a.resolved ? "" : void 0,
+					"aria-label": template(t.agencyAnnotationPin, {
+						number: numberOf(a.id),
+						author: a.author
+					}),
+					"aria-pressed": selected === a.id,
+					onClick: (e) => {
+						e.stopPropagation();
+						select(selected === a.id ? null : a.id);
+					},
+					children: a.resolved ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : numberOf(a.id)
+				}, a.id)),
+				draft ? /* @__PURE__ */ jsx("button", {
+					ref: (el) => {
+						draftRef.current = el;
+						place(draft)(el);
+					},
+					type: "button",
+					className: AnnotationLayer_module_default.pin,
+					"data-draft": "",
+					"aria-label": t.agencyAnnotationDraft,
+					"aria-describedby": `${id ?? "ann"}-draft-hint`,
+					onKeyDown: onDraftKey,
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: AnnotationLayer_module_default.side,
+			children: [onAdd ? adding ? /* @__PURE__ */ jsxs("div", {
+				className: AnnotationLayer_module_default.form,
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						id: `${id ?? "ann"}-draft-hint`,
+						className: AnnotationLayer_module_default.hint,
+						children: t.agencyAnnotationHint
+					}),
+					/* @__PURE__ */ jsx(TextArea, {
+						label: t.agencyAnnotationText,
+						value: text,
+						onChange: setText,
+						minRows: 3,
+						isRequired: true
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: AnnotationLayer_module_default.formActions,
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							onPress: cancel,
+							children: t.commentCancel
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "sm",
+							isDisabled: !text.trim(),
+							onPress: save,
+							children: t.agencyAnnotationSave
+						})]
+					})
+				]
+			}) : /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+				onPress: startAdding,
+				children: t.agencyAnnotationAdd
+			}) : null, shown.length ? /* @__PURE__ */ jsx("ol", {
+				className: AnnotationLayer_module_default.list,
+				"aria-label": t.agencyAnnotations,
+				children: shown.map((a) => /* @__PURE__ */ jsxs("li", {
+					className: AnnotationLayer_module_default.note,
+					"data-selected": selected === a.id ? "" : void 0,
+					"data-resolved": a.resolved ? "" : void 0,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: AnnotationLayer_module_default.number,
+						"aria-hidden": "true",
+						children: numberOf(a.id)
+					}), /* @__PURE__ */ jsxs("div", {
+						className: AnnotationLayer_module_default.noteBody,
+						children: [
+							/* @__PURE__ */ jsxs("p", {
+								className: AnnotationLayer_module_default.noteHead,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: AnnotationLayer_module_default.author,
+									children: a.author
+								}), a.resolved ? /* @__PURE__ */ jsx("span", {
+									className: AnnotationLayer_module_default.resolved,
+									children: t.agencyAnnotationResolved
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: AnnotationLayer_module_default.text,
+								children: a.text
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: AnnotationLayer_module_default.noteActions,
+								children: [/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									onPress: () => select(selected === a.id ? null : a.id),
+									children: selected === a.id ? t.agencyAnnotationHide : t.agencyAnnotationShow
+								}), onResolve && !a.resolved ? /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									iconStart: /* @__PURE__ */ jsx(CheckIcon, {}),
+									onPress: () => onResolve(a.id),
+									children: t.agencyAnnotationResolve
+								}) : null]
+							})
+						]
+					})]
+				}, a.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: AnnotationLayer_module_default.empty,
+				children: t.agencyAnnotationEmpty
+			})]
+		})]
+	});
+}
+export { AnnotationLayer };

package/dist/agency/AnnotationLayer/AnnotationLayer.module.js

@@ -0,0 +1,23 @@
+import './AnnotationLayer.css';
+// src/agency/AnnotationLayer/AnnotationLayer.module.css
+var AnnotationLayer_module_default = {
+	"root": "sti-AnnotationLayer-root-368a0",
+	"stage": "sti-AnnotationLayer-stage-132f9",
+	"image": "sti-AnnotationLayer-image-ff708",
+	"pin": "sti-AnnotationLayer-pin-eac4e",
+	"side": "sti-AnnotationLayer-side-4cbd8",
+	"form": "sti-AnnotationLayer-form-32668",
+	"hint": "sti-AnnotationLayer-hint-678d3",
+	"empty": "sti-AnnotationLayer-empty-a1dd7",
+	"formActions": "sti-AnnotationLayer-formActions-87eb1",
+	"noteActions": "sti-AnnotationLayer-noteActions-e48b4",
+	"list": "sti-AnnotationLayer-list-fa659",
+	"note": "sti-AnnotationLayer-note-cea8d",
+	"text": "sti-AnnotationLayer-text-79b74",
+	"number": "sti-AnnotationLayer-number-d98bc",
+	"noteBody": "sti-AnnotationLayer-noteBody-eff9b",
+	"noteHead": "sti-AnnotationLayer-noteHead-689cd",
+	"author": "sti-AnnotationLayer-author-8ddaf",
+	"resolved": "sti-AnnotationLayer-resolved-6afec"
+};
+export { AnnotationLayer_module_default as default };

package/dist/agency/ApprovalActions/ApprovalActions.css

@@ -0,0 +1,16 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ApprovalActions-root-2191b {
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ApprovalActions-buttons-c77af {
+    justify-content: flex-end;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+}

package/dist/agency/ApprovalActions/ApprovalActions.d.ts

@@ -0,0 +1,22 @@
+export type ApprovalDecision = "approved" | "changes";
+export interface ApprovalActionsProps {
+  /** Onaylar (söz dönerse beklenir; reddedilirse hata yazılır). */
+  onApprove: (note: string) => void | Promise<void>;
+  /** Revizyon ister; not zorunludur. */
+  onRequestChanges: (note: string) => void | Promise<void>;
+  /** Verilmiş karar (denetimli); karar sonrası eylemler kalkar, sonuç yazılır. */
+  decision?: ApprovalDecision | null;
+  /** Onay notunu sunar (isteğe bağlı not alanı). Varsayılan `true`. */
+  allowApproveNote?: boolean;
+  /** Revizyon notunun en az uzunluğu. Varsayılan 10. */
+  minNoteLength?: number;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Onay eylemleri: "Onaylayın" ve "Revizyon isteyin". Revizyon isteğinde ne değişmesi gerektiğini
+ * anlatan not zorunludur; onayda not isteğe bağlıdır. Karar verilince düğmeler kalkar ve sonuç
+ * metinle (ekran okuyucuya duyurularak) yazılır.
+ */
+export declare function ApprovalActions({ onApprove, onRequestChanges, decision, allowApproveNote, minNoteLength, isDisabled, className, id }: ApprovalActionsProps): import("react").JSX.Element;