@stisocial/ui 0.1.0 → 0.2.0

package/dist/agency/ThreadsPostPreview/ThreadsPostPreview.css

@@ -0,0 +1,101 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ThreadsPostPreview-root-1cbf5 {
+    --sti-preview-max: 32rem;
+    --sti-preview-pad: var(--sti-space-3);
+    --sti-preview-gap: 0;
+  }
+
+  .sti-ThreadsPostPreview-layout-134ba {
+    align-items: stretch;
+    gap: var(--sti-space-3);
+    padding-inline: var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-ThreadsPostPreview-rail-6951d {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    flex: none;
+    display: flex;
+  }
+
+  .sti-ThreadsPostPreview-line-8c4d9 {
+    inline-size: var(--sti-border-width-strong);
+    min-block-size: var(--sti-space-6);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-border);
+    flex: 1;
+  }
+
+  .sti-ThreadsPostPreview-main-65d4a {
+    align-content: start;
+    gap: var(--sti-space-2);
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-ThreadsPostPreview-head-ceea2 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-ThreadsPostPreview-time-dc586 {
+    color: var(--sti-fg-muted);
+    white-space: nowrap;
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  .sti-ThreadsPostPreview-more-d2fb3 {
+    color: var(--sti-fg-muted);
+    flex: none;
+  }
+
+  .sti-ThreadsPostPreview-over-0b4a0 {
+    padding-inline: var(--sti-space-1);
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg-danger);
+    text-underline-offset: var(--sti-space-1);
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    margin: 0;
+    -webkit-text-decoration: underline wavy;
+    text-decoration: underline wavy;
+  }
+
+  .sti-ThreadsPostPreview-media-8de9b {
+    --sti-media-border: var(--sti-border-width) solid var(--sti-border-subtle);
+    --sti-media-radius: var(--sti-radius-md);
+  }
+
+  .sti-ThreadsPostPreview-actions-25698 {
+    align-items: center;
+    gap: var(--sti-space-4);
+    color: var(--sti-fg);
+    font-size: var(--sti-icon-md);
+    display: flex;
+  }
+
+  .sti-ThreadsPostPreview-counts-d1925 {
+    color: var(--sti-fg-muted);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ThreadsPostPreview-line-8c4d9 {
+      background: canvastext;
+    }
+
+    .sti-ThreadsPostPreview-over-0b4a0 {
+      border: var(--sti-border-width) solid CanvasText;
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/agency/ThreadsPostPreview/ThreadsPostPreview.d.ts

@@ -0,0 +1,19 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem } from "../_shared/Preview.js";
+export interface ThreadsPostPreviewProps extends PreviewBaseProps {
+  account: PreviewAccount;
+  /** Gönderi metni; sınır 500 karakterdir, aşan kısım işaretlenir. */
+  text: string;
+  media?: PreviewMediaItem;
+  /** Zaman ("3 sa"). */
+  timeLabel?: string;
+  /** Yanıt ve beğeni sayıları ("12 yanıt", "248 beğeni"). */
+  repliesLabel?: string;
+  likesLabel?: string;
+  /** Konu devamı: altta bağlayıcı çizgi çizilir (zincirdeki sonraki gönderiyi gösterir). */
+  thread?: boolean;
+}
+/**
+ * Threads gönderisi önizlemesi: solda profil görseli ve konu çizgisi, sağda ad, metin (500
+ * karakter), görsel ve eylem şeridi. Aşan metin kesilmez, işaretlenir. Sunucu bileşenidir.
+ */
+export declare function ThreadsPostPreview({ label, account, text, media, timeLabel, repliesLabel, likesLabel, thread, className, id }: ThreadsPostPreviewProps): import("react").JSX.Element;

package/dist/agency/ThreadsPostPreview/ThreadsPostPreview.js

@@ -0,0 +1,82 @@
+import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { RefreshIcon } from "../../icons/generated/RefreshIcon.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, graphemes } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewMedia, PreviewName, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import ThreadsPostPreview_module_default from "./ThreadsPostPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/ThreadsPostPreview/ThreadsPostPreview.tsx
+/**
+* Threads gönderisi önizlemesi: solda profil görseli ve konu çizgisi, sağda ad, metin (500
+* karakter), görsel ve eylem şeridi. Aşan metin kesilmez, işaretlenir. Sunucu bileşenidir.
+*/
+function ThreadsPostPreview({ label, account, text, media, timeLabel, repliesLabel, likesLabel, thread = false, className, id }) {
+	const max = PLATFORM_LIMITS.threads.max;
+	const chars = graphemes(text);
+	const over = chars.length > max;
+	const head = over ? chars.slice(0, max).join("") : text;
+	const tail = over ? chars.slice(max).join("") : "";
+	return /* @__PURE__ */ jsx(PreviewShell, {
+		label,
+		id,
+		platform: "threads",
+		className: [ThreadsPostPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: ThreadsPostPreview_module_default.layout,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: ThreadsPostPreview_module_default.rail,
+				children: [/* @__PURE__ */ jsx(PreviewAvatar, { account }), thread ? /* @__PURE__ */ jsx("span", {
+					className: ThreadsPostPreview_module_default.line,
+					"data-thread": "",
+					"aria-hidden": "true"
+				}) : null]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: ThreadsPostPreview_module_default.main,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: ThreadsPostPreview_module_default.head,
+						children: [
+							/* @__PURE__ */ jsx(PreviewName, { account: {
+								...account,
+								name: account.handle ?? account.name
+							} }),
+							timeLabel ? /* @__PURE__ */ jsx("span", {
+								className: ThreadsPostPreview_module_default.time,
+								children: timeLabel
+							}) : null,
+							/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: ThreadsPostPreview_module_default.more })
+						]
+					}),
+					/* @__PURE__ */ jsx(PreviewText, { text: head }),
+					tail ? /* @__PURE__ */ jsx("p", {
+						className: ThreadsPostPreview_module_default.over,
+						"data-over": "",
+						children: tail
+					}) : null,
+					media ? /* @__PURE__ */ jsx(PreviewMedia, {
+						media,
+						ratio: "4:5",
+						className: ThreadsPostPreview_module_default.media
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: ThreadsPostPreview_module_default.actions,
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ jsx(HeartIcon, {}),
+							/* @__PURE__ */ jsx(MessageIcon, {}),
+							/* @__PURE__ */ jsx(RefreshIcon, {}),
+							/* @__PURE__ */ jsx(SendIcon, {})
+						]
+					}),
+					repliesLabel || likesLabel ? /* @__PURE__ */ jsx("p", {
+						className: ThreadsPostPreview_module_default.counts,
+						children: [repliesLabel, likesLabel].filter(Boolean).join(" · ")
+					}) : null
+				]
+			})]
+		})
+	});
+}
+export { ThreadsPostPreview };

