@stisocial/ui 0.2.1 → 0.3.0

package/dist/agency/ChannelPerformanceTable/ChannelPerformanceTable.js

@@ -0,0 +1,156 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { ArrowDownIcon } from "../../icons/generated/ArrowDownIcon.js";
+import { ArrowUpIcon } from "../../icons/generated/ArrowUpIcon.js";
+import { cx } from "../_shared/Preview.js";
+import ChannelPerformanceTable_module_default from "./ChannelPerformanceTable.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/agency/ChannelPerformanceTable/ChannelPerformanceTable.tsx
+/** Türetilmiş ölçütler: TO (tıklama oranı), TBM, edinme başı maliyet, reklam harcaması getirisi. */
+function channelMetrics(row) {
+	return {
+		...row,
+		ctr: row.impressions > 0 ? row.clicks / row.impressions : null,
+		cpc: row.clicks > 0 ? row.spend / row.clicks : null,
+		cpa: row.conversions > 0 ? row.spend / row.conversions : null,
+		roas: row.revenue !== void 0 && row.spend > 0 ? row.revenue / row.spend : null
+	};
+}
+/** Satırların toplamı (türetilmiş ölçütler toplamlardan yeniden hesaplanır). */
+function totalRow(rows, name) {
+	const sum = (k) => rows.reduce((a, r) => a + r[k], 0);
+	const hasRevenue = rows.some((r) => r.revenue !== void 0);
+	return channelMetrics({
+		id: "total",
+		channel: name,
+		spend: sum("spend"),
+		impressions: sum("impressions"),
+		clicks: sum("clicks"),
+		conversions: sum("conversions"),
+		revenue: hasRevenue ? rows.reduce((a, r) => a + (r.revenue ?? 0), 0) : void 0
+	});
+}
+/**
+* Kanal performans tablosu: harcama, gösterim, tıklama, TO, TBM, dönüşüm, edinme başı maliyet ve
+* ROAS; başlıklardan sıralanır (yön `aria-sort` ile), altta toplam satırı. Sayılar sağa hizalı ve
+* tablo rakamlarıyla; dar ekranda tablo yatay kayar, kanal sütunu yapışkan.
+*/
+function ChannelPerformanceTable({ rows, caption, currency = "TRY", defaultSort = {
+	metric: "spend",
+	direction: "descending"
+}, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [sort, setSort] = useState(defaultSort);
+	const sorted = [...rows.map(channelMetrics)].sort((a, b) => {
+		const dir = sort.direction === "ascending" ? 1 : -1;
+		if (sort.metric === "channel") return a.channel.localeCompare(b.channel, "tr") * dir;
+		return ((a[sort.metric] ?? Number.NEGATIVE_INFINITY) - (b[sort.metric] ?? Number.NEGATIVE_INFINITY)) * dir;
+	});
+	const total = totalRow(rows, t.agencyPerfTotal);
+	const money = (v, whole = true) => v === null ? "—" : f.currency(v, {
+		currency,
+		whole
+	});
+	const columns = [
+		{
+			key: "spend",
+			label: t.agencyPerfSpend,
+			render: (r) => money(r.spend)
+		},
+		{
+			key: "impressions",
+			label: t.agencyPerfImpressions,
+			render: (r) => f.number(r.impressions)
+		},
+		{
+			key: "clicks",
+			label: t.agencyPerfClicks,
+			render: (r) => f.number(r.clicks)
+		},
+		{
+			key: "ctr",
+			label: t.agencyPerfCtr,
+			render: (r) => r.ctr === null ? "—" : f.percent(r.ctr, { digits: 2 })
+		},
+		{
+			key: "cpc",
+			label: t.agencyPerfCpc,
+			render: (r) => money(r.cpc, false)
+		},
+		{
+			key: "conversions",
+			label: t.agencyPerfConversions,
+			render: (r) => f.number(r.conversions)
+		},
+		{
+			key: "cpa",
+			label: t.agencyPerfCpa,
+			render: (r) => money(r.cpa, false)
+		},
+		{
+			key: "roas",
+			label: t.agencyPerfRoas,
+			render: (r) => r.roas === null ? "—" : `${f.number(r.roas, { maximumFractionDigits: 2 })}×`
+		}
+	];
+	const head = (key, label) => {
+		const active = sort.metric === key;
+		return /* @__PURE__ */ jsx("th", {
+			scope: "col",
+			"aria-sort": active ? sort.direction : void 0,
+			className: key === "channel" ? ChannelPerformanceTable_module_default.channelHead : ChannelPerformanceTable_module_default.numHead,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ChannelPerformanceTable_module_default.sort,
+				onClick: () => setSort({
+					metric: key,
+					direction: active && sort.direction === "descending" ? "ascending" : "descending"
+				}),
+				children: [label, /* @__PURE__ */ jsx("span", {
+					className: ChannelPerformanceTable_module_default.sortIcon,
+					"aria-hidden": "true",
+					"data-active": active ? "" : void 0,
+					children: active && sort.direction === "ascending" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+				})]
+			})
+		}, key);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx(ChannelPerformanceTable_module_default.root, className),
+		children: /* @__PURE__ */ jsx("section", {
+			className: ChannelPerformanceTable_module_default.scroller,
+			tabIndex: 0,
+			"aria-label": caption,
+			children: /* @__PURE__ */ jsxs("table", {
+				className: ChannelPerformanceTable_module_default.table,
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						className: ChannelPerformanceTable_module_default.caption,
+						children: caption
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [head("channel", t.agencyPerfChannel), columns.map((c) => head(c.key, c.label))] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: sorted.map((r) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						className: ChannelPerformanceTable_module_default.channel,
+						children: r.channel
+					}), columns.map((c) => /* @__PURE__ */ jsx("td", {
+						className: ChannelPerformanceTable_module_default.num,
+						children: c.render(r)
+					}, c.key))] }, r.id)) }),
+					/* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						className: ChannelPerformanceTable_module_default.channel,
+						children: total.channel
+					}), columns.map((c) => /* @__PURE__ */ jsx("td", {
+						className: ChannelPerformanceTable_module_default.num,
+						children: c.render(total)
+					}, c.key))] }) })
+				]
+			})
+		})
+	});
+}
+export { ChannelPerformanceTable, channelMetrics, totalRow };

