@stisocial/ui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.2.0 — 2026-11-13
+
+93 yeni bileşen; hazır sayısı 339/485. Yeni alt yollar ana girişe girmez, yalnız kendi yolundan içe aktarılır: `/charts`, `/id`, `/ai`, `/media`, `/editor`, `/agency`, `/site`, `/commerce`, `/maps`, `/email`, `/document`.
+
+- **Veri gösterimi (ana giriş, 7):** PersonItem, Table, LinkRows, FileList, Figure, Accordion, Disclosure.
+- **Uygulama kalıpları (ana giriş, 4):** ErrorPage, FeedbackWidget, TrashView, WhatsNew.
+- **Grafikler (`/charts`, 8; bağımlılıksız SVG):** ChartLegend, ChartTooltip, ChartTable, LineChart, AreaChart, BarChart, StackedBarChart, ComboChart. Tek odak durağı ve ok tuşlarıyla veri noktası gezinmesi, Grafik/Tablo geçişi, boş ve yükleniyor durumu, zorunlu renklerde desenler.
+- **STI ID parçaları (`/id`, 5):** AccountMenu, AppSwitcher, OrgSwitcher, PermissionGate (`hasPermission`), SignInButton.
+- **Yapay zekâ arayüzü (`/ai`, 12):** ChatThread, PromptInput, StreamingText, MessageActions, SourceList, ThinkingIndicator, SuggestedPrompts, ToolCallCard, AttachmentChip, ConversationList, ModelSelect, AiDisclosure.
+- **Medya (`/media`, 5):** VideoPlayer, AudioPlayer, AudioWaveform, VideoThumbnail, MediaCard. Dış adresli içerik kullanıcı izin verene kadar yüklenmez (gizlilik modu).
+- **Editörler (`/editor`, 3):** CodeEditor (bağımlılıksız renklendirme), JsonEditor (doğrulama, biçimlendirme, sıkıştırma), MarkdownEditor (biçimlendirme çubuğu, güvenli önizleme).
+- **Ajansa özel (`/agency`, 10):** InstagramPostPreview, InstagramStoryPreview, InstagramReelPreview, TikTokPreview, FacebookPostPreview, LinkedInPostPreview, XPostPreview, ThreadsPostPreview, PinterestPinPreview, YouTubeThumbnailPreview; platform karakter sınırları `PLATFORM_LIMITS`.
+- **Site (`/site`, 5):** SiteHeader, MegaMenu, SiteFooter, AnnouncementBar, StickyCta.
+- **E-ticaret (`/commerce`, 5):** PriceDisplay, StockBadge, QuantityStepper, AddToCartButton, VariantSelector.
+- **Harita (`/maps`, 6):** MapView, MapMarker, LocationPicker, StoreLocator, TurkeyMap, DirectionsLink. Harita karoları kullanıcı "Haritayı yükle" diyene kadar istenmez.
+- **E-posta (`/email`, 17):** EmailLayout (`emailDocument`), EmailPreheader, EmailHeader, EmailFooter, EmailButton, EmailHeading, EmailText, EmailDivider, EmailImage, EmailColumns, EmailCallout, EmailList, EmailCode, EmailTable, EmailStats, EmailProductRow, EmailSocialLinks. E-posta istemcileri stil dosyası okumadığı için stiller satır içidir (bilinçli kural dışı karar; değerler tasarım değerlerinden gelir).
+- **Belge (`/document`, 6):** DocumentLayout, DocumentTable, TotalsBlock (`calculateTotals`), PaymentInfo (kart alanı yok), PageNumber, Watermark.
+
 ## 0.1.0 — 2026-11-07
 
 İlk genel sürüm: 246 bileşen (temel dalganın tamamı, uygulama dalgasının büyük bölümü), tasarım

package/README.md

@@ -130,6 +130,31 @@ import { AlertTriangleIcon, CheckIcon } from "@stisocial/ui/icons";
 - **Ad:** düğmenin içindeki ikona ad verilmez; adı düğme taşır.
 - **Liste ve kurallar:** ikon listesi ve arama sözcükleri `iconCatalog`'dadır; tasarım kuralları depodaki `packages/ui/icons/README.md` dosyasındadır.
 