package/dist/agency/ThreadsPostPreview/ThreadsPostPreview.module.js

@@ -0,0 +1,17 @@
+import './ThreadsPostPreview.css';
+// src/agency/ThreadsPostPreview/ThreadsPostPreview.module.css
+var ThreadsPostPreview_module_default = {
+	"root": "sti-ThreadsPostPreview-root-1cbf5",
+	"layout": "sti-ThreadsPostPreview-layout-134ba",
+	"rail": "sti-ThreadsPostPreview-rail-6951d",
+	"line": "sti-ThreadsPostPreview-line-8c4d9",
+	"main": "sti-ThreadsPostPreview-main-65d4a",
+	"head": "sti-ThreadsPostPreview-head-ceea2",
+	"time": "sti-ThreadsPostPreview-time-dc586",
+	"more": "sti-ThreadsPostPreview-more-d2fb3",
+	"over": "sti-ThreadsPostPreview-over-0b4a0",
+	"media": "sti-ThreadsPostPreview-media-8de9b",
+	"actions": "sti-ThreadsPostPreview-actions-25698",
+	"counts": "sti-ThreadsPostPreview-counts-d1925"
+};
+export { ThreadsPostPreview_module_default as default };

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

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

package/dist/agency/TikTokPreview/TikTokPreview.css

