@cosmicdrift/kumiko-samples 0.362.0 → 0.363.0

package/packages/bundled-features/src/renderer-simple/mail-blocks.ts

@@ -1,138 +0,0 @@
-import { escapeHtml, escapeHtmlAttr } from "@cosmicdrift/kumiko-headless";
-
-export type MailTone = "neutral" | "info" | "success" | "warning" | "danger";
-export type MailStageState = "done" | "current" | "upcoming";
-
-export type MailBadge = { readonly label: string; readonly tone?: MailTone };
-export type MailStage = { readonly label: string; readonly state: MailStageState };
-export type MailChip = { readonly label: string; readonly tone?: MailTone };
-
-// Literal types (as const) keep the colors compile-time known, so they can go into style
-// attributes without escaping.
-const TONE_COLORS = {
-  neutral: { bg: "#f3f4f6", fg: "#374151" },
-  info: { bg: "#dbeafe", fg: "#1e40af" },
-  success: { bg: "#dcfce7", fg: "#166534" },
-  warning: { bg: "#fef3c7", fg: "#92400e" },
-  danger: { bg: "#fee2e2", fg: "#991b1b" },
-} as const satisfies Readonly<Record<MailTone, { readonly bg: string; readonly fg: string }>>;
-
-type ToneColors = (typeof TONE_COLORS)[MailTone];
-type PillMargin = "0" | "0 6px 6px 0";
-
-const STAGE_STATES: readonly MailStageState[] = ["done", "current", "upcoming"];
-const STAGE_DONE_COLOR = "#16a34a";
-const STAGE_UPCOMING_BG = "#e5e7eb";
-const STAGE_UPCOMING_FG = "#9ca3af";
-
-function isRecord(value: unknown): value is Readonly<Record<string, unknown>> {
-  return typeof value === "object" && value !== null;
-}
-
-function isMailTone(value: unknown): value is MailTone {
-  return typeof value === "string" && Object.hasOwn(TONE_COLORS, value);
-}
-
-function toneColors(tone: unknown): ToneColors {
-  return TONE_COLORS[isMailTone(tone) ? tone : "neutral"];
-}
-
-function isStageState(value: unknown): value is MailStageState {
-  return STAGE_STATES.some((state) => state === value);
-}
-
-// Template data is runtime data (variables of a stored template): entries that do not match are
-// skipped instead of failing the whole mail.
-function isStage(value: unknown): value is MailStage {
-  return isRecord(value) && typeof value["label"] === "string" && isStageState(value["state"]);
-}
-
-function isChip(value: unknown): value is MailChip {
-  return isRecord(value) && typeof value["label"] === "string";
-}
-
-export function parseBadge(value: unknown): MailBadge | undefined {
-  return isChip(value) && value.label !== "" ? value : undefined;
-}
-
-function validStages(value: unknown): readonly MailStage[] {
-  return Array.isArray(value) ? value.filter(isStage) : [];
-}
-
-function validChips(value: unknown): readonly MailChip[] {
-  return Array.isArray(value) ? value.filter(isChip) : [];
-}
-
-function pill(chip: MailChip, margin: PillMargin): string {
-  const { bg, fg } = toneColors(chip.tone);
-  return `<span style="display:inline-block;margin:${margin};padding:2px 10px;border-radius:999px;background:${bg};color:${fg};font-size:12px;font-weight:600;line-height:18px">${escapeHtml(chip.label)}</span>`;
-}
-
-export function renderBadge(badge: MailBadge): string {
-  return `<p style="margin:0 0 12px">${pill(badge, "0")}</p>`;
-}
-
-export function renderChips(chips: unknown): string {
-  const valid = validChips(chips);
-  if (valid.length === 0) return "";
-  return `<p style="margin:0 0 16px">${valid.map((chip) => pill(chip, "0 6px 6px 0")).join("")}</p>`;
-}
-
-function stageMarker(stage: MailStage, position: number, primaryColor: string): string {
-  const base =
-    "display:inline-block;width:24px;height:24px;line-height:24px;border-radius:12px;text-align:center;font-size:12px;font-weight:700";
-  const primary = escapeHtmlAttr(primaryColor);
-  if (stage.state === "done") {
-    return `<span style="${base};background:${STAGE_DONE_COLOR};color:#fff">&#10003;</span>`;
-  }
-  if (stage.state === "current") {
-    return `<span style="${base};background:#fff;border:2px solid ${primary};line-height:20px;width:20px;height:20px;color:${primary}">${position}</span>`;
-  }
-  return `<span style="${base};background:${STAGE_UPCOMING_BG};color:${STAGE_UPCOMING_FG}">${position}</span>`;
-}
-
-function stageCell(stage: MailStage, position: number, primaryColor: string): string {
-  const labelColor = stage.state === "upcoming" ? STAGE_UPCOMING_FG : "#111";
-  const weight = stage.state === "current" ? 700 : 400;
-  return `<td align="center" valign="top" style="padding:0 4px;font-family:sans-serif">${stageMarker(stage, position, primaryColor)}<div style="margin:4px 0 0;font-size:12px;font-weight:${weight};color:${labelColor}">${escapeHtml(stage.label)}</div></td>`;
-}
-
-function stageConnector(previous: MailStage): string {
-  const color = previous.state === "done" ? STAGE_DONE_COLOR : STAGE_UPCOMING_BG;
-  return `<td valign="top" style="padding:11px 0 0"><div style="width:24px;height:2px;line-height:2px;font-size:2px;background:${color}">&nbsp;</div></td>`;
-}
-
-export function renderStages(stages: unknown, primaryColor: string): string {
-  const valid = validStages(stages);
-  if (valid.length === 0) return "";
-  const cellsHtml = valid
-    .map((stage, index) => {
-      const previous = valid[index - 1];
-      const connector = previous ? stageConnector(previous) : "";
-      return `${connector}${stageCell(stage, index + 1, primaryColor)}`;
-    })
-    .join("");
-  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 16px"><tr>${cellsHtml}</tr></table>`;
-}
-
-const STAGE_TEXT_MARKER: Readonly<Record<MailStageState, string>> = {
-  done: "✓",
-  current: "▶",
-  upcoming: "○",
-};
-
-export function badgeText(badge: MailBadge): string {
-  return `[${badge.label}]`;
-}
-
-export function stagesText(stages: unknown): string {
-  return validStages(stages)
-    .map((stage) => `${STAGE_TEXT_MARKER[stage.state]} ${stage.label}`)
-    .join(" → ");
-}
-
-export function chipsText(chips: unknown): string {
-  return validChips(chips)
-    .map((chip) => chip.label)
-    .join(" · ");
-}