+## E-posta
+
+`@stisocial/ui/email`: işlem ve bülten e-postaları için 17 sunucu bileşeni (`EmailLayout`, `EmailButton`, `EmailCode`, `EmailTable`, `EmailFooter`…). Çıktı sunucuda üretilir ve tam belgeye sarılır:
+
+```tsx
+import { renderToStaticMarkup } from "react-dom/server";
+import { EmailButton, EmailHeading, EmailLayout, EmailText, emailDocument } from "@stisocial/ui/email";
+
+const title = "E-posta adresinizi doğrulayın";
+const html = emailDocument({
+  title,
+  body: renderToStaticMarkup(
+    <EmailLayout title={title}>
+      <EmailHeading>{title}</EmailHeading>
+      <EmailText>Hesabınızı etkinleştirmek için düğmeyi kullanın.</EmailText>
+      <EmailButton href="https://id.stisocial.com/dogrula">E-posta adresimi doğrula</EmailButton>
+    </EmailLayout>,
+  ),
+});
+```
+
+- **Stil:** satır içidir; e-posta istemcileri stil dosyası ve CSS değişkeni okumaz. Değerler tasarım değerlerinin açık palet sRGB karşılığından gelir. Bu bileşenler web sayfasında kullanılmaz.
+- **Güvenlik:** bağlantılar yalnız `https:`, `mailto:`, `tel:`; görseller yalnız `https:` ve `cid:`. Güvensiz adres atlanır.
+- **Düzen:** 600 piksellik kart; sütunlar ortam sorgusu olmadan dar ekranda alt alta iner.
+
 ## Türkçe yardımcılar
 
 Sunucuda ve istemcide aynı sonucu verirler. Saat dilimi varsayılanı `Europe/Istanbul`'dur.

package/dist/agency/FacebookPostPreview/FacebookPostPreview.css

@@ -0,0 +1,73 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FacebookPostPreview-root-eb581 {
+    --sti-preview-max: 30rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+  }
+
+  .sti-FacebookPostPreview-header-e0f3d {
+    align-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3) var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-FacebookPostPreview-who-737b2 {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-FacebookPostPreview-sub-6590e {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    display: inline-flex;
+  }
+
+  .sti-FacebookPostPreview-globe-05e65 {
+    inline-size: var(--sti-icon-sm);
+    block-size: var(--sti-icon-sm);
+    flex: none;
+  }
+
+  .sti-FacebookPostPreview-more-25539 {
+    color: var(--sti-fg-muted);
+    flex: none;
+  }
+
+  .sti-FacebookPostPreview-text-20d13 {
+    padding: 0 var(--sti-space-4) var(--sti-space-3);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+  }
+
+  .sti-FacebookPostPreview-counts-671d7 {
+    justify-content: space-between;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-2) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    display: flex;
+  }
+
+  .sti-FacebookPostPreview-actions-4c9c9 {
+    margin-inline: var(--sti-space-4);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    display: flex;
+  }
+
+  .sti-FacebookPostPreview-action-9bbe8 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-width: 0;
+    padding-block: var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    font-weight: var(--sti-font-weight-semibold);
+    flex: 1;
+    display: inline-flex;
+  }
+}

package/dist/agency/FacebookPostPreview/FacebookPostPreview.d.ts