@@ -0,0 +1,84 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TikTokPreview-root-c72ea {
+    --sti-preview-max: 20rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+    --sti-preview-radius: var(--sti-radius-lg);
+  }
+
+  .sti-TikTokPreview-play-4ce48 {
+    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-TikTokPreview-bottom-82284 {
+    align-items: flex-end;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3);
+    margin-block-start: auto;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-TikTokPreview-info-76bf7 {
+    gap: var(--sti-space-2);
+    flex: 1;
+    justify-items: start;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-TikTokPreview-rail-44fc5 {
+    gap: var(--sti-space-3);
+    flex: none;
+    justify-items: center;
+    display: grid;
+  }
+
+  .sti-TikTokPreview-railItem-6c37f {
+    justify-items: center;
+    gap: var(--sti-space-0-5);
+    display: grid;
+  }
+
+  .sti-TikTokPreview-railIcon-d774c {
+    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-TikTokPreview-count-4f4e6 {
+    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-TikTokPreview-play-4ce48, .sti-TikTokPreview-railIcon-d774c, .sti-TikTokPreview-count-4f4e6 {
+      border: var(--sti-border-width) solid CanvasText;
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/agency/TikTokPreview/TikTokPreview.d.ts

@@ -0,0 +1,25 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem } from "../_shared/Preview.js";
+import { ReactNode } from "react";
+export interface TikTokPreviewProps extends PreviewBaseProps {
+  account: PreviewAccount;
+  /** Kapak ya da bir kare (9:16). */
+  media?: PreviewMediaItem;
+  /** Açıklama; akışta ilk 90 karakteri görünür. */
+  caption?: string;
+  /** Ses satırı ("özgün ses - stisocial"). */
+  sound?: string;
+  /** Sayılar (biçimlenmiş metin): "12,4 B". */
+  likes?: string;
+  comments?: string;
+  saves?: string;
+  shares?: string;
+  /** Kesilen açıklamanın sonuna eklenen metin ("devamı"). */
+  moreLabel?: string;
+  /** Görselin üstüne konan katman (ör. `SafeZoneOverlay`). */
+  children?: ReactNode;
+}
+/**
+ * TikTok önizlemesi: 9:16 çerçeve, sağda profil ve eylem sütunu (beğeni, yorum, kaydetme,
+ * paylaşım), altta kullanıcı adı, açıklama ve ses. Sunucu bileşenidir.
+ */
+export declare function TikTokPreview({ label, account, media, caption, sound, likes, comments, saves, shares, moreLabel, children, className, id }: TikTokPreviewProps): import("react").JSX.Element;

package/dist/agency/TikTokPreview/TikTokPreview.js

@@ -0,0 +1,95 @@
+import { BookmarkIcon } from "../../icons/generated/BookmarkIcon.js";
+import { HeartIcon } from "../../icons/generated/HeartIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import { ShareIcon } from "../../icons/generated/ShareIcon.js";
+import { PLATFORM_LIMITS } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewChip, PreviewMedia, PreviewName, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import TikTokPreview_module_default from "./TikTokPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/TikTokPreview/TikTokPreview.tsx
+/**
+* TikTok önizlemesi: 9:16 çerçeve, sağda profil ve eylem sütunu (beğeni, yorum, kaydetme,
+* paylaşım), altta kullanıcı adı, açıklama ve ses. Sunucu bileşenidir.
+*/
+function TikTokPreview({ label, account, media, caption, sound, likes, comments, saves, shares, moreLabel, children, className, id }) {
+	const rail = [
+		[
+			/* @__PURE__ */ jsx(HeartIcon, {}, "h"),
+			likes,
+			"likes"
+		],
+		[
+			/* @__PURE__ */ jsx(MessageIcon, {}, "m"),
+			comments,
+			"comments"
+		],
+		[
+			/* @__PURE__ */ jsx(BookmarkIcon, {}, "b"),
+			saves,
+			"saves"
+		],
+		[
+			/* @__PURE__ */ jsx(ShareIcon, {}, "s"),
+			shares,
+			"shares"
+		]
+	];
+	return /* @__PURE__ */ jsx(PreviewShell, {
+		label,
+		id,
+		platform: "tiktok",
+		className: [TikTokPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs(PreviewMedia, {
+			media,
+			ratio: "9:16",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: TikTokPreview_module_default.play,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(PlayIcon, {})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: TikTokPreview_module_default.bottom,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: TikTokPreview_module_default.info,
+						children: [
+							/* @__PURE__ */ jsx(PreviewChip, { children: /* @__PURE__ */ jsx(PreviewName, { account: {
+								...account,
+								name: `@${account.handle ?? account.name}`
+							} }) }),
+							caption ? /* @__PURE__ */ jsx(PreviewChip, {
+								block: true,
+								children: /* @__PURE__ */ jsx(PreviewText, {
+									plain: true,
+									text: caption,
+									limit: PLATFORM_LIMITS.tiktok.visible,
+									moreLabel
+								})
+							}) : null,
+							sound ? /* @__PURE__ */ jsx(PreviewChip, { children: sound }) : null
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: TikTokPreview_module_default.rail,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx(PreviewAvatar, {
+							account,
+							size: "lg"
+						}), rail.map(([icon, count, key]) => /* @__PURE__ */ jsxs("span", {
+							className: TikTokPreview_module_default.railItem,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: TikTokPreview_module_default.railIcon,
+								children: icon
+							}), count ? /* @__PURE__ */ jsx("span", {
+								className: TikTokPreview_module_default.count,
+								children: count
+							}) : null]
+						}, key))]
+					})]
+				}),
+				children
+			]
+		})
+	});
+}
+export { TikTokPreview };

