@stisocial/ui 0.2.1 → 0.3.0

package/dist/agency/HashtagInput/HashtagInput.js

@@ -0,0 +1,96 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { TagInput } from "../../components/TagInput/TagInput.js";
+import { PLATFORM_LIMITS } from "../_shared/platforms.js";
+import { cx } from "../_shared/Preview.js";
+import HashtagInput_module_default from "./HashtagInput.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/agency/HashtagInput/HashtagInput.tsx
+/**
+* Etiketi biçimler: baştaki "#" ve boşluklar atılır, yalnız harf, rakam ve alt çizgi kalır; sonuç
+* "#" ile döner. Geçerli karakter kalmazsa boş metin.
+*/
+function normalizeHashtag(raw) {
+	const body = raw.trim().replace(/^#+/, "").replace(/[^\p{L}\p{N}_]/gu, "");
+	return body ? `#${body}` : "";
+}
+const key = (tag) => tag.toLocaleLowerCase("tr-TR");
+/** Etiket listesini biçimler: "#a #b, c" bölünür, biçimlenir, büyük-küçük harf farkıyla tekilleşir. */
+function normalizeHashtags(list, limit) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const raw of list) for (const part of raw.split(/[\s,;]+/)) {
+		const tag = normalizeHashtag(part);
+		if (tag && !seen.has(key(tag))) {
+			seen.add(key(tag));
+			out.push(tag);
+		}
+	}
+	return limit !== void 0 ? out.slice(0, limit) : out;
+}
+/**
+* Etiket (hashtag) alanı: yazılan ya da yapıştırılan etiketler biçimlenir ("Yaz Kampanyası" →
+* "#YazKampanyası"), büyük-küçük harf farkıyla yinelenenler atılır, platform sınırı uygulanır.
+* Önerilen etiketler tek tıklamayla eklenir; hepsi "#a #b" biçiminde kopyalanır.
+*/
+function HashtagInput({ label, description, value, defaultValue = [], onChange, platform, maxTags, suggestions = [], name, isDisabled, className, id }) {
+	const t = useMessages();
+	const limit = maxTags ?? (platform ? PLATFORM_LIMITS[platform].hashtags ?? void 0 : void 0);
+	const [inner, setInner] = useState(() => normalizeHashtags(defaultValue, limit));
+	const tags = value ? [...value] : inner;
+	const commit = (next) => {
+		const capped = normalizeHashtags(next, limit);
+		if (!value) setInner(capped);
+		onChange?.(capped);
+	};
+	const present = new Set(tags.map(key));
+	const remaining = suggestions.map(normalizeHashtag).filter((s) => s && !present.has(key(s)));
+	const full = limit !== void 0 && tags.length >= limit;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(HashtagInput_module_default.root, className),
+		children: [/* @__PURE__ */ jsx(TagInput, {
+			id,
+			label,
+			description: description ?? (limit !== void 0 ? template(t.agencyHashtagLimit, {
+				count: tags.length,
+				max: limit
+			}) : void 0),
+			value: tags,
+			onChange: commit,
+			validateTag: (tag) => normalizeHashtag(tag) ? null : t.agencyHashtagInvalid,
+			maxTags: limit,
+			placeholder: t.agencyHashtagPlaceholder,
+			name,
+			isDisabled
+		}), remaining.length || tags.length ? /* @__PURE__ */ jsxs("div", {
+			className: HashtagInput_module_default.bar,
+			children: [remaining.length ? /* @__PURE__ */ jsxs("div", {
+				className: HashtagInput_module_default.suggestions,
+				role: "group",
+				"aria-label": t.agencyHashtagSuggested,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: HashtagInput_module_default.suggestLabel,
+					"aria-hidden": "true",
+					children: t.agencyHashtagSuggested
+				}), remaining.slice(0, 8).map((s) => /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+					isDisabled: isDisabled || full,
+					onPress: () => commit([...tags, s]),
+					children: s
+				}, s))]
+			}) : null, tags.length ? /* @__PURE__ */ jsx(CopyButton, {
+				value: tags.join(" "),
+				label: t.agencyHashtagCopy,
+				className: HashtagInput_module_default.copy
+			}) : null]
+		}) : null]
+	});
+}
+export { HashtagInput, normalizeHashtag, normalizeHashtags };

