@manta-eu/react 0.1.0

package/dist/ad-preview/GoogleAdPreview.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { clampIndex } from "./ad-copy.js";
+import { GoogleSearchAdPreview } from "#components/ad-preview/index";
+const noIndices = { headline: 0, description: 0 };
+function PlaceholderCard(props) {
+    return (_jsx("div", { className: "flex h-full min-h-40 w-[440px] max-w-full items-center justify-center rounded-xl border border-muted-border", children: _jsx("p", { className: "typography-tiny text-muted-foreground", children: props.children }) }));
+}
+export function GoogleAdPreview(props) {
+    const { model, businessName, indices = noIndices } = props;
+    const { headlines, descriptions, businessUrl, isError, isLoading } = model;
+    if (isError) {
+        return _jsx(PlaceholderCard, { children: "Couldn't load this ad." });
+    }
+    if (isLoading) {
+        return _jsx("div", { className: "h-full min-h-40 w-[440px] max-w-full rounded-xl bg-muted" });
+    }
+    if (headlines.length === 0 || descriptions.length === 0 || !isPresent(businessUrl)) {
+        return _jsx(PlaceholderCard, { children: "No preview available for this ad." });
+    }
+    return (_jsx(GoogleSearchAdPreview, { businessName: businessName ?? model.businessName, businessUrl: businessUrl, headline: headlines[clampIndex(headlines, indices.headline)], description: descriptions[clampIndex(descriptions, indices.description)] }));
+}

package/dist/ad-preview/MetaAdDisplay.d.ts

@@ -0,0 +1,4 @@
+import { type MetaAdSingularDisplayProps } from "./MetaAdSingularDisplay.js";
+export type MetaAdDisplayProps = MetaAdSingularDisplayProps;
+export declare function MetaAdDisplay(props: MetaAdDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetaAdDisplay.d.ts.map

package/dist/ad-preview/MetaAdDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaAdDisplay.d.ts","sourceRoot":"","sources":["../../src/ad-preview/MetaAdDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAEjG,MAAM,MAAM,kBAAkB,GAAG,0BAA0B,CAAC;AAE5D,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAEtD"}

package/dist/ad-preview/MetaAdDisplay.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MetaAdSingularDisplay } from "./MetaAdSingularDisplay.js";
+export function MetaAdDisplay(props) {
+    return _jsx(MetaAdSingularDisplay, { ...props });
+}

package/dist/ad-preview/MetaAdPluralDisplay.d.ts