package/dist/agency/ChannelPerformanceTable/ChannelPerformanceTable.module.js

@@ -0,0 +1,15 @@
+import './ChannelPerformanceTable.css';
+// src/agency/ChannelPerformanceTable/ChannelPerformanceTable.module.css
+var ChannelPerformanceTable_module_default = {
+	"root": "sti-ChannelPerformanceTable-root-4eb12",
+	"scroller": "sti-ChannelPerformanceTable-scroller-a54f8",
+	"table": "sti-ChannelPerformanceTable-table-6d83e",
+	"caption": "sti-ChannelPerformanceTable-caption-a0bd8",
+	"channelHead": "sti-ChannelPerformanceTable-channelHead-b2195",
+	"channel": "sti-ChannelPerformanceTable-channel-780f5",
+	"numHead": "sti-ChannelPerformanceTable-numHead-e0d70",
+	"num": "sti-ChannelPerformanceTable-num-c7e74",
+	"sort": "sti-ChannelPerformanceTable-sort-1eb61",
+	"sortIcon": "sti-ChannelPerformanceTable-sortIcon-3bfb3"
+};
+export { ChannelPerformanceTable_module_default as default };

package/dist/agency/ColorPaletteDisplay/ColorPaletteDisplay.css

@@ -0,0 +1,117 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ColorPaletteDisplay-root-83842 {
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+  }
+
+  .sti-ColorPaletteDisplay-list-70021 {
+    gap: var(--sti-space-3);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-ColorPaletteDisplay-item-5f009 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-ColorPaletteDisplay-swatch-6739e {
+    --sti-swatch: transparent;
+    block-size: var(--sti-space-24);
+    padding: var(--sti-space-2);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-swatch);
+    justify-content: flex-end;
+    align-items: flex-end;
+    display: flex;
+  }
+
+  .sti-ColorPaletteDisplay-swatch-6739e:not([data-placed]) {
+    background: var(--sti-bg-subtle);
+  }
+
+  .sti-ColorPaletteDisplay-sample-df655 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .sti-ColorPaletteDisplay-sample-df655[data-on="white"] {
+    color: #fff;
+  }
+
+  .sti-ColorPaletteDisplay-sample-df655[data-on="black"] {
+    color: #000;
+  }
+
+  .sti-ColorPaletteDisplay-body-92953 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-ColorPaletteDisplay-name-a19ba {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-ColorPaletteDisplay-usage-a8299 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  .sti-ColorPaletteDisplay-codes-18118 {
+    gap: var(--sti-space-1);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-ColorPaletteDisplay-code-a18ba {
+    font-size: var(--sti-font-size-xs);
+    grid-template-columns: 4.5rem minmax(0, 1fr);
+    align-items: center;
+    display: grid;
+  }
+
+  .sti-ColorPaletteDisplay-code-a18ba dt {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-ColorPaletteDisplay-code-a18ba dd {
+    align-items: center;
+    gap: var(--sti-space-1);
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-ColorPaletteDisplay-value-6946d {
+    font-family: var(--sti-font-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-ColorPaletteDisplay-contrast-7fc43 {
+    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-ColorPaletteDisplay-swatch-6739e {
+      forced-color-adjust: none;
+    }
+  }
+}

package/dist/agency/ColorPaletteDisplay/ColorPaletteDisplay.d.ts

@@ -0,0 +1,31 @@
+export interface BrandColor {
+  /** Ad ("Kahve kahverengisi"). */
+  name: string;
+  /** HEX ("#5B3A29"). */
+  hex: string;
+  /** Kullanım ("Ana renk; başlıklar ve düğmeler"). */
+  usage?: string;
+  /** Baskı değerleri (isteğe bağlı). */
+  cmyk?: string;
+  pantone?: string;
+}
+/** "#5B3A29" ya da "5b3a29" ya da "#abc" → [r, g, b]; geçersizse `null`. */
+export declare function hexToRgb(hex: string): [number, number, number] | null;
+/** WCAG karşıtlık oranı (1–21). */
+export declare function contrastRatio(a: [number, number, number], b: [number, number, number]): number;
+/** Karşıtlık düzeyi: AAA (7), AA (4,5), AA büyük metin (3) ya da yetersiz. */
+export declare function contrastLevel(ratio: number): "AAA" | "AA" | "AA18" | "fail";
+export interface ColorPaletteDisplayProps {
+  colors: readonly BrandColor[];
+  /** Bölgenin adı; verilmezse "Renk paleti". */
+  label?: string;
+  /** Beyaz ve siyah metinle karşıtlık değerlendirmesi. Varsayılan `true`. */
+  showContrast?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Marka renk paleti: her renk için örnek, ad, kullanım, HEX (kopyalanabilir), RGB, varsa CMYK ve
+ * Pantone; beyaz ve siyah metinle WCAG karşıtlık oranı ve düzeyi. Renk CSSOM ile boyanır.
+ */
+export declare function ColorPaletteDisplay({ colors, label, showContrast, className, id }: ColorPaletteDisplayProps): import("react").JSX.Element;

package/dist/agency/ColorPaletteDisplay/ColorPaletteDisplay.js

@@ -0,0 +1,143 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { cx } from "../_shared/Preview.js";
+import ColorPaletteDisplay_module_default from "./ColorPaletteDisplay.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+// src/agency/ColorPaletteDisplay/ColorPaletteDisplay.tsx
+/** "#5B3A29" ya da "5b3a29" ya da "#abc" → [r, g, b]; geçersizse `null`. */
+function hexToRgb(hex) {
+	const h = hex.trim().replace(/^#/, "");
+	const full = h.length === 3 ? [...h].map((c) => c + c).join("") : h;
+	if (!/^[\da-f]{6}$/i.test(full)) return null;
+	return [
+		0,
+		2,
+		4
+	].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
+}
+const lin = (c) => {
+	const s = c / 255;
+	return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+};
+/** WCAG karşıtlık oranı (1–21). */
+function contrastRatio(a, b) {
+	const L = (c) => .2126 * lin(c[0]) + .7152 * lin(c[1]) + .0722 * lin(c[2]);
+	const [x, y] = [L(a), L(b)].sort((p, q) => q - p);
+	return (x + .05) / (y + .05);
+}
+/** Karşıtlık düzeyi: AAA (7), AA (4,5), AA büyük metin (3) ya da yetersiz. */
+function contrastLevel(ratio) {
+	return ratio >= 7 ? "AAA" : ratio >= 4.5 ? "AA" : ratio >= 3 ? "AA18" : "fail";
+}
+/**
+* Marka renk paleti: her renk için örnek, ad, kullanım, HEX (kopyalanabilir), RGB, varsa CMYK ve
+* Pantone; beyaz ve siyah metinle WCAG karşıtlık oranı ve düzeyi. Renk CSSOM ile boyanır.
+*/
+function ColorPaletteDisplay({ colors, label, showContrast = true, className, id }) {
+	const t = useMessages();
+	const paint = useCallback((hex) => (el) => {
+		if (!el) return;
+		el.style.setProperty("--sti-swatch", hex);
+		el.dataset.placed = "";
+	}, []);
+	const levelText = (l) => l === "fail" ? t.agencyColorFail : l === "AA18" ? t.agencyColorLarge : l;
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: cx(ColorPaletteDisplay_module_default.root, className),
+		"aria-label": label ?? t.agencyColorPalette,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: ColorPaletteDisplay_module_default.list,
+			children: colors.map((c) => {
+				const rgb = hexToRgb(c.hex);
+				const hex = rgb ? `#${c.hex.trim().replace(/^#/, "").toUpperCase()}` : c.hex;
+				const white = rgb ? contrastRatio(rgb, [
+					255,
+					255,
+					255
+				]) : null;
+				const black = rgb ? contrastRatio(rgb, [
+					0,
+					0,
+					0
+				]) : null;
+				return /* @__PURE__ */ jsxs("li", {
+					className: ColorPaletteDisplay_module_default.item,
+					children: [/* @__PURE__ */ jsx("span", {
+						ref: rgb ? paint(hex) : void 0,
+						className: ColorPaletteDisplay_module_default.swatch,
+						"aria-hidden": "true",
+						children: showContrast && white !== null && black !== null ? /* @__PURE__ */ jsx("span", {
+							className: ColorPaletteDisplay_module_default.sample,
+							"data-on": white >= black ? "white" : "black",
+							children: "Aa"
+						}) : null
+					}), /* @__PURE__ */ jsxs("div", {
+						className: ColorPaletteDisplay_module_default.body,
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: ColorPaletteDisplay_module_default.name,
+								children: c.name
+							}),
+							c.usage ? /* @__PURE__ */ jsx("p", {
+								className: ColorPaletteDisplay_module_default.usage,
+								children: c.usage
+							}) : null,
+							/* @__PURE__ */ jsxs("dl", {
+								className: ColorPaletteDisplay_module_default.codes,
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: ColorPaletteDisplay_module_default.code,
+										children: [/* @__PURE__ */ jsx("dt", { children: "HEX" }), /* @__PURE__ */ jsxs("dd", { children: [/* @__PURE__ */ jsx("span", {
+											className: ColorPaletteDisplay_module_default.value,
+											children: hex
+										}), /* @__PURE__ */ jsx(CopyButton, {
+											value: hex,
+											label: template(t.agencyColorCopy, { name: c.name }),
+											iconOnly: true,
+											size: "sm",
+											variant: "ghost"
+										})] })]
+									}),
+									rgb ? /* @__PURE__ */ jsxs("div", {
+										className: ColorPaletteDisplay_module_default.code,
+										children: [/* @__PURE__ */ jsx("dt", { children: "RGB" }), /* @__PURE__ */ jsx("dd", {
+											className: ColorPaletteDisplay_module_default.value,
+											children: rgb.join(", ")
+										})]
+									}) : null,
+									c.cmyk ? /* @__PURE__ */ jsxs("div", {
+										className: ColorPaletteDisplay_module_default.code,
+										children: [/* @__PURE__ */ jsx("dt", { children: "CMYK" }), /* @__PURE__ */ jsx("dd", {
+											className: ColorPaletteDisplay_module_default.value,
+											children: c.cmyk
+										})]
+									}) : null,
+									c.pantone ? /* @__PURE__ */ jsxs("div", {
+										className: ColorPaletteDisplay_module_default.code,
+										children: [/* @__PURE__ */ jsx("dt", { children: "Pantone" }), /* @__PURE__ */ jsx("dd", {
+											className: ColorPaletteDisplay_module_default.value,
+											children: c.pantone
+										})]
+									}) : null
+								]
+							}),
+							showContrast && white !== null && black !== null ? /* @__PURE__ */ jsx("p", {
+								className: ColorPaletteDisplay_module_default.contrast,
+								children: template(t.agencyColorContrast, {
+									white: white.toFixed(1).replace(".", ","),
+									whiteLevel: levelText(contrastLevel(white)),
+									black: black.toFixed(1).replace(".", ","),
+									blackLevel: levelText(contrastLevel(black))
+								})
+							}) : null
+						]
+					})]
+				}, `${c.name}-${c.hex}`);
+			})
+		})
+	});
+}
+export { ColorPaletteDisplay, contrastLevel, contrastRatio, hexToRgb };