package/dist/agency/HashtagInput/HashtagInput.module.js

@@ -0,0 +1,10 @@
+import './HashtagInput.css';
+// src/agency/HashtagInput/HashtagInput.module.css
+var HashtagInput_module_default = {
+	"root": "sti-HashtagInput-root-9ccad",
+	"bar": "sti-HashtagInput-bar-dad5d",
+	"suggestions": "sti-HashtagInput-suggestions-adf66",
+	"suggestLabel": "sti-HashtagInput-suggestLabel-e55bd",
+	"copy": "sti-HashtagInput-copy-29a40"
+};
+export { HashtagInput_module_default as default };

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

@@ -0,0 +1,2 @@
+import { HashtagInput, HashtagInputProps, normalizeHashtag, normalizeHashtags } from "./HashtagInput.js";
+export { HashtagInput, HashtagInputProps, normalizeHashtag, normalizeHashtags };

package/dist/agency/InstagramReelPreview/InstagramReelPreview.js

@@ -1,7 +1,7 @@
 import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.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";

package/dist/agency/LinkPreview/LinkPreview.css

@@ -0,0 +1,176 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-LinkPreview-root-ecdcb {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 26rem;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-LinkPreview-root-ecdcb[data-platform="slack"] {
+    max-inline-size: 36rem;
+  }
+
+  .sti-LinkPreview-chat-239cc {
+    padding: var(--sti-space-4);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  .sti-LinkPreview-bubble-ff4a6 {
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    inline-size: 90%;
+    padding: var(--sti-space-1) var(--sti-space-1) var(--sti-space-2);
+    border-radius: var(--sti-radius-lg) var(--sti-radius-sm) var(--sti-radius-lg)
+      var(--sti-radius-lg);
+    background: var(--sti-bg-success-subtle);
+    display: grid;
+    position: relative;
+  }
+
+  .sti-LinkPreview-card-5bdf4 {
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg);
+    display: grid;
+    overflow: hidden;
+  }
+
+  .sti-LinkPreview-root-ecdcb[data-platform="generic"] .sti-LinkPreview-card-5bdf4 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+  }
+
+  .sti-LinkPreview-image-95c4f {
+    aspect-ratio: 1.91;
+    object-fit: cover;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-LinkPreview-cardText-0d7c7 {
+    gap: calc(var(--sti-space-1) / 2);
+    padding: var(--sti-space-2) var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-LinkPreview-cardTitle-79323 {
+    font-weight: var(--sti-font-weight-semibold);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-LinkPreview-desc-18bfa {
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-LinkPreview-domain-b656a {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-LinkPreview-message-005b6 {
+    padding-inline: var(--sti-space-2);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-LinkPreview-link-bb4ed {
+    color: var(--sti-fg-link);
+    text-decoration: underline;
+  }
+
+  .sti-LinkPreview-bubbleTime-213f7 {
+    padding-inline: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    justify-self: end;
+  }
+
+  .sti-LinkPreview-slack-b4ab8 {
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3) var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    display: flex;
+  }
+
+  .sti-LinkPreview-slackAvatar-1ba90 {
+    inline-size: var(--sti-space-10);
+    block-size: var(--sti-space-10);
+    border-radius: var(--sti-radius-md);
+    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-semibold);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-LinkPreview-slackBody-8a8e9 {
+    gap: var(--sti-space-1);
+    flex: 1;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-LinkPreview-slackHead-7e1e3 {
+    align-items: baseline;
+    gap: var(--sti-space-2);
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-LinkPreview-slackSender-55a53 {
+    font-weight: var(--sti-font-weight-bold);
+  }
+
+  .sti-LinkPreview-time-e02b6 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-LinkPreview-root-ecdcb[data-platform="slack"] .sti-LinkPreview-message-005b6 {
+    padding-inline: 0;
+  }
+
+  .sti-LinkPreview-attachment-096b1 {
+    gap: calc(var(--sti-space-1) / 2);
+    border-inline-start: var(--sti-border-width-strong) solid var(--sti-border-strong);
+    margin-block-start: var(--sti-space-1);
+    padding-inline-start: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-LinkPreview-siteName-37dc7 {
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-LinkPreview-slackTitle-e2471 {
+    color: var(--sti-fg-link);
+    font-weight: var(--sti-font-weight-semibold);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-LinkPreview-slackImage-231f4 {
+    max-inline-size: 22rem;
+    border-radius: var(--sti-radius-md);
+    aspect-ratio: 1.91;
+    object-fit: cover;
+    margin-block-start: var(--sti-space-2);
+    display: block;
+  }
+}

package/dist/agency/LinkPreview/LinkPreview.d.ts

@@ -0,0 +1,26 @@
+import { PreviewBaseProps, PreviewMediaItem } from "../_shared/Preview.js";
+export interface LinkPreviewProps extends PreviewBaseProps {
+  /** Paylaşıldığı yer: WhatsApp sohbet balonu, Slack iletisi ya da genel kart (iMessage, LinkedIn). */
+  platform?: "whatsapp" | "slack" | "generic";
+  /** Paylaşılan adres. */
+  url: string;
+  /** `og:title`. */
+  title: string;
+  /** `og:description`. */
+  description?: string;
+  /** `og:image` (1,91:1 önerilir). */
+  image?: PreviewMediaItem;
+  /** `og:site_name`; verilmezse alan adı. */
+  siteName?: string;
+  /** Mesajın metni (bağlantıyla birlikte gönderilen). */
+  message?: string;
+  /** Gönderen (Slack) ve saat. */
+  sender?: string;
+  time?: string;
+}
+/**
+ * Bağlantı paylaşım kartı önizlemesi (Open Graph): WhatsApp balonu (görsel, başlık, açıklama, alan
+ * adı ve bağlantı), Slack eki (renk şeridi, site adı, başlık, açıklama, görsel) ya da genel kart.
+ * Paylaşım öncesinde `og:` etiketlerinin nasıl görüneceğini denetlemek içindir.
+ */
+export declare function LinkPreview({ label, platform, url, title, description, image, siteName, message, sender, time, className, id }: LinkPreviewProps): import("react").JSX.Element;

package/dist/agency/LinkPreview/LinkPreview.js

@@ -0,0 +1,136 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { initials } from "../../text/text.js";
+import { displayDomain, truncateText } from "../_shared/platforms.js";
+import { cx } from "../_shared/Preview.js";
+import LinkPreview_module_default from "./LinkPreview.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/LinkPreview/LinkPreview.tsx
+/**
+* Bağlantı paylaşım kartı önizlemesi (Open Graph): WhatsApp balonu (görsel, başlık, açıklama, alan
+* adı ve bağlantı), Slack eki (renk şeridi, site adı, başlık, açıklama, görsel) ya da genel kart.
+* Paylaşım öncesinde `og:` etiketlerinin nasıl görüneceğini denetlemek içindir.
+*/
+function LinkPreview({ label, platform = "whatsapp", url, title, description, image, siteName, message, sender, time, className, id }) {
+	const t = useMessages();
+	const domain = displayDomain(url);
+	const shortTitle = truncateText(title, platform === "whatsapp" ? 80 : 120);
+	const shortDesc = description ? truncateText(description, platform === "whatsapp" ? 120 : 200) : null;
+	const titleText = `${shortTitle.text}${shortTitle.cut ? "…" : ""}`;
+	const descText = shortDesc ? `${shortDesc.text}${shortDesc.cut ? "…" : ""}` : null;
+	if (platform === "slack") return /* @__PURE__ */ jsx("figure", {
+		id,
+		className: cx(LinkPreview_module_default.root, className),
+		"data-platform": "slack",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: LinkPreview_module_default.slack,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: LinkPreview_module_default.slackAvatar,
+				"aria-hidden": "true",
+				children: initials(sender ?? t.agencyYou)
+			}), /* @__PURE__ */ jsxs("div", {
+				className: LinkPreview_module_default.slackBody,
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: LinkPreview_module_default.slackHead,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: LinkPreview_module_default.slackSender,
+							children: sender ?? t.agencyYou
+						}), time ? /* @__PURE__ */ jsx("span", {
+							className: LinkPreview_module_default.time,
+							children: time
+						}) : null]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: LinkPreview_module_default.message,
+						children: [message ? `${message} ` : null, /* @__PURE__ */ jsx("span", {
+							className: LinkPreview_module_default.link,
+							children: url
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: LinkPreview_module_default.attachment,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: LinkPreview_module_default.siteName,
+								children: siteName ?? domain
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: LinkPreview_module_default.slackTitle,
+								children: titleText
+							}),
+							descText ? /* @__PURE__ */ jsx("span", {
+								className: LinkPreview_module_default.desc,
+								children: descText
+							}) : null,
+							image ? /* @__PURE__ */ jsx("img", {
+								className: LinkPreview_module_default.slackImage,
+								src: image.src,
+								alt: image.alt
+							}) : null
+						]
+					})
+				]
+			})]
+		})
+	});
+	const card = /* @__PURE__ */ jsxs("span", {
+		className: LinkPreview_module_default.card,
+		children: [image ? /* @__PURE__ */ jsx("img", {
+			className: LinkPreview_module_default.image,
+			src: image.src,
+			alt: image.alt
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			className: LinkPreview_module_default.cardText,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: LinkPreview_module_default.cardTitle,
+					children: titleText
+				}),
+				descText ? /* @__PURE__ */ jsx("span", {
+					className: LinkPreview_module_default.desc,
+					children: descText
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: LinkPreview_module_default.domain,
+					children: siteName ?? domain
+				})
+			]
+		})]
+	});
+	if (platform === "generic") return /* @__PURE__ */ jsx("figure", {
+		id,
+		className: cx(LinkPreview_module_default.root, className),
+		"data-platform": "generic",
+		"aria-label": label,
+		children: card
+	});
+	return /* @__PURE__ */ jsx("figure", {
+		id,
+		className: cx(LinkPreview_module_default.root, className),
+		"data-platform": "whatsapp",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("div", {
+			className: LinkPreview_module_default.chat,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: LinkPreview_module_default.bubble,
+				children: [
+					card,
+					/* @__PURE__ */ jsxs("p", {
+						className: LinkPreview_module_default.message,
+						children: [message ? `${message} ` : null, /* @__PURE__ */ jsx("span", {
+							className: LinkPreview_module_default.link,
+							children: url
+						})]
+					}),
+					time ? /* @__PURE__ */ jsx("span", {
+						className: LinkPreview_module_default.bubbleTime,
+						children: time
+					}) : null
+				]
+			})
+		})
+	});
+}
+export { LinkPreview };