package/packages/bundled-features/src/renderer-simple/resolve-variables.ts

@@ -1,57 +0,0 @@
-import type { RendererContext, RenderRequest } from "../renderer-foundation/index.js";
-import {
-  createTemplateResolverApi,
-  FALLBACK_LOCALE,
-  TemplateNotFoundError,
-} from "../template-resolver/index.js";
-
-type NotificationRequest = Extract<RenderRequest, { kind: "notification" }>;
-
-/** Merge template-resolver content (plain JSON EmailTemplateData) with runtime variables. */
-export async function resolveNotificationVariables(
-  req: NotificationRequest,
-  ctx: RendererContext,
-): Promise<Readonly<Record<string, unknown>>> {
-  const variables = req.payload.variables ?? {};
-  const slug = req.payload.template?.trim();
-  if (!slug || req.payload.content || !ctx.db || !ctx.registry.features.has("template-resolver")) {
-    return variables;
-  }
-
-  try {
-    const api = createTemplateResolverApi(ctx.db);
-    const locale = req.payload.locale ?? FALLBACK_LOCALE;
-    const resolved = await api.resolveTemplate({
-      tenantId: ctx.tenantId,
-      slug,
-      kind: "notification",
-      locale,
-    });
-    if (resolved.contentFormat === "plain") {
-      const base = parsePlainTemplateContent(resolved.content);
-      return { ...base, ...variables };
-    }
-    // body always wins from the resolved template for rendered formats — a runtime
-    // "variables.body" override would clobber the actual rendered content.
-    return { ...variables, body: resolved.content };
-  } catch (err) {
-    if (err instanceof TemplateNotFoundError) {
-      return variables;
-    }
-    throw err;
-  }
-}
-
-function parsePlainTemplateContent(content: string): Record<string, unknown> {
-  const trimmed = content.trim();
-  if (!trimmed) return {};
-  try {
-    const parsed: unknown = JSON.parse(trimmed);
-    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
-      return parsed as Record<string, unknown>;
-    }
-  } catch {
-    // ponytail: non-JSON plain content becomes a single body section downstream
-  }
-  return { body: content };
-}