package/dist/agency/ColorPaletteDisplay/ColorPaletteDisplay.module.js

@@ -0,0 +1,17 @@
+import './ColorPaletteDisplay.css';
+// src/agency/ColorPaletteDisplay/ColorPaletteDisplay.module.css
+var ColorPaletteDisplay_module_default = {
+	"root": "sti-ColorPaletteDisplay-root-83842",
+	"list": "sti-ColorPaletteDisplay-list-70021",
+	"item": "sti-ColorPaletteDisplay-item-5f009",
+	"swatch": "sti-ColorPaletteDisplay-swatch-6739e",
+	"sample": "sti-ColorPaletteDisplay-sample-df655",
+	"body": "sti-ColorPaletteDisplay-body-92953",
+	"name": "sti-ColorPaletteDisplay-name-a19ba",
+	"usage": "sti-ColorPaletteDisplay-usage-a8299",
+	"codes": "sti-ColorPaletteDisplay-codes-18118",
+	"code": "sti-ColorPaletteDisplay-code-a18ba",
+	"value": "sti-ColorPaletteDisplay-value-6946d",
+	"contrast": "sti-ColorPaletteDisplay-contrast-7fc43"
+};
+export { ColorPaletteDisplay_module_default as default };

package/dist/agency/ContentCalendar/ContentCalendar.css