package/dist/agency/LinkPreview/LinkPreview.module.js

@@ -0,0 +1,27 @@
+import './LinkPreview.css';
+// src/agency/LinkPreview/LinkPreview.module.css
+var LinkPreview_module_default = {
+	"root": "sti-LinkPreview-root-ecdcb",
+	"chat": "sti-LinkPreview-chat-239cc",
+	"bubble": "sti-LinkPreview-bubble-ff4a6",
+	"card": "sti-LinkPreview-card-5bdf4",
+	"image": "sti-LinkPreview-image-95c4f",
+	"cardText": "sti-LinkPreview-cardText-0d7c7",
+	"cardTitle": "sti-LinkPreview-cardTitle-79323",
+	"desc": "sti-LinkPreview-desc-18bfa",
+	"domain": "sti-LinkPreview-domain-b656a",
+	"message": "sti-LinkPreview-message-005b6",
+	"link": "sti-LinkPreview-link-bb4ed",
+	"bubbleTime": "sti-LinkPreview-bubbleTime-213f7",
+	"slack": "sti-LinkPreview-slack-b4ab8",
+	"slackAvatar": "sti-LinkPreview-slackAvatar-1ba90",
+	"slackBody": "sti-LinkPreview-slackBody-8a8e9",
+	"slackHead": "sti-LinkPreview-slackHead-7e1e3",
+	"slackSender": "sti-LinkPreview-slackSender-55a53",
+	"time": "sti-LinkPreview-time-e02b6",
+	"attachment": "sti-LinkPreview-attachment-096b1",
+	"siteName": "sti-LinkPreview-siteName-37dc7",
+	"slackTitle": "sti-LinkPreview-slackTitle-e2471",
+	"slackImage": "sti-LinkPreview-slackImage-231f4"
+};
+export { LinkPreview_module_default as default };

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

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

