@talqui-oss/template-builder 0.0.0-stage → 0.1.0-beta.0

package/dist/styles.css

@@ -0,0 +1,267 @@
+/*
+ * Template Builder preview.
+ *
+ * One CSS pixel equals one iOS point. Every value below was measured on native
+ * 3x screenshots of an iPhone (440pt wide screen, default text size, light mode).
+ * Override the custom properties to adapt the look without touching the markup.
+ */
+
+.tb-preview {
+  --tb-font:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial,
+    sans-serif;
+  --tb-wallpaper: #f8f6f2;
+  --tb-bubble-bg: #ffffff;
+  --tb-text: #0a0a0a;
+  --tb-muted: #666666;
+  --tb-action: #408559;
+  --tb-divider: #e5e5e5;
+
+  --tb-bubble-width: 335.67px;
+  --tb-bubble-radius: 10.67px;
+  /* Text starts closer to the left edge than it ends on the right one. */
+  --tb-padding-x: 9.17px;
+  --tb-padding-right: 10.5px;
+  --tb-padding-top: 6.5px;
+  --tb-header-gap: 12px;
+  --tb-media-gap: 4.2px;
+  --tb-footer-gap: 8.5px;
+  --tb-padding-bottom: 6.33px;
+  --tb-button-height: 44px;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0 16.67px;
+  font-family: var(--tb-font);
+  color: var(--tb-text);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.tb-preview *,
+.tb-preview *::before,
+.tb-preview *::after {
+  box-sizing: inherit;
+  margin: 0;
+}
+
+/* Bubble: fixed width, four rounded corners; the tail hangs off the bottom-left one. */
+.tb-bubble {
+  position: relative;
+  width: var(--tb-bubble-width);
+  background: var(--tb-bubble-bg);
+  border-radius: var(--tb-bubble-radius);
+}
+
+.tb-bubble__tail {
+  position: absolute;
+  bottom: 0;
+  left: -6.2px;
+  width: 12.4px;
+  height: 10.33px;
+  fill: var(--tb-bubble-bg);
+}
+
+.tb-bubble__content {
+  padding: var(--tb-padding-top) var(--tb-padding-right)
+    var(--tb-padding-bottom) var(--tb-padding-x);
+  overflow-wrap: anywhere;
+}
+
+/* Text */
+
+.tb-header--text {
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 600;
+  margin-bottom: var(--tb-header-gap);
+}
+
+.tb-bubble__body {
+  font-size: 16px;
+  line-height: 21px;
+}
+
+/* Without a header the body starts 2pt closer to the top of the bubble. */
+.tb-bubble__content > .tb-bubble__body:first-child {
+  margin-top: -2px;
+}
+
+.tb-line {
+  white-space: pre-wrap;
+}
+
+.tb-line--bullet,
+.tb-line--numbered {
+  position: relative;
+  padding-left: 1.2em;
+}
+
+.tb-line--bullet::before,
+.tb-line--numbered::before {
+  position: absolute;
+  left: 0;
+}
+
+.tb-line--bullet::before {
+  content: "•";
+}
+
+.tb-line--numbered::before {
+  content: attr(data-marker);
+}
+
+.tb-line--quote {
+  padding-left: 10px;
+  border-left: 3px solid var(--tb-divider);
+}
+
+.tb-line--code,
+.tb-mono,
+.tb-code {
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 0.92em;
+}
+
+.tb-line--code {
+  white-space: pre-wrap;
+}
+
+.tb-code {
+  padding: 0 3px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.tb-bold {
+  font-weight: 600;
+}
+
+.tb-italic {
+  font-style: italic;
+}
+
+.tb-strike {
+  text-decoration: line-through;
+}
+
+/* Footer and time share the last row; the time sits right, slightly lower. */
+.tb-bubble__meta {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  margin-top: var(--tb-footer-gap);
+  color: var(--tb-muted);
+}
+
+.tb-bubble__footer {
+  flex: 1;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.tb-bubble__time {
+  font-size: 11px;
+  line-height: 13px;
+  letter-spacing: 1.2px;
+  margin-right: -1.2px;
+  margin-bottom: -1.17px;
+  white-space: nowrap;
+}
+
+/* Buttons: one 44pt row each, separated by a 1pt line. */
+.tb-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8.67px;
+  height: var(--tb-button-height);
+  /* Labels sit 0.67pt above the row's center. */
+  padding: 0 var(--tb-padding-x) 1.33px;
+  border-top: 1px solid var(--tb-divider);
+  color: var(--tb-action);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* The last row is 0.67pt shorter: the bubble's rounded bottom eats into it. */
+.tb-button:last-of-type {
+  height: calc(var(--tb-button-height) - 0.67px);
+}
+
+.tb-button__icon {
+  flex: none;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.1;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Media header and link preview: inset 3.33pt from the bubble edge, natural aspect ratio. */
+.tb-header--media,
+.tb-link {
+  display: block;
+  width: calc(100% + var(--tb-padding-x) + var(--tb-padding-right) - 6.67px);
+  margin: calc(3.33px - var(--tb-padding-top))
+    calc(3.33px - var(--tb-padding-right)) var(--tb-media-gap)
+    calc(3.33px - var(--tb-padding-x));
+  border-radius: calc(var(--tb-bubble-radius) - 3.33px);
+}
+
+.tb-header--media {
+  height: auto;
+  background: var(--tb-divider);
+}
+
+.tb-link {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  height: 52px;
+  padding: 22.7px 0 0 8.67px;
+  background: #f6f5f5;
+  color: #393939;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.tb-link__icon {
+  flex: none;
+  width: 9px;
+  height: 9.33px;
+  margin-top: 2.97px;
+  fill: none;
+  stroke: var(--tb-text);
+  stroke-width: 1.1;
+  stroke-linecap: round;
+}
+
+.tb-header--document,
+.tb-header--location,
+.tb-header--product {
+  min-height: 56px;
+  margin-bottom: var(--tb-header-gap);
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.04);
+  font-size: 14px;
+}
+
+/* Carousel cards scroll sideways under the bubble. */
+.tb-card {
+  width: 260px;
+  background: var(--tb-bubble-bg);
+  border-radius: var(--tb-bubble-radius);
+  overflow: hidden;
+}
+
+.tb-offer {
+  margin-bottom: var(--tb-header-gap);
+  font-size: 15px;
+  font-weight: 600;
+}

package/dist/types-CRH48UOs.d.cts

@@ -0,0 +1,194 @@
+/**
+ * A WhatsApp message template. Field names follow Meta's template API in camelCase.
+ * Authentication templates have their own shape because Meta writes their body text.
+ */
+type Template = StandardTemplate | AuthenticationTemplate;
+type Category = "MARKETING" | "UTILITY" | "AUTHENTICATION";
+/** Example values for the `{{name}}` placeholders used anywhere in the template. */
+type Variables = Record<string, Variable>;
+type Variable = {
+    /** Sample value shown in the preview and sent to the provider for review. */
+    example: string;
+};
+type TemplateBase = {
+    /** Optional JSON Schema URL, for editor autocomplete in `.json` files. */
+    $schema?: string;
+    /** Lowercase letters, numbers and underscores, e.g. `order_shipped`. */
+    name: string;
+    /** Locale code, e.g. `en_US` or `pt_BR`. */
+    language: string;
+    /** Seconds the provider keeps trying to deliver the message. */
+    messageSendTtlSeconds?: number;
+};
+type StandardTemplate = TemplateBase & {
+    category: "MARKETING" | "UTILITY";
+    header?: Header;
+    /** Text with optional `{{name}}` placeholders and WhatsApp formatting (`*bold*`, `_italic_`). */
+    body: {
+        text: string;
+    };
+    footer?: {
+        text: string;
+    };
+    buttons?: Button[];
+    /** Turns the template into a limited-time offer. */
+    limitedTimeOffer?: LimitedTimeOffer;
+    /** Turns the template into a carousel of 2 to 10 cards. */
+    carousel?: {
+        cards: CarouselCard[];
+    };
+    /** Asks the user for permission to call them. */
+    callPermissionRequest?: true;
+    /** Renders the template as an order details message. */
+    displayFormat?: "ORDER_DETAILS";
+    variables?: Variables;
+};
+type AuthenticationTemplate = TemplateBase & {
+    category: "AUTHENTICATION";
+    body?: {
+        /** Appends "For your security, do not share this code." */
+        addSecurityRecommendation?: boolean;
+    };
+    footer?: {
+        /** Appends "This code expires in N minutes." (1 to 90). */
+        codeExpirationMinutes?: number;
+    };
+    button: OtpButton;
+};
+type Header = TextHeader | MediaHeader | LocationHeader | ProductHeader;
+type TextHeader = {
+    type: "TEXT";
+    /** Up to one `{{name}}` placeholder. */
+    text: string;
+};
+type MediaHeader = {
+    type: "IMAGE" | "VIDEO" | "DOCUMENT" | "GIF";
+    /** Public URL of a sample file, used for the preview and for review. */
+    url: string;
+    filename?: string;
+};
+type LocationHeader = {
+    type: "LOCATION";
+};
+type ProductHeader = {
+    type: "PRODUCT";
+};
+type Button = QuickReplyButton | UrlButton | PhoneNumberButton | VoiceCallButton | CopyCodeButton | FlowButton | CatalogButton | MultiProductButton | SingleProductButton | OrderDetailsButton | PaymentRequestButton;
+type QuickReplyButton = {
+    type: "QUICK_REPLY";
+    text: string;
+};
+type UrlButton = {
+    type: "URL";
+    text: string;
+    /** A `{{name}}` placeholder at the end makes the URL dynamic. */
+    url: string;
+};
+type PhoneNumberButton = {
+    type: "PHONE_NUMBER";
+    text: string;
+    /** International format, e.g. `+15550100`. */
+    phoneNumber: string;
+};
+type VoiceCallButton = {
+    type: "VOICE_CALL";
+    text: string;
+    ttlMinutes?: number;
+};
+type CopyCodeButton = {
+    type: "COPY_CODE";
+    /** Sample coupon code, up to 20 characters. */
+    example: string;
+};
+type FlowButton = {
+    type: "FLOW";
+    text: string;
+    flowId?: string;
+    flowName?: string;
+    flowJson?: string;
+    flowAction?: "navigate" | "data_exchange";
+    navigateScreen?: string;
+};
+type CatalogButton = {
+    type: "CATALOG";
+    text: string;
+};
+type MultiProductButton = {
+    type: "MPM";
+    text: string;
+};
+type SingleProductButton = {
+    type: "SPM";
+    text: string;
+};
+type OrderDetailsButton = {
+    type: "ORDER_DETAILS";
+    text: string;
+};
+type PaymentRequestButton = {
+    type: "PAYMENT_REQUEST";
+    text?: string;
+    paymentSetting: "pix_dynamic_code" | "boleto" | "payment_link" | "offsite_card_pay";
+};
+type OtpButton = {
+    type: "OTP";
+    otpType: "COPY_CODE" | "ONE_TAP" | "ZERO_TAP";
+    /** Button label. Meta localizes it when omitted. */
+    text?: string;
+    /** One-tap and zero-tap only: label of the autofill button. */
+    autofillText?: string;
+    /** One-tap and zero-tap only: up to 5 Android apps. */
+    supportedApps?: SupportedApp[];
+    /** Zero-tap only: must be `true` to accept Meta's zero-tap terms. */
+    zeroTapTermsAccepted?: boolean;
+};
+type SupportedApp = {
+    packageName: string;
+    /** 11-character app signature hash. */
+    signatureHash: string;
+};
+type LimitedTimeOffer = {
+    /** Offer headline, e.g. "Expiring offer!". */
+    text: string;
+    /** Shows a countdown; the expiration time is set when sending. */
+    hasExpiration?: boolean;
+};
+type CarouselCard = {
+    header: {
+        type: "IMAGE" | "VIDEO";
+        url: string;
+    } | ProductHeader;
+    body?: {
+        text: string;
+    };
+    buttons?: Array<QuickReplyButton | UrlButton | PhoneNumberButton | SingleProductButton>;
+};
+
+type HttpRequest = {
+    method: "POST";
+    url: string;
+    headers: Record<string, string>;
+    body: unknown;
+    /** Printed as `#` comments above the request by `toCurl`. */
+    comments?: string[];
+};
+type Adapter = {
+    name: string;
+    toRequests(template: Template): HttpRequest[];
+};
+type AdapterDefinition<O> = {
+    name: string;
+    toRequests(template: Template, options: O): HttpRequest[];
+};
+/** Turns an adapter definition into a factory: `meta({ wabaId })` returns an `Adapter`. */
+declare function defineAdapter<O extends object>(definition: AdapterDefinition<O>): (...[options]: Partial<O> extends O ? [O?] : [O]) => Adapter;
+/** Thrown when a template uses a field the provider cannot create. */
+declare class UnsupportedByProviderError extends Error {
+    readonly provider: string;
+    readonly path: string;
+    readonly code = "UNSUPPORTED_BY_PROVIDER";
+    constructor(provider: string, path: string, message: string);
+}
+
+export { UnsupportedByProviderError as U, defineAdapter as q };
+export type { Adapter as A, Button as B, Category as C, FlowButton as F, HttpRequest as H, LimitedTimeOffer as L, MediaHeader as M, OrderDetailsButton as O, PaymentRequestButton as P, QuickReplyButton as Q, StandardTemplate as S, Template as T, Variables as V, AuthenticationTemplate as a, CarouselCard as b, CatalogButton as c, CopyCodeButton as d, Header as e, LocationHeader as f, MultiProductButton as g, OtpButton as h, PhoneNumberButton as i, ProductHeader as j, SingleProductButton as k, SupportedApp as l, TextHeader as m, UrlButton as n, Variable as o, VoiceCallButton as p };

package/dist/types-CRH48UOs.d.ts

@@ -0,0 +1,194 @@
+/**
+ * A WhatsApp message template. Field names follow Meta's template API in camelCase.
+ * Authentication templates have their own shape because Meta writes their body text.
+ */
+type Template = StandardTemplate | AuthenticationTemplate;
+type Category = "MARKETING" | "UTILITY" | "AUTHENTICATION";
+/** Example values for the `{{name}}` placeholders used anywhere in the template. */
+type Variables = Record<string, Variable>;
+type Variable = {
+    /** Sample value shown in the preview and sent to the provider for review. */
+    example: string;
+};
+type TemplateBase = {
+    /** Optional JSON Schema URL, for editor autocomplete in `.json` files. */
+    $schema?: string;
+    /** Lowercase letters, numbers and underscores, e.g. `order_shipped`. */
+    name: string;
+    /** Locale code, e.g. `en_US` or `pt_BR`. */
+    language: string;
+    /** Seconds the provider keeps trying to deliver the message. */
+    messageSendTtlSeconds?: number;
+};
+type StandardTemplate = TemplateBase & {
+    category: "MARKETING" | "UTILITY";
+    header?: Header;
+    /** Text with optional `{{name}}` placeholders and WhatsApp formatting (`*bold*`, `_italic_`). */
+    body: {
+        text: string;
+    };
+    footer?: {
+        text: string;
+    };
+    buttons?: Button[];
+    /** Turns the template into a limited-time offer. */
+    limitedTimeOffer?: LimitedTimeOffer;
+    /** Turns the template into a carousel of 2 to 10 cards. */
+    carousel?: {
+        cards: CarouselCard[];
+    };
+    /** Asks the user for permission to call them. */
+    callPermissionRequest?: true;
+    /** Renders the template as an order details message. */
+    displayFormat?: "ORDER_DETAILS";
+    variables?: Variables;
+};
+type AuthenticationTemplate = TemplateBase & {
+    category: "AUTHENTICATION";
+    body?: {
+        /** Appends "For your security, do not share this code." */
+        addSecurityRecommendation?: boolean;
+    };
+    footer?: {
+        /** Appends "This code expires in N minutes." (1 to 90). */
+        codeExpirationMinutes?: number;
+    };
+    button: OtpButton;
+};
+type Header = TextHeader | MediaHeader | LocationHeader | ProductHeader;
+type TextHeader = {
+    type: "TEXT";
+    /** Up to one `{{name}}` placeholder. */
+    text: string;
+};
+type MediaHeader = {
+    type: "IMAGE" | "VIDEO" | "DOCUMENT" | "GIF";
+    /** Public URL of a sample file, used for the preview and for review. */
+    url: string;
+    filename?: string;
+};
+type LocationHeader = {
+    type: "LOCATION";
+};
+type ProductHeader = {
+    type: "PRODUCT";
+};
+type Button = QuickReplyButton | UrlButton | PhoneNumberButton | VoiceCallButton | CopyCodeButton | FlowButton | CatalogButton | MultiProductButton | SingleProductButton | OrderDetailsButton | PaymentRequestButton;
+type QuickReplyButton = {
+    type: "QUICK_REPLY";
+    text: string;
+};
+type UrlButton = {
+    type: "URL";
+    text: string;
+    /** A `{{name}}` placeholder at the end makes the URL dynamic. */
+    url: string;
+};
+type PhoneNumberButton = {
+    type: "PHONE_NUMBER";
+    text: string;
+    /** International format, e.g. `+15550100`. */
+    phoneNumber: string;
+};
+type VoiceCallButton = {
+    type: "VOICE_CALL";
+    text: string;
+    ttlMinutes?: number;
+};
+type CopyCodeButton = {
+    type: "COPY_CODE";
+    /** Sample coupon code, up to 20 characters. */
+    example: string;
+};
+type FlowButton = {
+    type: "FLOW";
+    text: string;
+    flowId?: string;
+    flowName?: string;
+    flowJson?: string;
+    flowAction?: "navigate" | "data_exchange";
+    navigateScreen?: string;
+};
+type CatalogButton = {
+    type: "CATALOG";
+    text: string;
+};
+type MultiProductButton = {
+    type: "MPM";
+    text: string;
+};
+type SingleProductButton = {
+    type: "SPM";
+    text: string;
+};
+type OrderDetailsButton = {
+    type: "ORDER_DETAILS";
+    text: string;
+};
+type PaymentRequestButton = {
+    type: "PAYMENT_REQUEST";
+    text?: string;
+    paymentSetting: "pix_dynamic_code" | "boleto" | "payment_link" | "offsite_card_pay";
+};
+type OtpButton = {
+    type: "OTP";
+    otpType: "COPY_CODE" | "ONE_TAP" | "ZERO_TAP";
+    /** Button label. Meta localizes it when omitted. */
+    text?: string;
+    /** One-tap and zero-tap only: label of the autofill button. */
+    autofillText?: string;
+    /** One-tap and zero-tap only: up to 5 Android apps. */
+    supportedApps?: SupportedApp[];
+    /** Zero-tap only: must be `true` to accept Meta's zero-tap terms. */
+    zeroTapTermsAccepted?: boolean;
+};
+type SupportedApp = {
+    packageName: string;
+    /** 11-character app signature hash. */
+    signatureHash: string;
+};
+type LimitedTimeOffer = {
+    /** Offer headline, e.g. "Expiring offer!". */
+    text: string;
+    /** Shows a countdown; the expiration time is set when sending. */
+    hasExpiration?: boolean;
+};
+type CarouselCard = {
+    header: {
+        type: "IMAGE" | "VIDEO";
+        url: string;
+    } | ProductHeader;
+    body?: {
+        text: string;
+    };
+    buttons?: Array<QuickReplyButton | UrlButton | PhoneNumberButton | SingleProductButton>;
+};
+
+type HttpRequest = {
+    method: "POST";
+    url: string;
+    headers: Record<string, string>;
+    body: unknown;
+    /** Printed as `#` comments above the request by `toCurl`. */
+    comments?: string[];
+};
+type Adapter = {
+    name: string;
+    toRequests(template: Template): HttpRequest[];
+};
+type AdapterDefinition<O> = {
+    name: string;
+    toRequests(template: Template, options: O): HttpRequest[];
+};
+/** Turns an adapter definition into a factory: `meta({ wabaId })` returns an `Adapter`. */
+declare function defineAdapter<O extends object>(definition: AdapterDefinition<O>): (...[options]: Partial<O> extends O ? [O?] : [O]) => Adapter;
+/** Thrown when a template uses a field the provider cannot create. */
+declare class UnsupportedByProviderError extends Error {
+    readonly provider: string;
+    readonly path: string;
+    readonly code = "UNSUPPORTED_BY_PROVIDER";
+    constructor(provider: string, path: string, message: string);
+}
+
+export { UnsupportedByProviderError as U, defineAdapter as q };
+export type { Adapter as A, Button as B, Category as C, FlowButton as F, HttpRequest as H, LimitedTimeOffer as L, MediaHeader as M, OrderDetailsButton as O, PaymentRequestButton as P, QuickReplyButton as Q, StandardTemplate as S, Template as T, Variables as V, AuthenticationTemplate as a, CarouselCard as b, CatalogButton as c, CopyCodeButton as d, Header as e, LocationHeader as f, MultiProductButton as g, OtpButton as h, PhoneNumberButton as i, ProductHeader as j, SingleProductButton as k, SupportedApp as l, TextHeader as m, UrlButton as n, Variable as o, VoiceCallButton as p };