@@ -0,0 +1,58 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ContentCalendar-root-18757 {
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-ContentCalendar-legend-7e05e {
+    gap: var(--sti-space-2) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-ContentCalendar-legendItem-fe4a9 {
+    --sti-legend-dot: var(--sti-fill-accent);
+    align-items: center;
+    gap: var(--sti-space-2);
+    display: inline-flex;
+  }
+
+  .sti-ContentCalendar-legendItem-fe4a9[data-tone="success"] {
+    --sti-legend-dot: var(--sti-fg-success);
+  }
+
+  .sti-ContentCalendar-legendItem-fe4a9[data-tone="warning"] {
+    --sti-legend-dot: var(--sti-fg-warning);
+  }
+
+  .sti-ContentCalendar-legendItem-fe4a9[data-tone="info"] {
+    --sti-legend-dot: var(--sti-fg-info);
+  }
+
+  .sti-ContentCalendar-legendItem-fe4a9[data-tone="neutral"] {
+    --sti-legend-dot: var(--sti-border-strong);
+  }
+
+  .sti-ContentCalendar-dot-5f541 {
+    inline-size: var(--sti-space-2);
+    block-size: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-legend-dot);
+  }
+
+  @media (forced-colors: active) {
+    .sti-ContentCalendar-dot-5f541 {
+      background: canvastext;
+    }
+  }
+}