package/packages/bundled-features/src/renderer-simple/simple-renderer.ts

@@ -1,304 +0,0 @@
-import { escapeHtml, escapeHtmlAttr } from "@cosmicdrift/kumiko-headless";
-import type { NotificationRenderer } from "../delivery/index.js";
-import { renderSafeMarkdown } from "../page-render/index.js";
-import {
-  badgeText,
-  chipsText,
-  type MailBadge,
-  type MailChip,
-  type MailStage,
-  parseBadge,
-  renderBadge,
-  renderChips,
-  renderStages,
-  stagesText,
-} from "./mail-blocks.js";
-
-export type MailBranding = {
-  /** Shown as text when there is no logo, and as the logo alt text. */
-  readonly productName?: string;
-  /** Hex color (#rgb, #rrggbb, #rrggbbaa); used for buttons and the header accent. */
-  readonly primaryColor?: string;
-  /** Absolute http(s) URL; anything else is dropped. Mutually exclusive with `logoPath`. */
-  readonly logoUrl?: string;
-  /** Absolute path on `baseUrl` (e.g. "/logo.png"); use PNG/JPEG, mail clients block SVG. */
-  readonly logoPath?: string;
-  /** Absolute http(s) origin that `logoPath` is resolved against; same base as `auth.mail.baseUrl`. */
-  readonly baseUrl?: string;
-  /** Locale tried after the exact and language-part match when a localized field has no entry. */
-  readonly defaultLocale?: string;
-  readonly footerText?: LocalizedText;
-  /** Absolute http(s) URLs only; string URLs that are not are dropped, localized ones fail at boot. */
-  readonly footerLinks?: readonly {
-    readonly label: LocalizedText;
-    readonly url: LocalizedText;
-  }[];
-};
-
-export type LocalizedText = string | Readonly<Record<string, string>>;
-
-const DEFAULT_PRIMARY_COLOR = "#2563eb";
-const HEX_COLOR_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
-
-function isHttpUrl(value: string): boolean {
-  try {
-    const { protocol } = new URL(value);
-    return protocol === "http:" || protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-
-function languagePart(locale: string): string {
-  return locale.split("-")[0] ?? locale;
-}
-
-function pickByLocale(
-  entries: Readonly<Record<string, string>>,
-  locale: string,
-): string | undefined {
-  // Own keys only: a locale like "constructor" must not hit Object.prototype.
-  const ownEntry = (key: string): string | undefined =>
-    Object.hasOwn(entries, key) ? entries[key] : undefined;
-  return ownEntry(locale) ?? ownEntry(languagePart(locale));
-}
-
-function resolveLocalized(
-  value: LocalizedText | undefined,
-  locale: string | undefined,
-  defaultLocale: string | undefined,
-): string | undefined {
-  if (value === undefined || typeof value === "string") return value;
-  return (
-    (locale !== undefined ? pickByLocale(value, locale) : undefined) ??
-    (defaultLocale !== undefined ? pickByLocale(value, defaultLocale) : undefined) ??
-    Object.values(value)[0]
-  );
-}
-
-function assertLocalizedUrlsAreHttp(branding: MailBranding): void {
-  for (const link of branding.footerLinks ?? []) {
-    if (typeof link.url === "string") continue;
-    for (const [locale, url] of Object.entries(link.url)) {
-      if (!isHttpUrl(url)) {
-        throw new Error(
-          `createSimpleRenderer: footerLinks url for locale "${locale}" must be an absolute http(s) URL`,
-        );
-      }
-    }
-  }
-}
-
-function resolveLogoUrl(branding: MailBranding | undefined): string | undefined {
-  if (!branding) return undefined;
-  const { logoUrl, logoPath, baseUrl } = branding;
-  if (logoPath === undefined) {
-    return logoUrl && isHttpUrl(logoUrl) ? logoUrl : undefined;
-  }
-  if (logoUrl !== undefined) {
-    throw new Error("createSimpleRenderer: logoPath and logoUrl are mutually exclusive");
-  }
-  if (baseUrl === undefined || !isHttpUrl(baseUrl)) {
-    throw new Error("createSimpleRenderer: logoPath requires an absolute http(s) baseUrl");
-  }
-  if (!/^\/(?![/\\])/.test(logoPath) || logoPath.includes("\\")) {
-    throw new Error('createSimpleRenderer: logoPath must start with a single "/"');
-  }
-  const resolved = new URL(logoPath, baseUrl);
-  if (resolved.origin !== new URL(baseUrl).origin) {
-    throw new Error("createSimpleRenderer: logoPath must stay on the baseUrl origin");
-  }
-  return resolved.href;
-}
-
-function resolvePrimaryColor(branding: MailBranding | undefined): string {
-  const color = branding?.primaryColor;
-  return color && HEX_COLOR_PATTERN.test(color) ? color : DEFAULT_PRIMARY_COLOR;
-}
-
-function renderBrandingHeader(
-  branding: MailBranding | undefined,
-  primaryColor: string,
-  logoUrl: string | undefined,
-): string {
-  if (!branding) return "";
-  if (!logoUrl && !branding.productName) return "";
-  const logo = logoUrl
-    ? `<img src="${escapeHtmlAttr(logoUrl)}" alt="${escapeHtmlAttr(branding.productName ?? "")}" style="display:block;max-height:40px;max-width:200px;border:0" />`
-    : `<span style="font-size:18px;font-weight:700;color:${escapeHtmlAttr(primaryColor)}">${escapeHtml(branding.productName ?? "")}</span>`;
-  return `<div style="margin:0 0 24px;padding:0 0 16px;border-bottom:3px solid ${escapeHtmlAttr(primaryColor)}">${logo}</div>`;
-}
-
-type ResolvedBrandingFooter = {
-  readonly footerText: string | undefined;
-  readonly links: readonly { readonly label: string; readonly url: string }[];
-};
-
-function resolveBrandingFooter(
-  branding: MailBranding,
-  locale: string | undefined,
-): ResolvedBrandingFooter {
-  const pick = (value: LocalizedText | undefined): string | undefined =>
-    resolveLocalized(value, locale, branding.defaultLocale);
-  const links = (branding.footerLinks ?? []).flatMap((link) => {
-    const url = pick(link.url);
-    if (url === undefined || !isHttpUrl(url)) return [];
-    return [{ label: pick(link.label) ?? "", url }];
-  });
-  return { footerText: pick(branding.footerText), links };
-}
-
-function renderBrandingFooter(
-  branding: MailBranding | undefined,
-  locale: string | undefined,
-): string {
-  if (!branding) return "";
-  const { footerText, links: resolvedLinks } = resolveBrandingFooter(branding, locale);
-  const links = resolvedLinks.map(
-    (link) =>
-      `<a href="${escapeHtmlAttr(link.url)}" style="color:#999">${escapeHtml(link.label)}</a>`,
-  );
-  const footerPartsHtml = [footerText ? escapeHtml(footerText) : "", links.join(" · ")].filter(
-    (part) => part !== "",
-  );
-  if (footerPartsHtml.length === 0) return "";
-  const footerHtml = footerPartsHtml.join("<br />");
-  return `<p style="margin:16px 0 0;color:#999;font-size:12px">${footerHtml}</p>`;
-}
-
-function brandingFooterLines(
-  branding: MailBranding | undefined,
-  locale: string | undefined,
-): readonly string[] {
-  if (!branding) return [];
-  const { footerText, links } = resolveBrandingFooter(branding, locale);
-  return [
-    ...(footerText ? [footerText] : []),
-    ...links.map((link) => (link.label ? `${link.label}: ${link.url}` : link.url)),
-  ];
-}
-
-type Section =
-  | { readonly text: string }
-  | { readonly heading: string }
-  | { readonly markdown: string }
-  | { readonly button: { readonly label: string; readonly url: string } }
-  | { readonly stages: readonly MailStage[] }
-  | { readonly chips: readonly MailChip[] };
-
-type EmailTemplateData = {
-  // Preferred: structured email data
-  readonly badge?: MailBadge;
-  readonly header?: string;
-  readonly sections?: readonly Section[];
-  readonly footer?: string;
-  // Fallback: plain title + body (used when no structured template is defined)
-  readonly title?: string;
-  readonly body?: string;
-};
-
-function templateContent(variables: Readonly<Record<string, unknown>>): {
-  readonly badge: MailBadge | undefined;
-  readonly header: string | undefined;
-  readonly sections: readonly Section[] | undefined;
-  readonly footer: string | undefined;
-} {
-  const data = variables as EmailTemplateData; // @cast-boundary render-helper
-  // Without structured fields, title + body become the header and a single text section.
-  return {
-    badge: parseBadge(data.badge),
-    header: data.header ?? data.title,
-    sections: data.sections ?? (data.body ? [{ text: data.body }] : undefined),
-    footer: data.footer,
-  };
-}
-
-// Markdown stays as written: its source is already readable plain text.
-function sectionText(section: Section): string {
-  if ("text" in section) return section.text;
-  if ("heading" in section) return section.heading;
-  if ("markdown" in section) return section.markdown;
-  if ("button" in section) return `${section.button.label}: ${section.button.url}`;
-  if ("stages" in section) return stagesText(section.stages);
-  if ("chips" in section) return chipsText(section.chips);
-  return "";
-}
-
-function renderSection(section: Section, primaryColor: string): string {
-  if ("text" in section) {
-    return `<p style="margin:0 0 16px;color:#333;font-size:14px;line-height:1.5">${escapeHtml(section.text)}</p>`;
-  }
-  if ("heading" in section) {
-    return `<h2 style="margin:24px 0 12px;color:#111;font-size:16px;font-weight:600">${escapeHtml(section.heading)}</h2>`;
-  }
-  if ("markdown" in section) {
-    const markdownHtml = renderSafeMarkdown(section.markdown);
-    return `<div style="color:#333;font-size:14px;line-height:1.5">${markdownHtml}</div>`;
-  }
-  if ("button" in section) {
-    return `<p style="margin:0 0 16px"><a href="${escapeHtml(section.button.url)}" style="display:inline-block;padding:10px 24px;background:${escapeHtmlAttr(primaryColor)};color:#fff;text-decoration:none;border-radius:4px;font-size:14px">${escapeHtml(section.button.label)}</a></p>`;
-  }
-  if ("stages" in section) return renderStages(section.stages, primaryColor);
-  if ("chips" in section) return renderChips(section.chips);
-  return "";
-}
-
-// Simple Renderer: turns structured email template data into HTML with inline CSS.
-// No external dependencies, no template engine — just string concatenation.
-export function createSimpleRenderer(branding?: MailBranding): NotificationRenderer {
-  const primaryColor = resolvePrimaryColor(branding);
-  const logoUrl = resolveLogoUrl(branding);
-  if (branding) assertLocalizedUrlsAreHttp(branding);
-  return {
-    name: "simple",
-
-    async render(input) {
-      const { badge, header, sections, footer } = templateContent(input.variables);
-
-      const parts: string[] = [];
-      parts.push('<!DOCTYPE html><html><body style="margin:0;padding:0;font-family:sans-serif">');
-      parts.push('<div style="max-width:600px;margin:0 auto;padding:24px">');
-      parts.push(renderBrandingHeader(branding, primaryColor, logoUrl));
-
-      if (badge) parts.push(renderBadge(badge));
-
-      if (header) {
-        parts.push(
-          `<h1 style="margin:0 0 24px;color:#111;font-size:20px;font-weight:600">${escapeHtml(header)}</h1>`,
-        );
-      }
-
-      if (sections) {
-        for (const section of sections) {
-          parts.push(renderSection(section, primaryColor));
-        }
-      }
-
-      if (footer) {
-        parts.push(
-          `<p style="margin:24px 0 0;color:#999;font-size:12px;border-top:1px solid #eee;padding-top:16px">${escapeHtml(footer)}</p>`,
-        );
-      }
-
-      parts.push(renderBrandingFooter(branding, input.locale));
-      parts.push("</div></body></html>");
-      return parts.join("");
-    },
-
-    async renderText(input) {
-      const { badge, header, sections, footer } = templateContent(input.variables);
-      const brandingFooter = brandingFooterLines(branding, input.locale).join("\n");
-      return [
-        badge ? badgeText(badge) : undefined,
-        header,
-        ...(sections ?? []).map(sectionText),
-        footer,
-        brandingFooter,
-      ]
-        .filter((block): block is string => block !== undefined && block !== "")
-        .join("\n\n");
-    },
-  };
-}
-
-export const simpleRenderer: NotificationRenderer = createSimpleRenderer();