package/dist/agency/MetaAdPreview/MetaAdPreview.css

@@ -0,0 +1,112 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MetaAdPreview-root-cd0b2 {
+    --sti-preview-max: 30rem;
+    --sti-preview-pad: 0;
+    --sti-preview-gap: 0;
+  }
+
+  .sti-MetaAdPreview-header-871dc {
+    align-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3) var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-MetaAdPreview-who-7f224 {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-MetaAdPreview-sub-ac116 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-MetaAdPreview-more-02ce7 {
+    color: var(--sti-fg-muted);
+    flex: none;
+  }
+
+  .sti-MetaAdPreview-text-9427d {
+    padding: 0 var(--sti-space-4) var(--sti-space-3);
+  }
+
+  .sti-MetaAdPreview-cta-d23f9[data-placement="instagram"] + .sti-MetaAdPreview-text-9427d {
+    padding-block-start: var(--sti-space-3);
+  }
+
+  .sti-MetaAdPreview-cta-d23f9 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3) var(--sti-space-4);
+    background: var(--sti-bg-subtle);
+    display: flex;
+  }
+
+  .sti-MetaAdPreview-cta-d23f9[data-placement="instagram"] {
+    padding-block: var(--sti-space-2);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+  }
+
+  .sti-MetaAdPreview-meta-cc0b3 {
+    gap: calc(var(--sti-space-1) / 2);
+    flex: 1;
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-MetaAdPreview-domain-6530c {
+    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-MetaAdPreview-headline-9565b {
+    font-weight: var(--sti-font-weight-semibold);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-MetaAdPreview-description-71555 {
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-MetaAdPreview-button-5c49f {
+    max-inline-size: 45%;
+    padding: var(--sti-space-2) var(--sti-space-3);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-surface);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    font-weight: var(--sti-font-weight-semibold);
+    text-align: center;
+    flex: none;
+  }
+
+  .sti-MetaAdPreview-ctaRow-907b7 {
+    min-width: 0;
+    font-weight: var(--sti-font-weight-semibold);
+    color: var(--sti-fg-link);
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  .sti-MetaAdPreview-ctaLabel-e9b11 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .sti-MetaAdPreview-chevron-73752 {
+    font-size: var(--sti-font-size-lg);
+  }
+}

package/dist/agency/MetaAdPreview/MetaAdPreview.d.ts

@@ -0,0 +1,30 @@
+import { PreviewAccount, PreviewBaseProps, PreviewMediaItem, PreviewRatio } from "../_shared/Preview.js";
+/** Meta reklam metin sınırları (akışta görünen; reklam yöneticisinin önerdiği değerler). */
+export declare const META_AD_LIMITS: {
+  readonly primaryText: 125;
+  readonly headline: 40;
+  readonly description: 30;
+};
+export interface MetaAdPreviewProps extends PreviewBaseProps {
+  /** Yerleşim: Facebook ya da Instagram akışı. */
+  placement?: "facebook" | "instagram";
+  account: PreviewAccount;
+  /** Birincil metin (görselin üstünde; ilk 125 karakter görünür). */
+  primaryText: string;
+  /** Başlık (görselin altında; 40 karakter). */
+  headline: string;
+  /** Açıklama (başlığın altında; yalnız Facebook'ta, 30 karakter). */
+  description?: string;
+  /** Hedef adres; yalnız alan adı gösterilir. */
+  url: string;
+  /** Eylem çağrısı ("Daha fazla bilgi al", "Şimdi alışveriş yap"). */
+  cta: string;
+  media?: PreviewMediaItem;
+  ratio?: Extract<PreviewRatio, "1:1" | "4:5" | "1.91:1">;
+}
+/**
+ * Meta (Facebook ve Instagram) akış reklamı önizlemesi: hesap ve "Sponsorlu", birincil metin,
+ * görsel, ardından alan adı, başlık, açıklama ve eylem çağrısı düğmesi. Sınırı aşan metin
+ * platformdaki gibi kesilir.
+ */
+export declare function MetaAdPreview({ label, placement, account, primaryText, headline, description, url, cta, media, ratio, className, id }: MetaAdPreviewProps): import("react").JSX.Element;