@@ -0,0 +1,27 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem, PreviewRatio } from "../_shared/Preview.js";
+export interface FacebookPostPreviewProps extends PreviewBaseProps {
+  /** Sayfa ya da kişi. `subtitle` zaman ve görünürlük satırıdır ("3 sa · Herkese açık"). */
+  account: PreviewAccount;
+  text: string;
+  media?: PreviewMediaItem;
+  /** Görsel oranı: akışta 1:1 ya da 1,91:1 (bağlantı görseli). */
+  ratio?: Extract<PreviewRatio, "1:1" | "1.91:1" | "4:5">;
+  /** Tepki ve yorum sayıları ("248", "32 yorum"). */
+  reactionsLabel?: string;
+  commentsLabel?: string;
+  /** Eylem düğmelerinin yazıları; verilmezse yalnız ikon çizilir. */
+  actionLabels?: {
+    like: string;
+    comment: string;
+    share: string;
+  };
+  /** Kesilen metnin sonuna eklenen metin ("Devamını gör"). */
+  moreLabel?: string;
+  /** Metnin tamamını gösterir. */
+  expanded?: boolean;
+}
+/**
+ * Facebook sayfa gönderisi önizlemesi: üst bilgi, metin (ilk 477 karakter), görsel, tepki satırı
+ * ve eylem şeridi. Sunucu bileşenidir.
+ */
+export declare function FacebookPostPreview({ label, account, text, media, ratio, reactionsLabel, commentsLabel, actionLabels, moreLabel, expanded, className, id }: FacebookPostPreviewProps): import("react").JSX.Element;

package/dist/agency/FacebookPostPreview/FacebookPostPreview.js