@@ -0,0 +1,14 @@
+export type MetaAdPluralDisplayProps = {
+    iris: readonly string[];
+    businessName?: string;
+    className?: string;
+};
+export type MetaAdPluralDialogBodyProps = {
+    activeIri: string;
+    iris: readonly string[];
+    businessName?: string;
+    onSelect?: (iri: string) => void;
+};
+export declare function MetaAdPluralDialogBody(props: MetaAdPluralDialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetaAdPluralDisplay(props: MetaAdPluralDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetaAdPluralDisplay.d.ts.map

package/dist/ad-preview/MetaAdPluralDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaAdPluralDisplay.d.ts","sourceRoot":"","sources":["../../src/ad-preview/MetaAdPluralDisplay.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAcF,MAAM,MAAM,2BAA2B,GAAG;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAUxE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAWlE"}

package/dist/ad-preview/MetaAdPluralDisplay.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { AdPluralDialogBody, AdPluralDisplay } from "./AdPluralDisplay.js";
+import { emptyMetaAdPreviewModel } from "./meta-ad-model.js";
+import { MetaAdPreview } from "./MetaAdPreview.js";
+import { MetaAdSingularView } from "./MetaAdSingularDisplay.js";
+import { useMetaAdPreviewModels } from "./use-meta-ad-preview.js";
+function label(model, position) {
+    return isPresent(model.adLabel) ? model.adLabel : `Ad ${position + 1}`;
+}
+function renderPreview(model, businessName) {
+    return _jsx(MetaAdPreview, { model: model, businessName: businessName });
+}
+function renderSingular(model, resetKey, businessName) {
+    return _jsx(MetaAdSingularView, { model: model, resetKey: resetKey, businessName: businessName, className: "items-center" });
+}
+export function MetaAdPluralDialogBody(props) {
+    return (_jsx(AdPluralDialogBody, { ...props, useModels: useMetaAdPreviewModels, emptyModel: emptyMetaAdPreviewModel, renderSingular: renderSingular, label: label }));
+}
+export function MetaAdPluralDisplay(props) {
+    return (_jsx(AdPluralDisplay, { ...props, useModels: useMetaAdPreviewModels, emptyModel: emptyMetaAdPreviewModel, renderPreview: renderPreview, renderSingular: renderSingular, label: label }));
+}

package/dist/ad-preview/MetaAdPreview.d.ts

@@ -0,0 +1,11 @@
+import { type AssetKind } from "./meta-ad-copy.js";
+import type { MetaAdPreviewModel } from "./meta-ad-model.js";
+import { type PreviewVariant } from "./placements.js";
+export type MetaAdPreviewProps = {
+    model: MetaAdPreviewModel;
+    businessName?: string;
+    preview?: PreviewVariant;
+    indices?: Readonly<Record<AssetKind, number>>;
+};
+export declare function MetaAdPreview(props: MetaAdPreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetaAdPreview.d.ts.map

package/dist/ad-preview/MetaAdPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaAdPreview.d.ts","sourceRoot":"","sources":["../../src/ad-preview/MetaAdPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,KAAK,SAAS,EAAsB,MAAM,gBAAgB,CAAC;AACpF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAA+D,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIhH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;CAC/C,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAqDtD"}

package/dist/ad-preview/MetaAdPreview.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { match } from "ts-pattern";
+import { noAssetIndices, resolveTextVariant } from "./meta-ad-copy.js";
+import { defaultPreviewVariant, resolveActivePreview, skeletonAspect } from "./placements.js";
+import { FacebookAdPreview, InstagramAdPreview } from "#components/ad-preview/index";
+import { cn } from "#style";
+export function MetaAdPreview(props) {
+    const { model, businessName, preview = defaultPreviewVariant, indices = noAssetIndices } = props;
+    const { creativeIri, assetLists, objectStoryUrl, callToAction, assetUrl, variants, isError, isLoading } = model;
+    const activePreview = resolveActivePreview(variants, preview);
+    const hasPlacement = variants.length > 0;
+    const variant = resolveTextVariant(assetLists, indices, objectStoryUrl);
+    const shared = {
+        businessName: businessName ?? "",
+        assetUrl,
+        callToAction,
+        mainText: variant.body,
+    };
+    return (_jsxs(_Fragment, { children: [isError && _jsx("p", { className: "typography-tiny text-muted-foreground", children: "Couldn't load this ad." }), !isError && !isLoading && !hasPlacement && (_jsx("p", { className: "typography-tiny text-muted-foreground", children: "No placement preview is available for this ad's targeting." })), isLoading && hasPlacement && (_jsx("div", { className: cn("w-82.5 max-w-full rounded-xl bg-muted", skeletonAspect(activePreview)) })), !isError &&
+                !isLoading &&
+                hasPlacement &&
+                isPresent(creativeIri) &&
+                match(activePreview)
+                    .with({ platform: "facebook" }, ({ format }) => (_jsx(FacebookAdPreview, { format: format, ...shared, title: variant.title, description: variant.description, url: variant.url, items: [{ assetUrl: assetUrl ?? "", title: variant.title, callToAction }] })))
+                    .with({ platform: "instagram" }, ({ format }) => _jsx(InstagramAdPreview, { format: format, ...shared }))
+                    .exhaustive(), !isError && !isLoading && !isPresent(creativeIri) && (_jsx("p", { className: "typography-tiny text-muted-foreground", children: "No creative to preview for this ad." }))] }));
+}

package/dist/ad-preview/MetaAdSingularDisplay.d.ts

@@ -0,0 +1,15 @@
+import type { MetaAdPreviewModel } from "./meta-ad-model.js";
+export type MetaAdSingularViewProps = {
+    model: MetaAdPreviewModel;
+    resetKey: string;
+    businessName?: string;
+    className?: string;
+};
+export declare function MetaAdSingularView(props: MetaAdSingularViewProps): import("react/jsx-runtime").JSX.Element;
+export type MetaAdSingularDisplayProps = {
+    iri: string;
+    businessName?: string;
+    className?: string;
+};
+export declare function MetaAdSingularDisplay(props: MetaAdSingularDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetaAdSingularDisplay.d.ts.map

package/dist/ad-preview/MetaAdSingularDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaAdSingularDisplay.d.ts","sourceRoot":"","sources":["../../src/ad-preview/MetaAdSingularDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAe1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAuEhE;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAMtE"}

package/dist/ad-preview/MetaAdSingularDisplay.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { clampIndex } from "./ad-copy.js";
+import { noAssetIndices } from "./meta-ad-copy.js";
+import { MetaAdPreview } from "./MetaAdPreview.js";
+import { defaultPreviewVariant, findVariant, previewVariantId, previewVariantLabel, resolveActivePreview, supportedAssets, } from "./placements.js";
+import { useMetaAdPreviewModel } from "./use-meta-ad-preview.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { cn } from "#style";
+export function MetaAdSingularView(props) {
+    const { model, resetKey, businessName, className } = props;
+    const { assetLists, variants } = model;
+    const idBase = useId();
+    const [preview, setPreview] = useState(defaultPreviewVariant);
+    const [indices, setIndices] = useState(noAssetIndices);
+    const [indicesKey, setIndicesKey] = useState(resetKey);
+    if (indicesKey !== resetKey) {
+        setIndicesKey(resetKey);
+        setIndices(noAssetIndices);
+    }
+    const activePreview = resolveActivePreview(variants, preview);
+    const hasPlacement = variants.length > 0;
+    const supported = supportedAssets(activePreview);
+    return (_jsxs("div", { className: cn("flex flex-col items-start gap-3", className), children: [hasPlacement && (_jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [_jsx("div", { className: "w-52", children: _jsxs(Select, { value: previewVariantId(activePreview), onValueChange: (value) => {
+                                const selected = findVariant(variants, value);
+                                if (selected)
+                                    setPreview(selected);
+                            }, children: [_jsx(SelectTrigger, { id: `${idBase}-placement`, label: "Placement", size: "sm", hiddenLabel: true, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { size: "sm", children: variants.map((entry) => (_jsx(SelectItem, { value: previewVariantId(entry), children: previewVariantLabel(entry) }, previewVariantId(entry)))) })] }) }), assetLists
+                        .filter((list) => list.values.length > 1 && supported.includes(list.kind))
+                        .map((list) => (_jsx("div", { className: "w-44", children: _jsxs(Select, { value: String(clampIndex(list.values, indices[list.kind])), onValueChange: (value) => setIndices((current) => ({ ...current, [list.kind]: Number(value) })), children: [_jsx(SelectTrigger, { id: `${idBase}-${list.kind}`, label: list.label, size: "sm", hiddenLabel: true, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { size: "sm", children: list.values.map((_ignored, index) => (_jsx(SelectItem, { value: String(index), children: `${list.label} ${index + 1} of ${list.values.length}` }, index))) })] }) }, list.kind)))] })), _jsx(MetaAdPreview, { model: model, businessName: businessName, preview: preview, indices: indices })] }));
+}
+export function MetaAdSingularDisplay(props) {
+    const { iri, businessName, className } = props;
+    const model = useMetaAdPreviewModel(iri);
+    return _jsx(MetaAdSingularView, { model: model, resetKey: iri, businessName: businessName, className: className });
+}

package/dist/ad-preview/ad-copy.d.ts

@@ -0,0 +1,6 @@
+export declare function presentValues(values: readonly (string | undefined)[]): string[];
+export declare function clampIndex(values: readonly unknown[], index: number): number;
+export declare function sortEntitiesByAuthoredPosition<T extends {
+    $id: string;
+}>(entities: readonly T[]): T[];
+//# sourceMappingURL=ad-copy.d.ts.map

package/dist/ad-preview/ad-copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ad-copy.d.ts","sourceRoot":"","sources":["../../src/ad-preview/ad-copy.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,YAEpE;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,UAEnE;AAQD,wBAAgB,8BAA8B,CAAC,CAAC,SAAS;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,OAE/F"}

package/dist/ad-preview/ad-copy.js

@@ -0,0 +1,15 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { clamp } from "ramda";
+export function presentValues(values) {
+    return values.filter((value) => isPresent(value));
+}
+export function clampIndex(values, index) {
+    return values.length === 0 ? 0 : clamp(0, values.length - 1, index);
+}
+function authoredPosition(iri) {
+    const position = /_(\d+)$/.exec(iri)?.[1];
+    return position === undefined ? Number.MAX_SAFE_INTEGER : Number(position);
+}
+export function sortEntitiesByAuthoredPosition(entities) {
+    return [...entities].sort((left, right) => authoredPosition(left.$id) - authoredPosition(right.$id));
+}

package/dist/ad-preview/google-ad-copy.d.ts

@@ -0,0 +1,2 @@
+export declare function deriveDisplayUrl(finalUrls: readonly string[] | undefined): string | undefined;
+//# sourceMappingURL=google-ad-copy.d.ts.map

package/dist/ad-preview/google-ad-copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-ad-copy.d.ts","sourceRoot":"","sources":["../../src/ad-preview/google-ad-copy.ts"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAa7F"}

package/dist/ad-preview/google-ad-copy.js

@@ -0,0 +1,15 @@
+import { isPresent } from "@manta-eu/lib/present";
+export function deriveDisplayUrl(finalUrls) {
+    const first = finalUrls?.map((url) => url.trim()).find((url) => isPresent(url));
+    if (first === undefined)
+        return undefined;
+    let hostname;
+    try {
+        hostname = new URL(first).hostname;
+    }
+    catch {
+        hostname = first.replace(/^https?:\/\//i, "").replace(/[/?#].*$/, "");
+    }
+    hostname = hostname.replace(/^www\./i, "");
+    return isPresent(hostname) ? hostname : undefined;
+}

package/dist/ad-preview/google-ad-model.d.ts

@@ -0,0 +1,15 @@
+import type { GoogleAdGroupAdPreviewEntity } from "@manta-eu/ldo";
+export type GoogleSearchAdModel = {
+    headlines: string[];
+    descriptions: string[];
+    businessName: string;
+    businessUrl: string | undefined;
+    isLoading: boolean;
+    isError: boolean;
+};
+export declare function buildGoogleSearchAdModel(ad: GoogleAdGroupAdPreviewEntity | undefined, states: {
+    isLoading: boolean;
+    isError: boolean;
+}): GoogleSearchAdModel;
+export declare function emptyGoogleSearchAdModel(): GoogleSearchAdModel;
+//# sourceMappingURL=google-ad-model.d.ts.map

package/dist/ad-preview/google-ad-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-ad-model.d.ts","sourceRoot":"","sources":["../../src/ad-preview/google-ad-model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAC;AAKlE,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAQF,wBAAgB,wBAAwB,CACtC,EAAE,EAAE,4BAA4B,GAAG,SAAS,EAC5C,MAAM,EAAE;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAC/C,mBAAmB,CAcrB;AAED,wBAAgB,wBAAwB,IAAI,mBAAmB,CAE9D"}

package/dist/ad-preview/google-ad-model.js

@@ -0,0 +1,23 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { presentValues, sortEntitiesByAuthoredPosition } from "./ad-copy.js";
+import { deriveDisplayUrl } from "./google-ad-copy.js";
+function textValues(nodes) {
+    return presentValues(sortEntitiesByAuthoredPosition(nodes ?? []).map((node) => node.text ?? undefined));
+}
+export function buildGoogleSearchAdModel(ad, states) {
+    const headlines = textValues(ad?.adGroupAdAdResponsiveSearchAdHeadlines);
+    const descriptions = textValues(ad?.adGroupAdAdResponsiveSearchAdDescriptions);
+    const displayHost = deriveDisplayUrl(ad?.adGroupAdAdFinalUrls);
+    // Google Search ads carry no brand name — the display host fills both the name and URL slots.
+    return {
+        headlines,
+        descriptions,
+        businessName: isPresent(displayHost) ? displayHost : "",
+        businessUrl: displayHost,
+        isLoading: states.isLoading,
+        isError: states.isError,
+    };
+}
+export function emptyGoogleSearchAdModel() {
+    return buildGoogleSearchAdModel(undefined, { isLoading: false, isError: false });
+}

package/dist/ad-preview/meta-ad-copy.d.ts

@@ -0,0 +1,19 @@
+export type AssetKind = "body" | "title" | "description" | "url";
+export declare function pickAt(values: readonly string[], index: number): string | undefined;
+export declare const noAssetIndices: Readonly<Record<AssetKind, number>>;
+export declare function resolveTextVariant(assetLists: readonly {
+    kind: AssetKind;
+    values: readonly string[];
+}[], indices: Readonly<Record<AssetKind, number>>, objectStoryUrl: string | undefined): {
+    body: string | undefined;
+    title: string | undefined;
+    description: string | undefined;
+    url: string | undefined;
+};
+export declare function pickCallToAction(candidates: {
+    assetFeed?: readonly string[];
+    creative?: string;
+    objectStory?: string;
+}): string | undefined;
+export declare function toDisplayUrl(displayUrl: string | undefined, websiteUrl: string | undefined): string | undefined;
+//# sourceMappingURL=meta-ad-copy.d.ts.map

package/dist/ad-preview/meta-ad-copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-ad-copy.d.ts","sourceRoot":"","sources":["../../src/ad-preview/meta-ad-copy.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,KAAK,CAAC;AAEjE,wBAAgB,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,sBAE9D;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAK7D,CAAC;AAEH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,SAAS;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAAE,EACrE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,EAC5C,cAAc,EAAE,MAAM,GAAG,SAAS;;;;;EAcnC;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE;IAC3C,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,sBAKA;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,sBAW1F"}

package/dist/ad-preview/meta-ad-copy.js

@@ -0,0 +1,41 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { last } from "ramda";
+export function pickAt(values, index) {
+    return values[index] ?? last(values);
+}
+export const noAssetIndices = Object.freeze({
+    body: 0,
+    title: 0,
+    description: 0,
+    url: 0,
+});
+export function resolveTextVariant(assetLists, indices, objectStoryUrl) {
+    const valueOf = (kind) => {
+        const list = assetLists.find((entry) => entry.kind === kind);
+        return list === undefined ? undefined : pickAt(list.values, indices[kind]);
+    };
+    return {
+        body: valueOf("body"),
+        title: valueOf("title"),
+        description: valueOf("description"),
+        url: valueOf("url") ?? objectStoryUrl,
+    };
+}
+export function pickCallToAction(candidates) {
+    const { assetFeed = [], creative, objectStory } = candidates;
+    const [firstStable] = [...assetFeed].sort();
+    return [firstStable, creative, objectStory].find(isPresent);
+}
+export function toDisplayUrl(displayUrl, websiteUrl) {
+    if (isPresent(displayUrl))
+        return displayUrl;
+    if (!isPresent(websiteUrl))
+        return undefined;
+    try {
+        const parsed = new URL(websiteUrl);
+        return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.hostname : websiteUrl;
+    }
+    catch {
+        return websiteUrl;
+    }
+}

package/dist/ad-preview/meta-ad-model.d.ts

@@ -0,0 +1,25 @@
+import type { MetaAdPreviewEntity, MetaAdTargetingEntity } from "@manta-eu/ldo";
+import { type PreviewVariant } from "./placements.js";
+export type MetaAdAssetList = {
+    kind: "body" | "title" | "description" | "url";
+    label: string;
+    values: string[];
+};
+export type MetaAdPreviewModel = {
+    adLabel: string | undefined;
+    creativeIri: string;
+    assetLists: MetaAdAssetList[];
+    objectStoryUrl: string | undefined;
+    callToAction: string | undefined;
+    assetUrl: string | undefined;
+    variants: readonly PreviewVariant[];
+    isLoading: boolean;
+    isError: boolean;
+};
+export declare function resolvePreviewVariants(entity: MetaAdTargetingEntity | undefined): readonly PreviewVariant[];
+export declare function buildMetaAdPreviewModel(ad: MetaAdPreviewEntity | undefined, targeting: MetaAdTargetingEntity | undefined, states: {
+    isLoading: boolean;
+    isError: boolean;
+}, redirectEndpoint?: string): MetaAdPreviewModel;
+export declare function emptyMetaAdPreviewModel(): MetaAdPreviewModel;
+//# sourceMappingURL=meta-ad-model.d.ts.map

package/dist/ad-preview/meta-ad-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-ad-model.d.ts","sourceRoot":"","sources":["../../src/ad-preview/meta-ad-model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAQhF,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,KAAK,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AA4CF,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,qBAAqB,GAAG,SAAS,6BAK/E;AAeD,wBAAgB,uBAAuB,CACrC,EAAE,EAAE,mBAAmB,GAAG,SAAS,EACnC,SAAS,EAAE,qBAAqB,GAAG,SAAS,EAC5C,MAAM,EAAE;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,EAChD,gBAAgB,GAAE,MAAgC,GACjD,kBAAkB,CA6BpB;AAED,wBAAgB,uBAAuB,IAAI,kBAAkB,CAE5D"}

package/dist/ad-preview/meta-ad-model.js

@@ -0,0 +1,73 @@
+import { redirectPath } from "@manta-eu/ldo/redirect-queries";
+import { humanizeEnum } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { firstValue } from "../graph/nodes/typed-node-helpers.js";
+import { defaultRedirectEndpoint } from "../hooks/use-redirect-endpoint.js";
+import { presentValues, sortEntitiesByAuthoredPosition } from "./ad-copy.js";
+import { pickCallToAction, toDisplayUrl } from "./meta-ad-copy.js";
+import { previewVariants } from "./placements.js";
+import { filterPreviewVariants } from "./targeted-placements.js";
+function textValues(assets) {
+    return presentValues(sortEntitiesByAuthoredPosition(assets ?? []).map((asset) => asset.text ?? undefined));
+}
+function linkUrlValues(assets) {
+    return presentValues(sortEntitiesByAuthoredPosition(assets ?? []).map((asset) => toDisplayUrl(asset.displayUrl ?? undefined, asset.websiteUrl ?? undefined)));
+}
+function readTargeting(entity) {
+    const spec = entity?.targeting;
+    return {
+        facebookPositions: spec?.facebookPositions ?? [],
+        instagramPositions: spec?.instagramPositions ?? [],
+        publisherPlatforms: spec?.publisherPlatforms ?? [],
+    };
+}
+function hasTargeting(targeting) {
+    return (isPresent(targeting.facebookPositions) ||
+        isPresent(targeting.instagramPositions) ||
+        isPresent(targeting.publisherPlatforms));
+}
+export function resolvePreviewVariants(entity) {
+    const adTargeting = readTargeting(entity);
+    const targeting = hasTargeting(adTargeting) ? adTargeting : readTargeting(entity?.adSet);
+    return hasTargeting(targeting) ? filterPreviewVariants(targeting) : previewVariants;
+}
+function originalFileUrl(files, redirectEndpoint) {
+    let lowest;
+    for (const file of files ?? []) {
+        if (!(file.contentMimeType ?? "").toLowerCase().startsWith("image/"))
+            continue;
+        if (lowest === undefined || file.$id < lowest.$id)
+            lowest = file;
+    }
+    return lowest === undefined ? undefined : redirectPath(lowest.$id, redirectEndpoint);
+}
+export function buildMetaAdPreviewModel(ad, targeting, states, redirectEndpoint = defaultRedirectEndpoint) {
+    const creative = ad?.creative;
+    const linkData = creative?.objectStorySpec?.linkData;
+    const rawCallToAction = pickCallToAction({
+        assetFeed: creative?.assetFeedSpecCallToActionTypes,
+        creative: firstValue(creative?.callToActionType),
+        objectStory: firstValue(linkData?.callToAction?.callToActionType),
+    });
+    return {
+        adLabel: firstValue(ad?.label),
+        creativeIri: creative?.$id ?? "",
+        assetLists: [
+            { kind: "body", label: "Body", values: textValues(creative?.assetFeedSpecBodies) },
+            { kind: "title", label: "Title", values: textValues(creative?.assetFeedSpecTitles) },
+            { kind: "description", label: "Description", values: textValues(creative?.assetFeedSpecDescriptions) },
+            { kind: "url", label: "Link", values: linkUrlValues(creative?.assetFeedSpecLinkUrls) },
+        ],
+        objectStoryUrl: toDisplayUrl(undefined, firstValue(linkData?.storyLink)),
+        callToAction: humanizeEnum(rawCallToAction),
+        assetUrl: originalFileUrl(creative?.wasDerivedFrom, redirectEndpoint) ??
+            firstValue(creative?.imageUrl) ??
+            firstValue(creative?.thumbnailUrl),
+        variants: resolvePreviewVariants(targeting),
+        isLoading: states.isLoading,
+        isError: states.isError,
+    };
+}
+export function emptyMetaAdPreviewModel() {
+    return buildMetaAdPreviewModel(undefined, undefined, { isLoading: false, isError: false });
+}

package/dist/ad-preview/placements.d.ts

@@ -0,0 +1,19 @@
+import type { AssetKind } from "./meta-ad-copy.js";
+import type { FacebookAdFormat, InstagramAdFormat } from "#components/ad-preview/index";
+export type PreviewVariant = {
+    platform: "facebook";
+    format: FacebookAdFormat;
+} | {
+    platform: "instagram";
+    format: InstagramAdFormat;
+};
+export declare const previewVariants: readonly PreviewVariant[];
+export declare const defaultPreviewVariant: PreviewVariant;
+export declare function previewVariantId(variant: PreviewVariant): string;
+export declare function previewVariantLabel(variant: PreviewVariant): string;
+export declare const previewVariantIds: string[];
+export declare function findVariant(variants: readonly PreviewVariant[], id: string): PreviewVariant | undefined;
+export declare function resolveActivePreview(variants: readonly PreviewVariant[], stored: PreviewVariant): PreviewVariant;
+export declare function supportedAssets(variant: PreviewVariant): readonly AssetKind[];
+export declare function skeletonAspect(variant: PreviewVariant): string;
+//# sourceMappingURL=placements.d.ts.map

package/dist/ad-preview/placements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placements.d.ts","sourceRoot":"","sources":["../../src/ad-preview/placements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAwBxF,MAAM,MAAM,cAAc,GACtB;IAAE,QAAQ,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAE,GAClD;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAMzD,eAAO,MAAM,eAAe,EAAE,SAAS,cAAc,EAOpD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAAyD,CAAC;AAE9F,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,cAAc,UAEvD;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,cAAc,UAE1D;AAED,eAAO,MAAM,iBAAiB,UAAwC,CAAC;AAEvE,wBAAgB,WAAW,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,8BAE1E;AAID,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,EAAE,MAAM,EAAE,cAAc,kBAE/F;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,SAAS,EAAE,CAE7E;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,cAAc,UAErD"}

package/dist/ad-preview/placements.js

@@ -0,0 +1,47 @@
+const facebookPlacements = {
+    feed: { label: "Facebook — Feed", assets: ["body", "title", "description", "url"], aspect: "aspect-2/3" },
+    carousel: { label: "Facebook — Carousel", assets: ["body", "title"], aspect: "aspect-2/3" },
+    marketplace: { label: "Facebook — Marketplace", assets: ["title"], aspect: "aspect-2/3" },
+    story: { label: "Facebook — Story", assets: [], aspect: "aspect-9/16" },
+    reels: { label: "Facebook — Reels", assets: ["body", "title"], aspect: "aspect-9/16" },
+    "instream-reels": {
+        label: "Facebook — In-stream Reels",
+        assets: ["body", "title", "description", "url"],
+        aspect: "aspect-2/3",
+    },
+};
+const instagramPlacements = {
+    feed: { label: "Instagram — Feed", assets: ["body"], aspect: "aspect-2/3" },
+    reel: { label: "Instagram — Reel", assets: ["body"], aspect: "aspect-9/16" },
+    story: { label: "Instagram — Story", assets: [], aspect: "aspect-9/16" },
+    "search-result": { label: "Instagram — Search Results", assets: ["body"], aspect: "aspect-2/3" },
+};
+function placementOf(variant) {
+    return variant.platform === "facebook" ? facebookPlacements[variant.format] : instagramPlacements[variant.format];
+}
+export const previewVariants = [
+    ...Object.keys(facebookPlacements).map((format) => ({ platform: "facebook", format })),
+    ...Object.keys(instagramPlacements).map((format) => ({ platform: "instagram", format })),
+];
+export const defaultPreviewVariant = { platform: "facebook", format: "feed" };
+export function previewVariantId(variant) {
+    return `${variant.platform}:${variant.format}`;
+}
+export function previewVariantLabel(variant) {
+    return placementOf(variant).label;
+}
+export const previewVariantIds = previewVariants.map(previewVariantId);
+export function findVariant(variants, id) {
+    return variants.find((entry) => previewVariantId(entry) === id);
+}
+// The stored user choice survives a narrower offer; only the shown preview clamps to the first
+// placement on offer, so the stored pick resurfaces once a wider list returns.
+export function resolveActivePreview(variants, stored) {
+    return findVariant(variants, previewVariantId(stored)) ?? variants[0] ?? defaultPreviewVariant;
+}
+export function supportedAssets(variant) {
+    return placementOf(variant).assets;
+}
+export function skeletonAspect(variant) {
+    return placementOf(variant).aspect;
+}

package/dist/ad-preview/targeted-placements.d.ts

@@ -0,0 +1,8 @@
+import { type PreviewVariant } from "./placements.js";
+export type PlacementTargeting = {
+    facebookPositions: readonly string[];
+    instagramPositions: readonly string[];
+    publisherPlatforms: readonly string[];
+};
+export declare function filterPreviewVariants(targeting: PlacementTargeting): PreviewVariant[];
+//# sourceMappingURL=targeted-placements.d.ts.map

package/dist/ad-preview/targeted-placements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"targeted-placements.d.ts","sourceRoot":"","sources":["../../src/ad-preview/targeted-placements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iBAAiB,EAAE,SAAS,MAAM,EAAE,CAAC;IACrC,kBAAkB,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,kBAAkB,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC,CAAC;AAqBF,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,kBAAkB,GAAG,cAAc,EAAE,CAwBrF"}

package/dist/ad-preview/targeted-placements.js

@@ -0,0 +1,35 @@
+import { previewVariants } from "./placements.js";
+// Meta Marketing API position values → preview catalog formats. Positions without a
+// preview (right_hand_column, search, instant_article, ...) are intentionally absent.
+const facebookPositionFormats = {
+    feed: ["feed", "carousel"],
+    marketplace: ["marketplace"],
+    story: ["story"],
+    facebook_reels: ["reels"],
+    instream_video: ["instream-reels"],
+};
+const instagramPositionFormats = {
+    stream: ["feed"],
+    explore: ["feed"],
+    story: ["story"],
+    reels: ["reel"],
+    profile_reels: ["reel"],
+    ig_search: ["search-result"],
+};
+export function filterPreviewVariants(targeting) {
+    const { facebookPositions, instagramPositions, publisherPlatforms } = targeting;
+    const platformAllowed = (platform) => publisherPlatforms.length === 0 || publisherPlatforms.includes(platform);
+    // Meta reads a publisher platform named with no positions of its own as "every position on that
+    // platform": an ad set listing `instagram` but no `instagram_positions` runs Instagram-wide.
+    // Without a platform named, no positions still means no placements.
+    const everyFormat = {
+        facebook: facebookPositions.length === 0 && publisherPlatforms.includes("facebook"),
+        instagram: instagramPositions.length === 0 && publisherPlatforms.includes("instagram"),
+    };
+    const formats = {
+        facebook: new Set(facebookPositions.flatMap((position) => facebookPositionFormats[position] ?? [])),
+        instagram: new Set(instagramPositions.flatMap((position) => instagramPositionFormats[position] ?? [])),
+    };
+    return previewVariants.filter((variant) => platformAllowed(variant.platform) &&
+        (everyFormat[variant.platform] || formats[variant.platform].has(variant.format)));
+}

package/dist/ad-preview/use-google-search-ad-preview.d.ts

@@ -0,0 +1,8 @@
+import { type GoogleSearchAdModel } from "./google-ad-model.js";
+export type GoogleSearchAdEntry = {
+    iri: string;
+    model: GoogleSearchAdModel;
+};
+export declare function useGoogleSearchAdModels(iris: readonly string[]): readonly GoogleSearchAdEntry[];
+export declare function useGoogleSearchAdModel(iri: string): GoogleSearchAdModel;
+//# sourceMappingURL=use-google-search-ad-preview.d.ts.map

package/dist/ad-preview/use-google-search-ad-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-google-search-ad-preview.d.ts","sourceRoot":"","sources":["../../src/ad-preview/use-google-search-ad-preview.ts"],"names":[],"mappings":"AAIA,OAAO,EAAsD,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAEjH,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAGF,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAY/F;AAED,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,mBAAmB,CAKvE"}

package/dist/ad-preview/use-google-search-ad-preview.js

@@ -0,0 +1,20 @@
+import { GoogleAdGroupAdPreviewSchema } from "@manta-eu/ldo";
+import { isPresent } from "@manta-eu/lib/present";
+import { useMemo } from "react";
+import { useEntitiesByIris } from "../hooks/use-entity.js";
+import { buildGoogleSearchAdModel, emptyGoogleSearchAdModel } from "./google-ad-model.js";
+// One batched query for the whole set; blank IRIs are filtered out so one bad IRI degrades only its own slot.
+export function useGoogleSearchAdModels(iris) {
+    const presentIris = useMemo(() => iris.filter(isPresent), [iris]);
+    const query = useEntitiesByIris({ schema: GoogleAdGroupAdPreviewSchema, iris: presentIris });
+    const { data, isLoading, isError } = query;
+    return useMemo(() => {
+        const byIri = new Map(presentIris.map((iri, index) => [iri, data?.[index]]));
+        return iris.map((iri) => ({ iri, model: buildGoogleSearchAdModel(byIri.get(iri), { isLoading, isError }) }));
+    }, [iris, presentIris, data, isLoading, isError]);
+}
+export function useGoogleSearchAdModel(iri) {
+    const iris = useMemo(() => [iri], [iri]);
+    const [entry] = useGoogleSearchAdModels(iris);
+    return entry?.model ?? emptyGoogleSearchAdModel();
+}

package/dist/ad-preview/use-meta-ad-preview.d.ts

@@ -0,0 +1,8 @@
+import { type MetaAdPreviewModel } from "./meta-ad-model.js";
+export type MetaAdPreviewEntry = {
+    iri: string;
+    model: MetaAdPreviewModel;
+};
+export declare function useMetaAdPreviewModels(iris: readonly string[]): readonly MetaAdPreviewEntry[];
+export declare function useMetaAdPreviewModel(iri: string): MetaAdPreviewModel;
+//# sourceMappingURL=use-meta-ad-preview.d.ts.map