package/dist/agency/TikTokPreview/TikTokPreview.module.js

@@ -0,0 +1,13 @@
+import './TikTokPreview.css';
+// src/agency/TikTokPreview/TikTokPreview.module.css
+var TikTokPreview_module_default = {
+	"root": "sti-TikTokPreview-root-c72ea",
+	"play": "sti-TikTokPreview-play-4ce48",
+	"bottom": "sti-TikTokPreview-bottom-82284",
+	"info": "sti-TikTokPreview-info-76bf7",
+	"rail": "sti-TikTokPreview-rail-44fc5",
+	"railItem": "sti-TikTokPreview-railItem-6c37f",
+	"railIcon": "sti-TikTokPreview-railIcon-d774c",
+	"count": "sti-TikTokPreview-count-4f4e6"
+};
+export { TikTokPreview_module_default as default };

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

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

package/dist/agency/XPostPreview/XPostPreview.css

@@ -0,0 +1,89 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-XPostPreview-root-38842 {
+    --sti-preview-max: 35rem;
+    --sti-preview-pad: var(--sti-space-3);
+    --sti-preview-gap: 0;
+  }
+
+  .sti-XPostPreview-layout-e9e34 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    padding-inline: var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-XPostPreview-main-aad24 {
+    gap: var(--sti-space-2);
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-XPostPreview-head-4990f {
+    align-items: baseline;
+    gap: 0 var(--sti-space-1);
+    flex-wrap: wrap;
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-XPostPreview-time-5cd4e {
+    color: var(--sti-fg-muted);
+    white-space: nowrap;
+    flex: none;
+  }
+
+  .sti-XPostPreview-over-51a4a {
+    padding-inline: var(--sti-space-1);
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg-danger);
+    text-underline-offset: var(--sti-space-1);
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    margin: 0;
+    -webkit-text-decoration: underline wavy;
+    text-decoration: underline wavy;
+  }
+
+  .sti-XPostPreview-media-fd961 {
+    --sti-media-border: var(--sti-border-width) solid var(--sti-border-subtle);
+    --sti-media-radius: var(--sti-radius-md);
+  }
+
+  .sti-XPostPreview-counters-43ba5 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-XPostPreview-counter-c507b {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .sti-XPostPreview-count-6cab0 {
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .sti-XPostPreview-share-70703 {
+    flex: none;
+  }
+
+  @media (forced-colors: active) {
+    .sti-XPostPreview-over-51a4a {
+      border: var(--sti-border-width) solid CanvasText;
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/agency/XPostPreview/XPostPreview.d.ts

@@ -0,0 +1,20 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem } from "../_shared/Preview.js";
+export interface XPostPreviewProps extends PreviewBaseProps {
+  account: PreviewAccount;
+  /** Gönderi metni; sınır 280 karakterdir, aşan kısım "sınır aşıldı" olarak işaretlenir. */
+  text: string;
+  media?: PreviewMediaItem;
+  /** Zaman ("14:32 · 12 Kas 2026" ya da "3 sa"). */
+  timeLabel?: string;
+  /** Sayılar (biçimlenmiş metin): yanıt, yeniden paylaşım, beğeni, görüntülenme. */
+  replies?: string;
+  reposts?: string;
+  likes?: string;
+  views?: string;
+}
+/**
+ * X gönderisi önizlemesi: solda profil görseli, sağda ad, kullanıcı adı, metin (280 karakter),
+ * görsel ve sayaç şeridi. 280 karakteri aşan metin kesilmez; aşan kısım işaretlenir, çünkü
+ * önizleme sınırı aşan gönderinin yayımlanamayacağını göstermelidir. Sunucu bileşenidir.
+ */
+export declare function XPostPreview({ label, account, text, media, timeLabel, replies, reposts, likes, views, className, id }: XPostPreviewProps): import("react").JSX.Element;

package/dist/agency/XPostPreview/XPostPreview.js

@@ -0,0 +1,91 @@
+import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
+import { HeartIcon } from "../../icons/generated/HeartIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { BarChartIcon } from "../../icons/generated/BarChartIcon.js";
+import { ShareIcon } from "../../icons/generated/ShareIcon.js";
+import { PLATFORM_LIMITS, graphemes } from "../_shared/platforms.js";
+import { PreviewAvatar, PreviewMedia, PreviewName, PreviewShell, PreviewText } from "../_shared/Preview.js";
+import XPostPreview_module_default from "./XPostPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/XPostPreview/XPostPreview.tsx
+/**
+* X gönderisi önizlemesi: solda profil görseli, sağda ad, kullanıcı adı, metin (280 karakter),
+* görsel ve sayaç şeridi. 280 karakteri aşan metin kesilmez; aşan kısım işaretlenir, çünkü
+* önizleme sınırı aşan gönderinin yayımlanamayacağını göstermelidir. Sunucu bileşenidir.
+*/
+function XPostPreview({ label, account, text, media, timeLabel, replies, reposts, likes, views, className, id }) {
+	const max = PLATFORM_LIMITS.x.max;
+	const chars = graphemes(text);
+	const over = chars.length > max;
+	const head = over ? chars.slice(0, max).join("") : text;
+	const tail = over ? chars.slice(max).join("") : "";
+	const counters = [
+		{
+			key: "replies",
+			icon: /* @__PURE__ */ jsx(MessageIcon, {}),
+			value: replies
+		},
+		{
+			key: "reposts",
+			icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+			value: reposts
+		},
+		{
+			key: "likes",
+			icon: /* @__PURE__ */ jsx(HeartIcon, {}),
+			value: likes
+		},
+		{
+			key: "views",
+			icon: /* @__PURE__ */ jsx(BarChartIcon, {}),
+			value: views
+		}
+	];
+	return /* @__PURE__ */ jsx(PreviewShell, {
+		label,
+		id,
+		platform: "x",
+		className: [XPostPreview_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: XPostPreview_module_default.layout,
+			children: [/* @__PURE__ */ jsx(PreviewAvatar, { account }), /* @__PURE__ */ jsxs("div", {
+				className: XPostPreview_module_default.main,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: XPostPreview_module_default.head,
+						children: [/* @__PURE__ */ jsx(PreviewName, {
+							account,
+							showHandle: true
+						}), timeLabel ? /* @__PURE__ */ jsxs("span", {
+							className: XPostPreview_module_default.time,
+							children: ["· ", timeLabel]
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx(PreviewText, { text: head }),
+					tail ? /* @__PURE__ */ jsx("p", {
+						className: XPostPreview_module_default.over,
+						"data-over": "",
+						children: tail
+					}) : null,
+					media ? /* @__PURE__ */ jsx(PreviewMedia, {
+						media,
+						ratio: "16:9",
+						className: XPostPreview_module_default.media
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: XPostPreview_module_default.counters,
+						"aria-hidden": "true",
+						children: [counters.map((c) => /* @__PURE__ */ jsxs("span", {
+							className: XPostPreview_module_default.counter,
+							children: [c.icon, c.value ? /* @__PURE__ */ jsx("span", {
+								className: XPostPreview_module_default.count,
+								children: c.value
+							}) : null]
+						}, c.key)), /* @__PURE__ */ jsx(ShareIcon, { className: XPostPreview_module_default.share })]
+					})
+				]
+			})]
+		})
+	});
+}
+export { XPostPreview };

package/dist/agency/XPostPreview/XPostPreview.module.js

@@ -0,0 +1,16 @@
+import './XPostPreview.css';
+// src/agency/XPostPreview/XPostPreview.module.css
+var XPostPreview_module_default = {
+	"root": "sti-XPostPreview-root-38842",
+	"layout": "sti-XPostPreview-layout-e9e34",
+	"main": "sti-XPostPreview-main-aad24",
+	"head": "sti-XPostPreview-head-4990f",
+	"time": "sti-XPostPreview-time-5cd4e",
+	"over": "sti-XPostPreview-over-51a4a",
+	"media": "sti-XPostPreview-media-fd961",
+	"counters": "sti-XPostPreview-counters-43ba5",
+	"counter": "sti-XPostPreview-counter-c507b",
+	"count": "sti-XPostPreview-count-6cab0",
+	"share": "sti-XPostPreview-share-70703"
+};
+export { XPostPreview_module_default as default };

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

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