@@ -0,0 +1,80 @@
+import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { HeartIcon } from "../../icons/generated/HeartIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { GlobeIcon } from "../../icons/generated/GlobeIcon.js";
+import { ShareIcon } from "../../icons/generated/ShareIcon.js";
+import { PLATFORM_LIMITS } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewMedia, PreviewName, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import FacebookPostPreview_module_default from "./FacebookPostPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/FacebookPostPreview/FacebookPostPreview.tsx
+/**
+* Facebook sayfa gönderisi önizlemesi: üst bilgi, metin (ilk 477 karakter), görsel, tepki satırı
+* ve eylem şeridi. Sunucu bileşenidir.
+*/
+function FacebookPostPreview({ label, account, text, media, ratio = "1.91:1", reactionsLabel, commentsLabel, actionLabels, moreLabel, expanded = false, className, id }) {
+	const actions = [
+		{
+			key: "like",
+			icon: /* @__PURE__ */ jsx(HeartIcon, {}),
+			text: actionLabels?.like
+		},
+		{
+			key: "comment",
+			icon: /* @__PURE__ */ jsx(MessageIcon, {}),
+			text: actionLabels?.comment
+		},
+		{
+			key: "share",
+			icon: /* @__PURE__ */ jsx(ShareIcon, {}),
+			text: actionLabels?.share
+		}
+	];
+	return /* @__PURE__ */ jsxs(PreviewShell, {
+		label,
+		id,
+		platform: "facebook",
+		className: [FacebookPostPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: FacebookPostPreview_module_default.header,
+				children: [
+					/* @__PURE__ */ jsx(PreviewAvatar, { account }),
+					/* @__PURE__ */ jsxs("span", {
+						className: FacebookPostPreview_module_default.who,
+						children: [/* @__PURE__ */ jsx(PreviewName, { account }), account.subtitle ? /* @__PURE__ */ jsxs("span", {
+							className: FacebookPostPreview_module_default.sub,
+							children: [account.subtitle, /* @__PURE__ */ jsx(GlobeIcon, { className: FacebookPostPreview_module_default.globe })]
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: FacebookPostPreview_module_default.more })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: FacebookPostPreview_module_default.text,
+				children: /* @__PURE__ */ jsx(PreviewText, {
+					text,
+					limit: expanded ? void 0 : PLATFORM_LIMITS.facebook.visible,
+					moreLabel
+				})
+			}),
+			media ? /* @__PURE__ */ jsx(PreviewMedia, {
+				media,
+				ratio
+			}) : null,
+			reactionsLabel || commentsLabel ? /* @__PURE__ */ jsxs("div", {
+				className: FacebookPostPreview_module_default.counts,
+				children: [/* @__PURE__ */ jsx("span", { children: reactionsLabel }), /* @__PURE__ */ jsx("span", { children: commentsLabel })]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: FacebookPostPreview_module_default.actions,
+				"aria-hidden": "true",
+				children: actions.map((a) => /* @__PURE__ */ jsxs("span", {
+					className: FacebookPostPreview_module_default.action,
+					children: [a.icon, a.text ? /* @__PURE__ */ jsx("span", { children: a.text }) : null]
+				}, a.key))
+			})
+		]
+	});
+}
+export { FacebookPostPreview };

package/dist/agency/FacebookPostPreview/FacebookPostPreview.module.js

@@ -0,0 +1,15 @@
+import './FacebookPostPreview.css';
+// src/agency/FacebookPostPreview/FacebookPostPreview.module.css
+var FacebookPostPreview_module_default = {
+	"root": "sti-FacebookPostPreview-root-eb581",
+	"header": "sti-FacebookPostPreview-header-e0f3d",
+	"who": "sti-FacebookPostPreview-who-737b2",
+	"sub": "sti-FacebookPostPreview-sub-6590e",
+	"globe": "sti-FacebookPostPreview-globe-05e65",
+	"more": "sti-FacebookPostPreview-more-25539",
+	"text": "sti-FacebookPostPreview-text-20d13",
+	"counts": "sti-FacebookPostPreview-counts-671d7",
+	"actions": "sti-FacebookPostPreview-actions-4c9c9",
+	"action": "sti-FacebookPostPreview-action-9bbe8"
+};
+export { FacebookPostPreview_module_default as default };

package/dist/agency/FacebookPostPreview/index.d.ts

@@ -0,0 +1,2 @@
+import { FacebookPostPreview, FacebookPostPreviewProps } from "./FacebookPostPreview.js";
+export { FacebookPostPreview, FacebookPostPreviewProps };

package/dist/agency/InstagramPostPreview/InstagramPostPreview.css

@@ -0,0 +1,84 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-InstagramPostPreview-root-1175c {
+    --sti-preview-max: 28rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+  }
+
+  .sti-InstagramPostPreview-header-c05b2 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3);
+    display: flex;
+  }
+
+  .sti-InstagramPostPreview-who-7146e {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-InstagramPostPreview-sub-5b4da {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-InstagramPostPreview-more-441a2 {
+    color: var(--sti-fg-muted);
+    flex: none;
+  }
+
+  .sti-InstagramPostPreview-body-ad977 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-InstagramPostPreview-actions-e0a9d {
+    gap: var(--sti-space-4);
+  }
+
+  .sti-InstagramPostPreview-save-0bd3f {
+    margin-inline-start: auto;
+  }
+
+  .sti-InstagramPostPreview-dots-2eff0 {
+    justify-content: center;
+    gap: var(--sti-space-1);
+    display: flex;
+  }
+
+  .sti-InstagramPostPreview-dot-e7fa7 {
+    inline-size: var(--sti-space-1);
+    block-size: var(--sti-space-1);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-border-strong);
+  }
+
+  .sti-InstagramPostPreview-dot-e7fa7[data-active] {
+    background: var(--sti-fill-accent);
+  }
+
+  .sti-InstagramPostPreview-likes-bdaad {
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-InstagramPostPreview-time-d9dba {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-InstagramPostPreview-dot-e7fa7[data-active] {
+      background: highlight;
+    }
+  }
+}

package/dist/agency/InstagramPostPreview/InstagramPostPreview.d.ts

@@ -0,0 +1,23 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem, PreviewRatio } from "../_shared/Preview.js";
+export interface InstagramPostPreviewProps extends PreviewBaseProps {
+  account: PreviewAccount;
+  /** Açıklama metni; akışta ilk 125 karakteri görünür, devamı "devamı" ile kesilir. */
+  caption: string;
+  /** Görseller; birden çoksa carousel noktaları çizilir, ilk görsel gösterilir. */
+  media?: readonly PreviewMediaItem[];
+  /** Görsel oranı: Instagram akışı 1:1, 4:5 ve 1,91:1 destekler. */
+  ratio?: Extract<PreviewRatio, "1:1" | "4:5" | "1.91:1">;
+  /** Beğeni satırı ("1.248 beğenme"). */
+  likesLabel?: string;
+  /** Zaman satırı ("2 saat önce"). */
+  timeLabel?: string;
+  /** Kesilen açıklamanın sonuna eklenen metin ("devamı"). */
+  moreLabel?: string;
+  /** Açıklamanın tamamını gösterir. */
+  expanded?: boolean;
+}
+/**
+ * Instagram akış gönderisi önizlemesi: üst bilgi, görsel, eylem şeridi, beğeni ve açıklama.
+ * Sunucu bileşenidir. Yerleşim ve karakter sınırı platformunkine uyar; çizim bizimdir.
+ */
+export declare function InstagramPostPreview({ label, account, caption, media, ratio, likesLabel, timeLabel, moreLabel, expanded, className, id }: InstagramPostPreviewProps): import("react").JSX.Element;

