@stisocial/ui 0.2.1 → 0.3.0

package/dist/agency/RevisionHistory/RevisionHistory.css

@@ -0,0 +1,157 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-RevisionHistory-root-9e87c {
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-RevisionHistory-toolbar-c07d6 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-RevisionHistory-hint-a308e {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-RevisionHistory-list-4a4e5 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: hidden;
+  }
+
+  .sti-RevisionHistory-item-e2940 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-3) var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-RevisionHistory-item-e2940 + .sti-RevisionHistory-item-e2940 {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-RevisionHistory-item-e2940[data-current] {
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-RevisionHistory-pick-4ce38 {
+    flex: none;
+    margin-block-start: var(--sti-space-2);
+  }
+
+  .sti-RevisionHistory-thumb-379f2, .sti-RevisionHistory-badge-1c311 {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-md);
+    flex: none;
+  }
+
+  .sti-RevisionHistory-thumb-379f2 {
+    object-fit: cover;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-RevisionHistory-badge-1c311 {
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-RevisionHistory-body-657cf {
+    gap: var(--sti-space-1);
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-RevisionHistory-title-a7a62 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-RevisionHistory-version-ae1d1 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-RevisionHistory-current-24d2c, .sti-RevisionHistory-status-49463 {
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-RevisionHistory-current-24d2c {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+  }
+
+  .sti-RevisionHistory-status-49463 {
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-RevisionHistory-status-49463[data-status="approved"] {
+    background: var(--sti-bg-success-subtle);
+    color: var(--sti-fg-success-strong);
+  }
+
+  .sti-RevisionHistory-status-49463[data-status="changes"], .sti-RevisionHistory-status-49463[data-status="review"] {
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning-strong);
+  }
+
+  .sti-RevisionHistory-note-6cfdf {
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-RevisionHistory-meta-c88cf {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-RevisionHistory-actions-a1240 {
+    justify-content: flex-end;
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    flex: none;
+    display: flex;
+  }
+
+  @media (width <= 36rem) {
+    .sti-RevisionHistory-item-e2940 {
+      flex-wrap: wrap;
+    }
+
+    .sti-RevisionHistory-actions-a1240 {
+      flex-basis: 100%;
+    }
+  }
+}

package/dist/agency/RevisionHistory/RevisionHistory.d.ts

@@ -0,0 +1,39 @@
+export type RevisionStatus = "draft" | "review" | "changes" | "approved";
+export interface Revision {
+  id: string;
+  /** Sürüm numarası (1, 2, 3…). */
+  version: number;
+  author: {
+    name: string;
+    avatarSrc?: string;
+  };
+  at: Date | string | number;
+  /** Bu sürümde ne değişti. */
+  note?: string;
+  status?: RevisionStatus;
+  /** Küçük görsel (tasarım sürümleri). */
+  thumbnail?: {
+    src: string;
+    alt: string;
+  };
+}
+export interface RevisionHistoryProps {
+  revisions: readonly Revision[];
+  /** Geçerli (yayındaki ya da düzenlenen) sürüm. */
+  currentId?: string;
+  onView?: (id: string) => void;
+  /** Eski sürümü geri yükler (geçerli sürümde çizilmez). */
+  onRestore?: (id: string) => void;
+  /** İki sürüm seçilince "Karşılaştırın" (eski, yeni sırasıyla). */
+  onCompare?: (older: string, newer: string) => void;
+  label?: string;
+  now?: Date | string | number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Sürüm geçmişi: en yeni sürüm üstte; her satırda sürüm numarası, küçük görsel, yazan, zaman,
+ * değişiklik notu ve durum; geçerli sürüm rozetli. Satırdan görüntüleme ve geri yükleme; iki sürüm
+ * seçilip karşılaştırılabilir.
+ */
+export declare function RevisionHistory({ revisions, currentId, onView, onRestore, onCompare, label, now, className, id }: RevisionHistoryProps): import("react").JSX.Element;

package/dist/agency/RevisionHistory/RevisionHistory.js

@@ -0,0 +1,141 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Avatar } from "../../components/Avatar/Avatar.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../../components/Button/Button.js";
+import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { cx } from "../_shared/Preview.js";
+import RevisionHistory_module_default from "./RevisionHistory.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/agency/RevisionHistory/RevisionHistory.tsx
+/**
+* Sürüm geçmişi: en yeni sürüm üstte; her satırda sürüm numarası, küçük görsel, yazan, zaman,
+* değişiklik notu ve durum; geçerli sürüm rozetli. Satırdan görüntüleme ve geri yükleme; iki sürüm
+* seçilip karşılaştırılabilir.
+*/
+function RevisionHistory({ revisions, currentId, onView, onRestore, onCompare, label, now, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [picked, setPicked] = useState([]);
+	const sorted = [...revisions].sort((a, b) => b.version - a.version);
+	const statusText = {
+		draft: t.agencyStatusDraft,
+		review: t.agencyStatusReview,
+		changes: t.agencyApprovalChanges,
+		approved: t.agencyStatusApproved
+	};
+	const toggle = (rid, on) => setPicked((prev) => on ? [...prev.filter((x) => x !== rid), rid].slice(-2) : prev.filter((x) => x !== rid));
+	const compare = () => {
+		const [a, b] = picked.map((pid) => revisions.find((r) => r.id === pid)).filter((r) => Boolean(r)).sort((x, y) => x.version - y.version);
+		if (a && b) onCompare?.(a.id, b.id);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: cx(RevisionHistory_module_default.root, className),
+		"aria-label": label ?? t.agencyRevisions,
+		children: [onCompare ? /* @__PURE__ */ jsxs("div", {
+			className: RevisionHistory_module_default.toolbar,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: RevisionHistory_module_default.hint,
+				children: t.agencyRevisionsCompareHint
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				isDisabled: picked.length !== 2,
+				onPress: compare,
+				children: t.agencyRevisionsCompare
+			})]
+		}) : null, /* @__PURE__ */ jsx("ol", {
+			className: RevisionHistory_module_default.list,
+			children: sorted.map((r) => {
+				const current = r.id === currentId;
+				const at = new Date(r.at);
+				return /* @__PURE__ */ jsxs("li", {
+					className: RevisionHistory_module_default.item,
+					"data-current": current ? "" : void 0,
+					children: [
+						onCompare ? /* @__PURE__ */ jsx(Checkbox, {
+							isSelected: picked.includes(r.id),
+							onChange: (on) => toggle(r.id, on),
+							className: RevisionHistory_module_default.pick,
+							children: /* @__PURE__ */ jsx(VisuallyHidden, { children: template(t.agencyRevisionsPick, { version: r.version }) })
+						}) : null,
+						r.thumbnail ? /* @__PURE__ */ jsx("img", {
+							className: RevisionHistory_module_default.thumb,
+							src: r.thumbnail.src,
+							alt: r.thumbnail.alt
+						}) : /* @__PURE__ */ jsxs("span", {
+							className: RevisionHistory_module_default.badge,
+							"aria-hidden": "true",
+							children: ["v", r.version]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: RevisionHistory_module_default.body,
+							children: [
+								/* @__PURE__ */ jsxs("p", {
+									className: RevisionHistory_module_default.title,
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: RevisionHistory_module_default.version,
+											children: template(t.agencyRevisionsVersion, { version: r.version })
+										}),
+										current ? /* @__PURE__ */ jsx("span", {
+											className: RevisionHistory_module_default.current,
+											children: t.agencyRevisionsCurrent
+										}) : null,
+										r.status ? /* @__PURE__ */ jsx("span", {
+											className: RevisionHistory_module_default.status,
+											"data-status": r.status,
+											children: statusText[r.status]
+										}) : null
+									]
+								}),
+								r.note ? /* @__PURE__ */ jsx("p", {
+									className: RevisionHistory_module_default.note,
+									children: r.note
+								}) : null,
+								/* @__PURE__ */ jsxs("p", {
+									className: RevisionHistory_module_default.meta,
+									children: [
+										/* @__PURE__ */ jsx(Avatar, {
+											name: r.author.name,
+											src: r.author.avatarSrc,
+											size: "xs",
+											isDecorative: true
+										}),
+										/* @__PURE__ */ jsx("span", { children: r.author.name }),
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											children: "·"
+										}),
+										/* @__PURE__ */ jsx("time", {
+											dateTime: at.toISOString(),
+											children: now !== void 0 ? f.relative(at, new Date(now)) : f.dateTime(at)
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: RevisionHistory_module_default.actions,
+							children: [onView ? /* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								onPress: () => onView(r.id),
+								children: [t.agencyRevisionsView, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (v${r.version})` })]
+							}) : null, onRestore && !current ? /* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								onPress: () => onRestore(r.id),
+								children: [t.agencyRevisionsRestore, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (v${r.version})` })]
+							}) : null]
+						})
+					]
+				}, r.id);
+			})
+		})]
+	});
+}
+export { RevisionHistory };

package/dist/agency/RevisionHistory/RevisionHistory.module.js

@@ -0,0 +1,21 @@
+import './RevisionHistory.css';
+// src/agency/RevisionHistory/RevisionHistory.module.css
+var RevisionHistory_module_default = {
+	"root": "sti-RevisionHistory-root-9e87c",
+	"toolbar": "sti-RevisionHistory-toolbar-c07d6",
+	"hint": "sti-RevisionHistory-hint-a308e",
+	"list": "sti-RevisionHistory-list-4a4e5",
+	"item": "sti-RevisionHistory-item-e2940",
+	"pick": "sti-RevisionHistory-pick-4ce38",
+	"thumb": "sti-RevisionHistory-thumb-379f2",
+	"badge": "sti-RevisionHistory-badge-1c311",
+	"body": "sti-RevisionHistory-body-657cf",
+	"title": "sti-RevisionHistory-title-a7a62",
+	"version": "sti-RevisionHistory-version-ae1d1",
+	"current": "sti-RevisionHistory-current-24d2c",
+	"status": "sti-RevisionHistory-status-49463",
+	"note": "sti-RevisionHistory-note-6cfdf",
+	"meta": "sti-RevisionHistory-meta-c88cf",
+	"actions": "sti-RevisionHistory-actions-a1240"
+};
+export { RevisionHistory_module_default as default };

package/dist/agency/SafeZoneOverlay/SafeZoneOverlay.css

@@ -0,0 +1,139 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SafeZoneOverlay-root-ed3c9 {
+    --sti-sz-top: 14%;
+    --sti-sz-bottom: 20%;
+    --sti-sz-left: 6%;
+    --sti-sz-right: 6%;
+    justify-items: center;
+    gap: var(--sti-space-2);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 20rem;
+    font-family: var(--sti-font-text);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-SafeZoneOverlay-root-ed3c9[data-platform="instagram-reel"] {
+    --sti-sz-top: 14%;
+    --sti-sz-bottom: 35%;
+    --sti-sz-right: 16%;
+  }
+
+  .sti-SafeZoneOverlay-root-ed3c9[data-platform="tiktok"] {
+    --sti-sz-top: 8%;
+    --sti-sz-bottom: 26%;
+    --sti-sz-right: 14%;
+  }
+
+  .sti-SafeZoneOverlay-root-ed3c9[data-platform="youtube-short"] {
+    --sti-sz-top: 12%;
+    --sti-sz-bottom: 28%;
+    --sti-sz-right: 16%;
+  }
+
+  .sti-SafeZoneOverlay-frame-a640c {
+    aspect-ratio: 9 / 16;
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    inline-size: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-SafeZoneOverlay-content-42562 {
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-SafeZoneOverlay-content-42562 > :is(img, video, picture) {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-SafeZoneOverlay-overlay-80165 {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-SafeZoneOverlay-zone-d8dff {
+    background: repeating-linear-gradient(135deg,
+      var(--sti-scrim) 0 var(--sti-space-2),
+      transparent var(--sti-space-2) var(--sti-space-4));
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .sti-SafeZoneOverlay-zone-d8dff[data-edge="top"] {
+    block-size: var(--sti-sz-top);
+    inset: 0 0 auto;
+  }
+
+  .sti-SafeZoneOverlay-zone-d8dff[data-edge="bottom"] {
+    block-size: var(--sti-sz-bottom);
+    inset: auto 0 0;
+  }
+
+  .sti-SafeZoneOverlay-zone-d8dff[data-edge="left"] {
+    inset-block: var(--sti-sz-top) var(--sti-sz-bottom);
+    inline-size: var(--sti-sz-left);
+    inset-inline-start: 0;
+  }
+
+  .sti-SafeZoneOverlay-zone-d8dff[data-edge="right"] {
+    inset-block: var(--sti-sz-top) var(--sti-sz-bottom);
+    inline-size: var(--sti-sz-right);
+    inset-inline-end: 0;
+  }
+
+  .sti-SafeZoneOverlay-safe-133b4 {
+    inset-block: var(--sti-sz-top) var(--sti-sz-bottom);
+    inset-inline: var(--sti-sz-left) var(--sti-sz-right);
+    border: var(--sti-border-width-strong) dashed var(--sti-fill-accent);
+    justify-content: center;
+    align-items: flex-start;
+    display: flex;
+    position: absolute;
+  }
+
+  .sti-SafeZoneOverlay-tag-d5e45, .sti-SafeZoneOverlay-safeTag-55a8e {
+    padding: 0 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-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+    white-space: nowrap;
+  }
+
+  .sti-SafeZoneOverlay-safeTag-55a8e {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    margin-block-start: var(--sti-space-2);
+  }
+
+  .sti-SafeZoneOverlay-caption-8deb4 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    text-align: center;
+  }
+
+  @media (forced-colors: active) {
+    .sti-SafeZoneOverlay-safe-133b4 {
+      border-color: highlight;
+    }
+
+    .sti-SafeZoneOverlay-zone-d8dff {
+      outline: var(--sti-border-width) dashed CanvasText;
+      background: none;
+    }
+  }
+}

package/dist/agency/SafeZoneOverlay/SafeZoneOverlay.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+export type SafeZonePlatform = "instagram-story" | "instagram-reel" | "tiktok" | "youtube-short";
+/** Platform arayüzünün kapladığı kenar payları (yüzde; 1080 × 1920 tuval üzerinde). */
+export declare const SAFE_ZONES: Record<SafeZonePlatform, {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}>;
+export interface SafeZoneOverlayProps {
+  platform: SafeZonePlatform;
+  /** 9:16 içerik (görsel ya da video); kabı kaplar. */
+  children: ReactNode;
+  /** Kılavuz görünür mü (çağıran açar, kapatır). Varsayılan `true`. */
+  visible?: boolean;
+  /** Kenar alanlarında açıklama etiketi. Varsayılan `true`. */
+  showLabels?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Hikâye, Reels, TikTok ve Shorts için güvenli alan kılavuzu: 9:16 içeriğin üstüne platform
+ * arayüzünün (profil satırı, açıklama, eylem sütunu) kapladığı kenarları taralı olarak çizer;
+ * metin ve logo ortadaki güvenli alanda kalmalıdır. Kılavuz süstür; alt yazı platformu ve payları
+ * metinle söyler.
+ */
+export declare function SafeZoneOverlay({ platform, children, visible, showLabels, className, id }: SafeZoneOverlayProps): import("react").JSX.Element;

package/dist/agency/SafeZoneOverlay/SafeZoneOverlay.js

@@ -0,0 +1,108 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { cx } from "../_shared/Preview.js";
+import SafeZoneOverlay_module_default from "./SafeZoneOverlay.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/SafeZoneOverlay/SafeZoneOverlay.tsx
+/** Platform arayüzünün kapladığı kenar payları (yüzde; 1080 × 1920 tuval üzerinde). */
+const SAFE_ZONES = {
+	"instagram-story": {
+		top: 14,
+		bottom: 20,
+		left: 6,
+		right: 6
+	},
+	"instagram-reel": {
+		top: 14,
+		bottom: 35,
+		left: 6,
+		right: 16
+	},
+	tiktok: {
+		top: 8,
+		bottom: 26,
+		left: 6,
+		right: 14
+	},
+	"youtube-short": {
+		top: 12,
+		bottom: 28,
+		left: 6,
+		right: 16
+	}
+};
+const NAMES = {
+	"instagram-story": "Instagram Hikâye",
+	"instagram-reel": "Instagram Reels",
+	tiktok: "TikTok",
+	"youtube-short": "YouTube Shorts"
+};
+/**
+* Hikâye, Reels, TikTok ve Shorts için güvenli alan kılavuzu: 9:16 içeriğin üstüne platform
+* arayüzünün (profil satırı, açıklama, eylem sütunu) kapladığı kenarları taralı olarak çizer;
+* metin ve logo ortadaki güvenli alanda kalmalıdır. Kılavuz süstür; alt yazı platformu ve payları
+* metinle söyler.
+*/
+function SafeZoneOverlay({ platform, children, visible = true, showLabels = true, className, id }) {
+	const t = useMessages();
+	const z = SAFE_ZONES[platform];
+	return /* @__PURE__ */ jsxs("figure", {
+		id,
+		className: cx(SafeZoneOverlay_module_default.root, className),
+		"data-platform": platform,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: SafeZoneOverlay_module_default.frame,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: SafeZoneOverlay_module_default.content,
+				children
+			}), visible ? /* @__PURE__ */ jsxs("div", {
+				className: SafeZoneOverlay_module_default.overlay,
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: SafeZoneOverlay_module_default.zone,
+						"data-edge": "top",
+						children: showLabels ? /* @__PURE__ */ jsx("span", {
+							className: SafeZoneOverlay_module_default.tag,
+							children: t.agencySafeZoneUi
+						}) : null
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: SafeZoneOverlay_module_default.zone,
+						"data-edge": "bottom",
+						children: showLabels ? /* @__PURE__ */ jsx("span", {
+							className: SafeZoneOverlay_module_default.tag,
+							children: t.agencySafeZoneCaption
+						}) : null
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: SafeZoneOverlay_module_default.zone,
+						"data-edge": "left"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: SafeZoneOverlay_module_default.zone,
+						"data-edge": "right"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: SafeZoneOverlay_module_default.safe,
+						children: showLabels ? /* @__PURE__ */ jsx("span", {
+							className: SafeZoneOverlay_module_default.safeTag,
+							children: t.agencySafeZone
+						}) : null
+					})
+				]
+			}) : null]
+		}), /* @__PURE__ */ jsx("figcaption", {
+			className: SafeZoneOverlay_module_default.caption,
+			children: template(t.agencySafeZoneSummary, {
+				platform: NAMES[platform],
+				top: z.top,
+				bottom: z.bottom,
+				left: z.left,
+				right: z.right
+			})
+		})]
+	});
+}
+export { SAFE_ZONES, SafeZoneOverlay };

package/dist/agency/SafeZoneOverlay/SafeZoneOverlay.module.js

@@ -0,0 +1,14 @@
+import './SafeZoneOverlay.css';
+// src/agency/SafeZoneOverlay/SafeZoneOverlay.module.css
+var SafeZoneOverlay_module_default = {
+	"root": "sti-SafeZoneOverlay-root-ed3c9",
+	"frame": "sti-SafeZoneOverlay-frame-a640c",
+	"content": "sti-SafeZoneOverlay-content-42562",
+	"overlay": "sti-SafeZoneOverlay-overlay-80165",
+	"zone": "sti-SafeZoneOverlay-zone-d8dff",
+	"safe": "sti-SafeZoneOverlay-safe-133b4",
+	"tag": "sti-SafeZoneOverlay-tag-d5e45",
+	"safeTag": "sti-SafeZoneOverlay-safeTag-55a8e",
+	"caption": "sti-SafeZoneOverlay-caption-8deb4"
+};
+export { SafeZoneOverlay_module_default as default };

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

@@ -0,0 +1,2 @@
+import { SAFE_ZONES, SafeZoneOverlay, SafeZoneOverlayProps, SafeZonePlatform } from "./SafeZoneOverlay.js";
+export { SAFE_ZONES, SafeZoneOverlay, SafeZoneOverlayProps, SafeZonePlatform };