package/dist/agency/ContentCalendar/ContentCalendar.d.ts

@@ -0,0 +1,33 @@
+import { Platform } from "../_shared/platforms.js";
+import { CalendarViewMode } from "../../components/CalendarView/CalendarView.js";
+export type PostStatus = "draft" | "review" | "approved" | "scheduled" | "published";
+export interface CalendarPost {
+  id: string;
+  title: string;
+  platforms: readonly Platform[];
+  status: PostStatus;
+  /** Paylaşım anı. */
+  at: Date | string | number;
+  /** Takvimde kapladığı süre (dakika). Varsayılan 30. */
+  duration?: number;
+}
+export interface ContentCalendarProps {
+  posts: readonly CalendarPost[];
+  /** Takvimin adı; verilmezse "İçerik takvimi". */
+  label?: string;
+  /** Gönderiyi açar (ayrıntı paneli, düzenleyici). */
+  onPostOpen?: (id: string) => void;
+  view?: CalendarViewMode;
+  defaultView?: CalendarViewMode;
+  onViewChange?: (view: CalendarViewMode) => void;
+  defaultDate?: string;
+  today?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * İçerik takvimi: gönderiler ay, hafta ve gün görünümünde durumuna göre renkli (taslak, onayda,
+ * onaylandı, planlandı, yayımlandı); başlıkta platformlar. Üstte platform süzgeci (çok seçimli
+ * çipler), altta durum açıklaması. Takvim ve klavye davranışı CalendarView'dandır.
+ */
+export declare function ContentCalendar({ posts, label, onPostOpen, view, defaultView, onViewChange, defaultDate, today, className, id }: ContentCalendarProps): import("react").JSX.Element;

package/dist/agency/ContentCalendar/ContentCalendar.js

@@ -0,0 +1,98 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CalendarView } from "../../components/CalendarView/CalendarView.js";
+import { Chip, ChipGroup } from "../../components/Chip/Chip.js";
+import { cx } from "../_shared/Preview.js";
+import { PLATFORM_NAMES } from "../PlatformCharacterLimit/PlatformCharacterLimit.js";
+import ContentCalendar_module_default from "./ContentCalendar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+// src/agency/ContentCalendar/ContentCalendar.tsx
+const TONE = {
+	draft: "neutral",
+	review: "warning",
+	approved: "info",
+	scheduled: "accent",
+	published: "success"
+};
+const ORDER = [
+	"draft",
+	"review",
+	"approved",
+	"scheduled",
+	"published"
+];
+/**
+* İçerik takvimi: gönderiler ay, hafta ve gün görünümünde durumuna göre renkli (taslak, onayda,
+* onaylandı, planlandı, yayımlandı); başlıkta platformlar. Üstte platform süzgeci (çok seçimli
+* çipler), altta durum açıklaması. Takvim ve klavye davranışı CalendarView'dandır.
+*/
+function ContentCalendar({ posts, label, onPostOpen, view, defaultView = "month", onViewChange, defaultDate, today, className, id }) {
+	const t = useMessages();
+	const used = useMemo(() => {
+		const set = /* @__PURE__ */ new Set();
+		for (const p of posts) for (const pl of p.platforms) set.add(pl);
+		return [...set];
+	}, [posts]);
+	const [selected, setSelected] = useState(() => new Set(used));
+	const statusName = {
+		draft: t.agencyStatusDraft,
+		review: t.agencyStatusReview,
+		approved: t.agencyStatusApproved,
+		scheduled: t.agencyStatusScheduled,
+		published: t.agencyStatusPublished
+	};
+	const events = posts.filter((p) => p.platforms.some((pl) => selected.has(pl))).map((p) => {
+		const start = new Date(p.at);
+		const end = new Date(start.getTime() + (p.duration ?? 30) * 6e4);
+		const names = p.platforms.map((pl) => PLATFORM_NAMES[pl]).join(", ");
+		return {
+			id: p.id,
+			title: `${p.title} · ${names} · ${statusName[p.status]}`,
+			start,
+			end,
+			tone: TONE[p.status]
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(ContentCalendar_module_default.root, className),
+		children: [
+			used.length > 1 ? /* @__PURE__ */ jsx(ChipGroup, {
+				label: t.agencyCalendarFilter,
+				size: "sm",
+				selectionMode: "multiple",
+				selectedKeys: selected,
+				onSelectionChange: setSelected,
+				className: ContentCalendar_module_default.filter,
+				children: used.map((pl) => /* @__PURE__ */ jsx(Chip, {
+					id: pl,
+					children: PLATFORM_NAMES[pl]
+				}, pl))
+			}) : null,
+			/* @__PURE__ */ jsx(CalendarView, {
+				label: label ?? t.agencyCalendar,
+				events,
+				view,
+				defaultView,
+				onViewChange,
+				defaultDate,
+				today,
+				onEventAction: onPostOpen
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: ContentCalendar_module_default.legend,
+				"aria-label": t.agencyCalendarLegend,
+				children: ORDER.map((s) => /* @__PURE__ */ jsxs("li", {
+					className: ContentCalendar_module_default.legendItem,
+					"data-tone": TONE[s],
+					children: [/* @__PURE__ */ jsx("span", {
+						className: ContentCalendar_module_default.dot,
+						"aria-hidden": "true"
+					}), statusName[s]]
+				}, s))
+			})
+		]
+	});
+}
+export { ContentCalendar };

package/dist/agency/ContentCalendar/ContentCalendar.module.js

@@ -0,0 +1,9 @@
+import './ContentCalendar.css';
+// src/agency/ContentCalendar/ContentCalendar.module.css
+var ContentCalendar_module_default = {
+	"root": "sti-ContentCalendar-root-18757",
+	"legend": "sti-ContentCalendar-legend-7e05e",
+	"legendItem": "sti-ContentCalendar-legendItem-fe4a9",
+	"dot": "sti-ContentCalendar-dot-5f541"
+};
+export { ContentCalendar_module_default as default };