package/dist/agency/InstagramPostPreview/InstagramPostPreview.js

@@ -0,0 +1,80 @@
+import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { BookmarkIcon } from "../../icons/generated/BookmarkIcon.js";
+import { HeartIcon } from "../../icons/generated/HeartIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { SendIcon } from "../../icons/generated/SendIcon.js";
+import { PLATFORM_LIMITS } from "../_shared/platforms.js";
+import { PreviewActions, PreviewAvatar, PreviewMedia, PreviewName, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import InstagramPostPreview_module_default from "./InstagramPostPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/InstagramPostPreview/InstagramPostPreview.tsx
+/**
+* Instagram akış gönderisi önizlemesi: üst bilgi, görsel, eylem şeridi, beğeni ve açıklama.
+* Sunucu bileşenidir. Yerleşim ve karakter sınırı platformunkine uyar; çizim bizimdir.
+*/
+function InstagramPostPreview({ label, account, caption, media, ratio = "1:1", likesLabel, timeLabel, moreLabel, expanded = false, className, id }) {
+	const count = media?.length ?? 0;
+	return /* @__PURE__ */ jsxs(PreviewShell, {
+		label,
+		id,
+		platform: "instagram-post",
+		className: [InstagramPostPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: InstagramPostPreview_module_default.header,
+				children: [
+					/* @__PURE__ */ jsx(PreviewAvatar, { account }),
+					/* @__PURE__ */ jsxs("span", {
+						className: InstagramPostPreview_module_default.who,
+						children: [/* @__PURE__ */ jsx(PreviewName, { account }), account.subtitle ? /* @__PURE__ */ jsx("span", {
+							className: InstagramPostPreview_module_default.sub,
+							children: account.subtitle
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: InstagramPostPreview_module_default.more })
+				]
+			}),
+			/* @__PURE__ */ jsx(PreviewMedia, {
+				media: media?.[0],
+				ratio
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: InstagramPostPreview_module_default.body,
+				children: [
+					/* @__PURE__ */ jsxs(PreviewActions, {
+						className: InstagramPostPreview_module_default.actions,
+						children: [
+							/* @__PURE__ */ jsx(HeartIcon, {}),
+							/* @__PURE__ */ jsx(MessageIcon, {}),
+							/* @__PURE__ */ jsx(SendIcon, {}),
+							/* @__PURE__ */ jsx(BookmarkIcon, { className: InstagramPostPreview_module_default.save })
+						]
+					}),
+					count > 1 ? /* @__PURE__ */ jsx("div", {
+						className: InstagramPostPreview_module_default.dots,
+						"aria-hidden": "true",
+						children: media?.map((m, i) => /* @__PURE__ */ jsx("span", {
+							className: InstagramPostPreview_module_default.dot,
+							"data-active": i === 0 ? "" : void 0
+						}, m.src))
+					}) : null,
+					likesLabel ? /* @__PURE__ */ jsx("p", {
+						className: InstagramPostPreview_module_default.likes,
+						children: likesLabel
+					}) : null,
+					/* @__PURE__ */ jsx(PreviewText, {
+						lead: account.handle ?? account.name,
+						text: caption,
+						limit: expanded ? void 0 : PLATFORM_LIMITS.instagram.visible,
+						moreLabel
+					}),
+					timeLabel ? /* @__PURE__ */ jsx("p", {
+						className: InstagramPostPreview_module_default.time,
+						children: timeLabel
+					}) : null
+				]
+			})
+		]
+	});
+}
+export { InstagramPostPreview };

package/dist/agency/InstagramPostPreview/InstagramPostPreview.module.js

@@ -0,0 +1,17 @@
+import './InstagramPostPreview.css';
+// src/agency/InstagramPostPreview/InstagramPostPreview.module.css
+var InstagramPostPreview_module_default = {
+	"root": "sti-InstagramPostPreview-root-1175c",
+	"header": "sti-InstagramPostPreview-header-c05b2",
+	"who": "sti-InstagramPostPreview-who-7146e",
+	"sub": "sti-InstagramPostPreview-sub-5b4da",
+	"more": "sti-InstagramPostPreview-more-441a2",
+	"body": "sti-InstagramPostPreview-body-ad977",
+	"actions": "sti-InstagramPostPreview-actions-e0a9d",
+	"save": "sti-InstagramPostPreview-save-0bd3f",
+	"dots": "sti-InstagramPostPreview-dots-2eff0",
+	"dot": "sti-InstagramPostPreview-dot-e7fa7",
+	"likes": "sti-InstagramPostPreview-likes-bdaad",
+	"time": "sti-InstagramPostPreview-time-d9dba"
+};
+export { InstagramPostPreview_module_default as default };

package/dist/agency/InstagramPostPreview/index.d.ts

@@ -0,0 +1,2 @@
+import { InstagramPostPreview, InstagramPostPreviewProps } from "./InstagramPostPreview.js";
+export { InstagramPostPreview, InstagramPostPreviewProps };

package/dist/agency/InstagramReelPreview/InstagramReelPreview.css

@@ -0,0 +1,84 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-InstagramReelPreview-root-9b0a4 {
+    --sti-preview-max: 20rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+    --sti-preview-radius: var(--sti-radius-lg);
+  }
+
+  .sti-InstagramReelPreview-play-b191e {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-size: var(--sti-icon-lg);
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    display: flex;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-InstagramReelPreview-bottom-18ff4 {
+    align-items: flex-end;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3);
+    margin-block-start: auto;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-InstagramReelPreview-info-cc71f {
+    gap: var(--sti-space-2);
+    flex: 1;
+    justify-items: start;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-InstagramReelPreview-rail-1399a {
+    gap: var(--sti-space-3);
+    flex: none;
+    justify-items: center;
+    display: grid;
+  }
+
+  .sti-InstagramReelPreview-railItem-80ae9 {
+    justify-items: center;
+    gap: var(--sti-space-0-5);
+    display: grid;
+  }
+
+  .sti-InstagramReelPreview-railIcon-c8539 {
+    inline-size: var(--sti-space-8);
+    block-size: var(--sti-space-8);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-size: var(--sti-icon-md);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-InstagramReelPreview-count-dcc7d {
+    padding-inline: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    color: var(--sti-fg-inverse);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+  }
+
+  @media (forced-colors: active) {
+    .sti-InstagramReelPreview-play-b191e, .sti-InstagramReelPreview-railIcon-c8539, .sti-InstagramReelPreview-count-dcc7d {
+      border: var(--sti-border-width) solid CanvasText;
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/agency/InstagramReelPreview/InstagramReelPreview.d.ts

@@ -0,0 +1,24 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem } from "../_shared/Preview.js";
+import { ReactNode } from "react";
+export interface InstagramReelPreviewProps extends PreviewBaseProps {
+  account: PreviewAccount;
+  /** Kapak ya da bir kare (9:16). */
+  media?: PreviewMediaItem;
+  /** Açıklama; akışta ilk 125 karakteri görünür. */
+  caption?: string;
+  /** Ses satırı ("Özgün ses · stisocial"). */
+  audio?: string;
+  /** Sayılar (biçimlenmiş metin): "12,4 B". */
+  likes?: string;
+  comments?: string;
+  shares?: string;
+  /** Kesilen açıklamanın sonuna eklenen metin ("devamı"). */
+  moreLabel?: string;
+  /** Görselin üstüne konan katman (ör. `SafeZoneOverlay`). */
+  children?: ReactNode;
+}
+/**
+ * Instagram reels önizlemesi: 9:16 çerçeve, sağda eylem sütunu, altta hesap, açıklama ve ses.
+ * Sunucu bileşenidir.
+ */
+export declare function InstagramReelPreview({ label, account, media, caption, audio, likes, comments, shares, moreLabel, children, className, id }: InstagramReelPreviewProps): import("react").JSX.Element;

package/dist/agency/InstagramReelPreview/InstagramReelPreview.js

@@ -0,0 +1,88 @@
+import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { HeartIcon } from "../../icons/generated/HeartIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import { SendIcon } from "../../icons/generated/SendIcon.js";
+import { PLATFORM_LIMITS, truncateText } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewChip, PreviewMedia, PreviewName, PreviewShell } from "../_shared/Preview.js";
+import InstagramReelPreview_module_default from "./InstagramReelPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/InstagramReelPreview/InstagramReelPreview.tsx
+/**
+* Instagram reels önizlemesi: 9:16 çerçeve, sağda eylem sütunu, altta hesap, açıklama ve ses.
+* Sunucu bileşenidir.
+*/
+function InstagramReelPreview({ label, account, media, caption, audio, likes, comments, shares, moreLabel, children, className, id }) {
+	const text = caption ? truncateText(caption, PLATFORM_LIMITS.instagram.visible) : null;
+	const rail = [
+		[
+			/* @__PURE__ */ jsx(HeartIcon, {}, "h"),
+			likes,
+			"likes"
+		],
+		[
+			/* @__PURE__ */ jsx(MessageIcon, {}, "m"),
+			comments,
+			"comments"
+		],
+		[
+			/* @__PURE__ */ jsx(SendIcon, {}, "s"),
+			shares,
+			"shares"
+		],
+		[
+			/* @__PURE__ */ jsx(MoreHorizontalIcon, {}, "o"),
+			void 0,
+			"more"
+		]
+	];
+	return /* @__PURE__ */ jsx(PreviewShell, {
+		label,
+		id,
+		platform: "instagram-reel",
+		className: [InstagramReelPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs(PreviewMedia, {
+			media,
+			ratio: "9:16",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: InstagramReelPreview_module_default.play,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(PlayIcon, {})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: InstagramReelPreview_module_default.bottom,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: InstagramReelPreview_module_default.info,
+						children: [
+							/* @__PURE__ */ jsxs(PreviewChip, { children: [/* @__PURE__ */ jsx(PreviewAvatar, {
+								account,
+								size: "sm"
+							}), /* @__PURE__ */ jsx(PreviewName, { account })] }),
+							text ? /* @__PURE__ */ jsxs(PreviewChip, {
+								block: true,
+								children: [text.text, text.cut ? `… ${moreLabel ?? ""}`.trimEnd() : ""]
+							}) : null,
+							audio ? /* @__PURE__ */ jsx(PreviewChip, { children: audio }) : null
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: InstagramReelPreview_module_default.rail,
+						"aria-hidden": "true",
+						children: rail.map(([icon, count, key]) => /* @__PURE__ */ jsxs("span", {
+							className: InstagramReelPreview_module_default.railItem,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: InstagramReelPreview_module_default.railIcon,
+								children: icon
+							}), count ? /* @__PURE__ */ jsx("span", {
+								className: InstagramReelPreview_module_default.count,
+								children: count
+							}) : null]
+						}, key))
+					})]
+				}),
+				children
+			]
+		})
+	});
+}
+export { InstagramReelPreview };