@aranova/tracking-next 0.19.2 → 0.20.1

package/dist/blog-server.js

@@ -0,0 +1,2303 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/blog-server.ts
+var blog_server_exports = {};
+__export(blog_server_exports, {
+  BASE_BLOG_THEME: () => BASE_BLOG_THEME,
+  BLOG_BASE_CSS: () => BLOG_BASE_CSS,
+  BLOG_BREAKPOINTS: () => BLOG_BREAKPOINTS,
+  BLOG_BREAKPOINT_MIN_WIDTHS_PX: () => BLOG_BREAKPOINT_MIN_WIDTHS_PX,
+  BLOG_MDX_ALLOWED_COMPONENTS: () => BLOG_MDX_ALLOWED_COMPONENTS,
+  BLOG_MDX_COMPONENT_GRAMMAR: () => BLOG_MDX_COMPONENT_GRAMMAR,
+  BLOG_MDX_MAX_DEPTH: () => BLOG_MDX_MAX_DEPTH,
+  BLOG_MDX_MAX_NODES: () => BLOG_MDX_MAX_NODES,
+  BLOG_MDX_MAX_SIZE: () => BLOG_MDX_MAX_SIZE,
+  BLOG_THEME_PRESETS: () => BLOG_THEME_PRESETS,
+  BlogBreadcrumbs: () => BlogBreadcrumbs,
+  BlogPost: () => BlogPost2,
+  BlogPostMeta: () => BlogPostMeta,
+  BlogPostView: () => BlogPostView,
+  BlogTocShell: () => BlogTocShell,
+  DEFAULT_BLOG_LOCALE: () => DEFAULT_BLOG_LOCALE,
+  blogHeroImageSchema: () => blogHeroImageSchema,
+  blogImageSchema: () => blogImageSchema,
+  blogManifestEntrySchema: () => blogManifestEntrySchema,
+  blogManifestSchema: () => blogManifestSchema,
+  blogManifestWireSchema: () => blogManifestWireSchema,
+  blogPostContentSchema: () => blogPostContentSchema,
+  blogPostContentWireSchema: () => blogPostContentWireSchema,
+  blogSeoSchema: () => blogSeoSchema,
+  blogThemeColorsSchema: () => blogThemeColorsSchema,
+  blogThemeOverrideSchema: () => blogThemeOverrideSchema,
+  blogThemeSchema: () => blogThemeSchema,
+  blogThemeSpacingSchema: () => blogThemeSpacingSchema,
+  blogThemeToCssVars: () => blogThemeToCssVars,
+  blogThemeTypographySchema: () => blogThemeTypographySchema,
+  buildBlogPostMetadata: () => buildBlogPostMetadata,
+  buildBlogPostingJsonLd: () => buildBlogPostingJsonLd,
+  buildBlogSitemapEntries: () => buildBlogSitemapEntries,
+  buildFaqJsonLd: () => buildFaqJsonLd,
+  createBlogClient: () => createBlogClient,
+  createBlogFontTheme: () => createBlogFontTheme,
+  createDefaultComponents: () => createDefaultComponents,
+  estimateReadingTime: () => estimateReadingTime,
+  extractBlogHeadings: () => extractBlogHeadings,
+  extractFaqPairs: () => extractFaqPairs,
+  joinClassNames: () => joinClassNames,
+  nullishField: () => nullishField,
+  parseBlogManifest: () => parseBlogManifest,
+  parseBlogPostContent: () => parseBlogPostContent,
+  resolveBlogTheme: () => resolveBlogTheme,
+  responsive: () => responsive,
+  sanitizeBlogTheme: () => sanitizeBlogTheme,
+  serializeJsonLd: () => serializeJsonLd,
+  toBlogBreakpointMap: () => toBlogBreakpointMap,
+  validateBlogMdx: () => validateBlogMdx
+});
+module.exports = __toCommonJS(blog_server_exports);
+var import_server_only = require("server-only");
+
+// ../tracking-core/src/resources/blog/schema.ts
+var import_zod2 = require("zod");
+
+// ../tracking-core/src/resources/blog/theme.ts
+var import_zod = require("zod");
+var BLOG_BREAKPOINTS = ["sm", "md", "lg", "xl", "2xl", "3xl"];
+var BLOG_BREAKPOINT_MIN_WIDTHS_PX = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "3xl": 1920
+};
+function toBlogBreakpointMap(value) {
+  return typeof value === "object" ? value : { base: value };
+}
+var HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;
+var FUNCTIONAL_COLOR = /^(rgb|rgba|hsl|hsla|oklch)\([0-9a-zA-Z ,.%/-]*\)$/;
+var LENGTH = /^-?\d+(\.\d+)?(px|rem|em|%|ch|vw)$/;
+var LINE_HEIGHT = /^-?\d+(\.\d+)?(px|rem|em|%|ch|vw)?$/;
+var FONT_FAMILY_TOKEN = /^['"]?[a-zA-Z0-9 -]+['"]?$/;
+var FONT_FAMILY_VAR_TOKEN = /^var\(--[a-zA-Z0-9-]+\)$/;
+var colorValueSchema = import_zod.z.string().refine((v) => HEX_COLOR.test(v) || FUNCTIONAL_COLOR.test(v), {
+  message: "must be a #hex or rgb()/rgba()/hsl()/hsla()/oklch() color"
+});
+var lengthValueSchema = import_zod.z.string().regex(LENGTH, {
+  message: "must be a CSS length (px|rem|em|%|ch|vw)"
+});
+var lineHeightValueSchema = import_zod.z.string().regex(LINE_HEIGHT, {
+  message: "must be a CSS length or unitless line-height"
+});
+var fontWeightSchema = import_zod.z.number().int().min(100).max(1e3);
+var alignValueSchema = import_zod.z.enum(["left", "center", "right"]);
+var fontFamilySchema = import_zod.z.string().refine(
+  (v) => {
+    const tokens = v.split(",").map((t) => t.trim());
+    return tokens.length > 0 && tokens.every((t) => FONT_FAMILY_TOKEN.test(t) || FONT_FAMILY_VAR_TOKEN.test(t));
+  },
+  { message: "must be a comma-separated list of font-family or var(--custom-property) tokens" }
+);
+function nullishField(schema) {
+  return schema.nullish().transform((v) => v ?? void 0);
+}
+function breakpointMapSchema(valueSchema) {
+  return import_zod.z.object({
+    base: valueSchema,
+    sm: nullishField(valueSchema).catch(void 0),
+    md: nullishField(valueSchema).catch(void 0),
+    lg: nullishField(valueSchema).catch(void 0),
+    xl: nullishField(valueSchema).catch(void 0),
+    "2xl": nullishField(valueSchema).catch(void 0),
+    "3xl": nullishField(valueSchema).catch(void 0)
+  });
+}
+function responsive(valueSchema) {
+  return import_zod.z.union([valueSchema, breakpointMapSchema(valueSchema)]);
+}
+var blogThemeColorsShape = {
+  background: colorValueSchema,
+  surface: colorValueSchema,
+  text: colorValueSchema,
+  text_muted: colorValueSchema,
+  primary: colorValueSchema,
+  primary_foreground: colorValueSchema,
+  link: colorValueSchema,
+  border: colorValueSchema,
+  code_background: colorValueSchema,
+  heading: colorValueSchema
+};
+var blogThemeColorsSchema = import_zod.z.object({
+  ...blogThemeColorsShape,
+  // The ONE optional color in a resolved theme: when unset, headings fall back
+  // to `text` in the stylesheet (`--_heading-color`), so `blogThemeToCssVars`
+  // only emits `--ara-blog-color-heading` when a theme actually sets it.
+  heading: nullishField(colorValueSchema)
+});
+var blogThemeTypographySchema = import_zod.z.object({
+  heading_family: fontFamilySchema,
+  body_family: fontFamilySchema,
+  heading_weight: fontWeightSchema,
+  body_weight: fontWeightSchema,
+  h1_size: responsive(lengthValueSchema),
+  h2_size: responsive(lengthValueSchema),
+  h3_size: responsive(lengthValueSchema),
+  h4_size: responsive(lengthValueSchema),
+  body_size: responsive(lengthValueSchema),
+  body_line_height: responsive(lineHeightValueSchema),
+  small_size: responsive(lengthValueSchema),
+  // Scalar (non-responsive) length; the grammar allows negative em values.
+  // h1/h2 consume it directly, h3/h4 at half strength (calc in the base CSS).
+  heading_letter_spacing: lengthValueSchema,
+  // Figure caption text alignment (left/center/right). Site-owner override;
+  // default center in the base CSS if unset.
+  caption_align: alignValueSchema
+});
+var blogThemeSpacingSchema = import_zod.z.object({
+  content_max_width: responsive(lengthValueSchema),
+  block_gap: responsive(lengthValueSchema),
+  section_gap: responsive(lengthValueSchema)
+});
+var blogThemeColorsPartialSchema = import_zod.z.object(
+  Object.fromEntries(
+    Object.keys(blogThemeColorsShape).map((key) => [key, nullishField(colorValueSchema)])
+  )
+);
+var blogThemeSchema = import_zod.z.object({
+  colors: blogThemeColorsSchema,
+  colors_dark: nullishField(blogThemeColorsPartialSchema),
+  typography: blogThemeTypographySchema,
+  spacing: blogThemeSpacingSchema,
+  radius: responsive(lengthValueSchema)
+});
+function dropInvalidFields(shape) {
+  const out = {};
+  for (const [key, schema] of Object.entries(shape)) {
+    out[key] = nullTolerant(schema).catch(void 0);
+  }
+  return out;
+}
+function nullTolerant(schema) {
+  if (schema instanceof import_zod.z.ZodUnion) {
+    const options = schema.options;
+    return import_zod.z.union([...options, import_zod.z.null()]).optional().transform((v) => v ?? void 0);
+  }
+  return nullishField(schema);
+}
+var blogThemeColorsOverrideSchema = import_zod.z.object(dropInvalidFields(blogThemeColorsShape));
+var blogThemeTypographyOverrideSchema = import_zod.z.object(
+  dropInvalidFields(blogThemeTypographySchema.shape)
+);
+var blogThemeSpacingOverrideSchema = import_zod.z.object(dropInvalidFields(blogThemeSpacingSchema.shape));
+var blogThemeOverrideSchema = import_zod.z.object(
+  dropInvalidFields({
+    colors: blogThemeColorsOverrideSchema,
+    colors_dark: blogThemeColorsOverrideSchema,
+    typography: blogThemeTypographyOverrideSchema,
+    spacing: blogThemeSpacingOverrideSchema,
+    radius: responsive(lengthValueSchema)
+  })
+);
+var BASE_BLOG_THEME = {
+  colors: {
+    background: "#ffffff",
+    surface: "#f5f5f5",
+    text: "#171717",
+    text_muted: "#6b6b6b",
+    primary: "#171717",
+    primary_foreground: "#ffffff",
+    link: "#1d4ed8",
+    border: "#e5e5e5",
+    code_background: "#f5f5f5"
+  },
+  typography: {
+    heading_family: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    body_family: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    heading_weight: 700,
+    body_weight: 400,
+    // Responsive defaults: comfortable mobile sizes, larger from `md` up.
+    // This replaces the hardcoded mobile media query the base CSS used to need.
+    h1_size: { base: "1.9rem", md: "2.25rem" },
+    h2_size: { base: "1.5rem", md: "1.75rem" },
+    h3_size: "1.25rem",
+    h4_size: "1.125rem",
+    body_size: "1rem",
+    body_line_height: "1.7",
+    small_size: "0.875rem",
+    heading_letter_spacing: "-0.02em",
+    caption_align: "center"
+  },
+  spacing: {
+    content_max_width: "42rem",
+    block_gap: "1.25rem",
+    section_gap: "3rem"
+  },
+  radius: "8px"
+};
+function sanitizeBlogTheme(raw) {
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {};
+  const parsed = blogThemeOverrideSchema.safeParse(raw);
+  return parsed.success ? parsed.data : {};
+}
+function mergeGroup(base, over) {
+  if (!over) return base;
+  const out = { ...base };
+  for (const [key, value] of Object.entries(over)) {
+    if (value !== void 0) out[key] = value;
+  }
+  return out;
+}
+function resolveBlogTheme(...layers) {
+  let resolved = {
+    colors: { ...BASE_BLOG_THEME.colors },
+    colors_dark: BASE_BLOG_THEME.colors_dark ? { ...BASE_BLOG_THEME.colors_dark } : void 0,
+    typography: { ...BASE_BLOG_THEME.typography },
+    spacing: { ...BASE_BLOG_THEME.spacing },
+    radius: BASE_BLOG_THEME.radius
+  };
+  for (const layer of layers) {
+    if (!layer) continue;
+    resolved = {
+      colors: mergeGroup(resolved.colors, layer.colors),
+      colors_dark: layer.colors_dark || resolved.colors_dark ? mergeGroup(resolved.colors_dark ?? {}, layer.colors_dark) : void 0,
+      typography: mergeGroup(resolved.typography, layer.typography),
+      spacing: mergeGroup(resolved.spacing, layer.spacing),
+      radius: layer.radius ?? resolved.radius
+    };
+  }
+  return resolved;
+}
+function kebab(key) {
+  return key.split("_").join("-");
+}
+function emitResponsiveVar(vars, name, value) {
+  const map = toBlogBreakpointMap(value);
+  vars[name] = String(map.base);
+  for (const bp of BLOG_BREAKPOINTS) {
+    const bpValue = map[bp];
+    if (bpValue !== void 0) vars[`${name}-${bp}`] = String(bpValue);
+  }
+}
+function blogThemeToCssVars(theme) {
+  const vars = {};
+  const dark = theme.colors_dark;
+  const hasDark = !!dark && Object.values(dark).some((v) => v !== void 0);
+  const colorKeys = /* @__PURE__ */ new Set([...Object.keys(theme.colors), ...dark ? Object.keys(dark) : []]);
+  for (const key of colorKeys) {
+    const light = theme.colors[key];
+    const darkValue = hasDark ? dark?.[key] : void 0;
+    const lightValue = light ?? (darkValue !== void 0 ? theme.colors.text : void 0);
+    if (lightValue === void 0) continue;
+    vars[`--ara-blog-color-${kebab(key)}`] = darkValue ? `light-dark(${lightValue}, ${darkValue})` : lightValue;
+  }
+  if (hasDark) vars.colorScheme = "light dark";
+  for (const [key, value] of Object.entries(theme.typography)) {
+    emitResponsiveVar(vars, `--ara-blog-type-${kebab(key)}`, value);
+  }
+  for (const [key, value] of Object.entries(theme.spacing)) {
+    emitResponsiveVar(vars, `--ara-blog-space-${kebab(key)}`, value);
+  }
+  emitResponsiveVar(vars, "--ara-blog-radius", theme.radius);
+  return vars;
+}
+
+// ../tracking-core/src/resources/blog/schema.ts
+var schemaVersionSchema = import_zod2.z.literal(1);
+var blogHeroImageSchema = import_zod2.z.object({
+  url: import_zod2.z.string(),
+  alt: import_zod2.z.string().catch(""),
+  width: import_zod2.z.number().int(),
+  height: import_zod2.z.number().int()
+});
+var blogManifestEntrySchema = import_zod2.z.object({
+  slug: import_zod2.z.string(),
+  title: import_zod2.z.string(),
+  description: import_zod2.z.string().catch(""),
+  content_hash: import_zod2.z.string(),
+  content_key: import_zod2.z.string(),
+  published_at: import_zod2.z.string(),
+  updated_at: import_zod2.z.string(),
+  // Estimated read time in whole minutes (computed at publish from the post
+  // body). 0 when unknown; index cards render "N min read".
+  reading_minutes: import_zod2.z.number().int().catch(0),
+  // A malformed tags array / hero_image degrades gracefully instead of
+  // dropping the whole entry.
+  tags: import_zod2.z.array(import_zod2.z.string()).catch([]),
+  hero_image: blogHeroImageSchema.nullable().catch(null)
+});
+var blogManifestWireSchema = import_zod2.z.object({
+  schema_version: schemaVersionSchema,
+  namespace: import_zod2.z.string(),
+  generated_at: import_zod2.z.string(),
+  posts: import_zod2.z.array(blogManifestEntrySchema).catch([])
+});
+var blogManifestSchema = blogManifestWireSchema.extend({
+  // A single malformed entry is dropped; the rest of the manifest survives.
+  posts: import_zod2.z.array(blogManifestEntrySchema.nullable().catch(null)).transform((entries) => entries.filter((e) => e !== null)).catch([])
+});
+var blogImageSchema = import_zod2.z.object({
+  id: import_zod2.z.string(),
+  url: import_zod2.z.string(),
+  alt: import_zod2.z.string().catch(""),
+  caption: import_zod2.z.string().nullable().catch(null),
+  role: import_zod2.z.enum(["hero", "inline"]).catch("inline"),
+  width: import_zod2.z.number().int(),
+  height: import_zod2.z.number().int(),
+  mime: import_zod2.z.string().catch("")
+});
+var blogSeoSchema = import_zod2.z.object({
+  meta_title: import_zod2.z.string().catch(""),
+  meta_description: import_zod2.z.string().catch(""),
+  canonical_path: import_zod2.z.string().catch(""),
+  og_image: import_zod2.z.string().nullable().catch(null)
+});
+var blogPostContentWireSchema = import_zod2.z.object({
+  schema_version: schemaVersionSchema,
+  slug: import_zod2.z.string(),
+  title: import_zod2.z.string(),
+  description: import_zod2.z.string().catch(""),
+  mdx: import_zod2.z.string(),
+  images: import_zod2.z.array(blogImageSchema).catch([]),
+  // Already schema-validated at publish time, but re-sanitized on read (and
+  // again before rendering) — the override schema itself drops invalid values.
+  // Nullish: the backend serializes an unset override as an explicit `null`
+  // (Pydantic `model_dump()`); it folds into `undefined` for TS consumers.
+  theme_overrides: nullishField(blogThemeOverrideSchema).catch(void 0),
+  seo: blogSeoSchema.catch({
+    meta_title: "",
+    meta_description: "",
+    canonical_path: "",
+    og_image: null
+  }),
+  jsonld: import_zod2.z.record(import_zod2.z.unknown()).catch({}),
+  published_at: import_zod2.z.string(),
+  // The applied_at of the version this content was published from; `null`
+  // when the backend has no separate modified date. Nullish on the wire
+  // (Pydantic `model_dump()` emits explicit `null`s), folded to `null` for a
+  // single TS sentinel; a malformed value degrades to `null` instead of
+  // dropping the post.
+  updated_at: import_zod2.z.string().nullish().transform((v) => v ?? null).catch(null),
+  version_number: import_zod2.z.number().int().catch(0),
+  content_hash: import_zod2.z.string()
+});
+var blogPostContentSchema = blogPostContentWireSchema.extend({
+  // A single malformed image record is dropped; the post survives.
+  images: import_zod2.z.array(blogImageSchema.nullable().catch(null)).transform((images) => images.filter((i) => i !== null)).catch([])
+});
+function parseBlogManifest(raw) {
+  const parsed = blogManifestSchema.safeParse(raw);
+  return parsed.success ? parsed.data : null;
+}
+function parseBlogPostContent(raw) {
+  const parsed = blogPostContentSchema.safeParse(raw);
+  return parsed.success ? parsed.data : null;
+}
+
+// ../tracking-core/src/resources/blog/client.ts
+function createBlogClient(config) {
+  const base = config.cdnBaseUrl.replace(/\/+$/, "");
+  const doFetch = (...args) => (config.fetchImpl ?? fetch)(...args);
+  async function fetchJson(url, init) {
+    try {
+      const response = await doFetch(url, init);
+      if (!response.ok) return null;
+      return await response.json();
+    } catch {
+      return null;
+    }
+  }
+  async function getManifest() {
+    const init = {
+      next: { revalidate: config.manifestRevalidateSeconds ?? 300 }
+    };
+    const raw = await fetchJson(`${base}/blogs/v1/${config.namespace}/manifest.json`, init);
+    return raw === null ? null : parseBlogManifest(raw);
+  }
+  async function listPosts() {
+    const manifest = await getManifest();
+    if (!manifest) return [];
+    return [...manifest.posts].sort((a, b) => b.published_at.localeCompare(a.published_at));
+  }
+  async function getPost(slug) {
+    const manifest = await getManifest();
+    const entry = manifest?.posts.find((post) => post.slug === slug);
+    if (!entry) return null;
+    const init = { cache: "force-cache" };
+    const raw = await fetchJson(`${base}/${entry.content_key.replace(/^\/+/, "")}`, init);
+    return raw === null ? null : parseBlogPostContent(raw);
+  }
+  async function getStaticParams() {
+    const posts = await listPosts();
+    return posts.map((post) => ({ slug: post.slug }));
+  }
+  return { getManifest, listPosts, getPost, getStaticParams };
+}
+
+// ../tracking-core/src/resources/blog/presets.ts
+var BLOG_THEME_PRESETS = {
+  /** Serif display headings over a humanist sans body — long-form magazine feel. */
+  editorial: {
+    typography: {
+      heading_family: "'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif",
+      body_family: "'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+      heading_weight: 600,
+      body_weight: 400,
+      h1_size: { base: "2rem", md: "2.5rem" },
+      h2_size: { base: "1.5rem", md: "1.875rem" },
+      h3_size: "1.3rem",
+      h4_size: "1.125rem",
+      body_size: "1.0625rem",
+      body_line_height: "1.75",
+      heading_letter_spacing: "-0.015em"
+    },
+    spacing: {
+      block_gap: "1.35rem",
+      section_gap: "3.25rem"
+    },
+    radius: "6px"
+  },
+  /** Geometric sans pairing (Inter-first) — tight, contemporary product voice. */
+  modern: {
+    typography: {
+      heading_family: "'Inter', 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+      body_family: "'Inter', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif",
+      heading_weight: 700,
+      body_weight: 400,
+      h1_size: { base: "2.1rem", md: "2.75rem" },
+      h2_size: { base: "1.5rem", md: "1.75rem" },
+      h3_size: "1.25rem",
+      h4_size: "1.125rem",
+      body_size: "1rem",
+      body_line_height: "1.7",
+      heading_letter_spacing: "-0.03em"
+    },
+    spacing: {
+      block_gap: "1.25rem",
+      section_gap: "3rem"
+    },
+    radius: "12px"
+  },
+  /** Rounded-friendly pairing with a softer scale — approachable, human tone. */
+  warm: {
+    typography: {
+      heading_family: "'Nunito', 'Avenir Next', 'Trebuchet MS', Verdana, sans-serif",
+      body_family: "'Nunito Sans', 'Avenir Next', 'Trebuchet MS', Verdana, sans-serif",
+      heading_weight: 700,
+      body_weight: 400,
+      h1_size: { base: "1.9rem", md: "2.35rem" },
+      h2_size: { base: "1.45rem", md: "1.7rem" },
+      h3_size: "1.25rem",
+      h4_size: "1.125rem",
+      body_size: "1.0625rem",
+      body_line_height: "1.75",
+      heading_letter_spacing: "-0.01em"
+    },
+    spacing: {
+      block_gap: "1.35rem",
+      section_gap: "3.25rem"
+    },
+    radius: "16px"
+  },
+  /** Workmanlike sans with a prominent code surface — docs/engineering feel. */
+  technical: {
+    colors: {
+      // The one preset that ships a color: a cool code surface is part of the
+      // "technical" identity. Everything else stays on the site palette.
+      code_background: "#eef1f5"
+    },
+    colors_dark: {
+      code_background: "#1b1f27"
+    },
+    typography: {
+      heading_family: "'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+      body_family: "'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif",
+      heading_weight: 600,
+      body_weight: 400,
+      h1_size: { base: "1.85rem", md: "2.25rem" },
+      h2_size: { base: "1.45rem", md: "1.65rem" },
+      h3_size: "1.2rem",
+      h4_size: "1.0625rem",
+      body_size: "1rem",
+      body_line_height: "1.65",
+      heading_letter_spacing: "-0.01em"
+    },
+    spacing: {
+      block_gap: "1.15rem",
+      section_gap: "2.75rem"
+    },
+    radius: "6px"
+  }
+};
+function prependFamily(front, stack) {
+  if (!front) return stack;
+  return stack ? `${front}, ${stack}` : front;
+}
+function createBlogFontTheme(preset, fonts) {
+  const heading_family = prependFamily(fonts.heading, preset.typography?.heading_family);
+  const body_family = prependFamily(fonts.body, preset.typography?.body_family);
+  return {
+    ...preset,
+    typography: {
+      ...preset.typography,
+      ...heading_family !== void 0 ? { heading_family } : {},
+      ...body_family !== void 0 ? { body_family } : {}
+    }
+  };
+}
+
+// ../tracking-core/src/resources/blog/view/class-names.ts
+function joinClassNames(base, extra) {
+  return extra ? `${base} ${extra}` : base;
+}
+
+// ../tracking-core/src/resources/blog/seo.ts
+function joinUrl(base, ...paths) {
+  let out = base.replace(/\/+$/, "");
+  for (const path of paths) {
+    const segment = path?.replace(/^\/+/, "").replace(/\/+$/, "");
+    if (segment) out += `/${segment}`;
+  }
+  return out;
+}
+function canonicalUrl(post, opts) {
+  return joinUrl(opts.siteUrl, opts.basePath ?? "/blog", post.slug);
+}
+function ogImages(post) {
+  if (post.seo.og_image) return [{ url: post.seo.og_image }];
+  const hero = post.images.find((image) => image.role === "hero");
+  if (!hero) return void 0;
+  return [{ url: hero.url, width: hero.width, height: hero.height, alt: hero.alt }];
+}
+function buildBlogPostMetadata(post, opts) {
+  const url = canonicalUrl(post, opts);
+  const title = post.seo.meta_title || post.title;
+  const description = post.seo.meta_description || post.description;
+  const images = ogImages(post);
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      url,
+      ...images ? { images } : {},
+      ...post.published_at ? { publishedTime: post.published_at } : {}
+    }
+  };
+}
+function buildBlogPostingJsonLd(post, opts) {
+  const url = canonicalUrl(post, opts);
+  const images = post.images.map((image) => image.url);
+  const doc = {
+    headline: post.title,
+    description: post.seo.meta_description || post.description,
+    datePublished: post.published_at,
+    dateModified: post.updated_at ?? post.published_at,
+    ...images.length > 0 ? { image: images } : {},
+    ...opts.publisherName ? { publisher: { "@type": "Organization", name: opts.publisherName } } : {}
+  };
+  const backend = post.jsonld;
+  const merged = backend && typeof backend === "object" && Object.keys(backend).length > 0 ? { ...doc, ...backend } : doc;
+  return {
+    ...merged,
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    url,
+    mainEntityOfPage: { "@type": "WebPage", "@id": url }
+  };
+}
+var FAQ_ITEM_RE = /<FaqItem\s+question=(?:"([^"]*)"|'([^']*)')\s*>([\s\S]*?)<\/FaqItem>/g;
+var CODE_FENCE_RE = /^ {0,3}(`{3,}|~{3,})[^\n]*\n[\s\S]*?(?:^ {0,3}\1`* *$|(?![\s\S]))/gm;
+var ANSWER_TAG_RE = /<[^>]*>/g;
+function extractFaqPairs(mdx) {
+  const withoutCode = mdx.replaceAll(CODE_FENCE_RE, "");
+  const pairs = [];
+  for (const match of withoutCode.matchAll(FAQ_ITEM_RE)) {
+    const question = (match[1] ?? match[2] ?? "").trim();
+    const answer = match[3].replaceAll(ANSWER_TAG_RE, " ").replaceAll(/\s+/g, " ").trim();
+    if (question && answer) pairs.push({ question, answer });
+  }
+  return pairs;
+}
+function buildFaqJsonLd(pairs) {
+  if (pairs.length === 0) return null;
+  return {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: pairs.map((pair) => ({
+      "@type": "Question",
+      name: pair.question,
+      acceptedAnswer: { "@type": "Answer", text: pair.answer }
+    }))
+  };
+}
+var JSONLD_ESCAPES = {
+  "<": "\\u003c",
+  ">": "\\u003e",
+  "&": "\\u0026",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029"
+};
+function serializeJsonLd(data) {
+  return JSON.stringify(data).replaceAll(/[<>&\u2028\u2029]/g, (ch) => JSONLD_ESCAPES[ch] ?? ch);
+}
+function buildBlogSitemapEntries(posts, opts) {
+  return posts.map((post) => ({
+    url: joinUrl(opts.siteUrl, opts.basePath ?? "/blog", post.slug),
+    lastModified: post.updated_at
+  }));
+}
+
+// ../tracking-core/src/resources/blog/toc.ts
+var import_github_slugger = __toESM(require("github-slugger"));
+var import_remark_mdx = __toESM(require("remark-mdx"));
+var import_remark_parse = __toESM(require("remark-parse"));
+var import_unified = require("unified");
+var TEXT_LEAF_TYPES = /* @__PURE__ */ new Set(["text", "inlineCode"]);
+function headingText(node) {
+  let text = "";
+  const stack = [];
+  const roots = node.children ?? [];
+  for (let i = roots.length - 1; i >= 0; i--) {
+    stack.push(roots[i]);
+  }
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (!current) break;
+    if (TEXT_LEAF_TYPES.has(current.type) && typeof current.value === "string") {
+      text += current.value;
+    }
+    if (Array.isArray(current.children)) {
+      for (let i = current.children.length - 1; i >= 0; i--) {
+        stack.push(current.children[i]);
+      }
+    }
+  }
+  return text;
+}
+function extractBlogHeadings(mdx) {
+  let tree;
+  try {
+    tree = (0, import_unified.unified)().use(import_remark_parse.default).use(import_remark_mdx.default).parse(mdx);
+  } catch {
+    return [];
+  }
+  const slugger = new import_github_slugger.default();
+  const headings = [];
+  const stack = [tree];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (!node) break;
+    if (node.type === "heading" && typeof node.depth === "number") {
+      const text = headingText(node);
+      const id = slugger.slug(text);
+      if (node.depth === 2 || node.depth === 3) {
+        headings.push({ depth: node.depth, text, id });
+      }
+    }
+    if (Array.isArray(node.children)) {
+      for (let i = node.children.length - 1; i >= 0; i--) {
+        stack.push(node.children[i]);
+      }
+    }
+  }
+  return headings;
+}
+var WORDS_PER_MINUTE = 220;
+var MDX_SYNTAX_RE = /<[^>]*>|```[^`]*```|`|^[#>\-*+\s]+|\]\([^)]*\)|[[\]!]/gm;
+function estimateReadingTime(mdx) {
+  const words = mdx.replaceAll(MDX_SYNTAX_RE, " ").split(/\s+/).filter((w) => w.length > 0).length;
+  return Math.max(1, Math.round(words / WORDS_PER_MINUTE));
+}
+
+// ../tracking-core/src/resources/blog/validate-mdx.ts
+var import_remark_mdx2 = __toESM(require("remark-mdx"));
+var import_remark_parse2 = __toESM(require("remark-parse"));
+var import_unified2 = require("unified");
+var BLOG_MDX_MAX_SIZE = 5e5;
+var BLOG_MDX_MAX_DEPTH = 64;
+var BLOG_MDX_MAX_NODES = 1e5;
+var MAX_VIOLATIONS = 50;
+var BLOG_MDX_COMPONENT_GRAMMAR = [
+  {
+    name: "Callout",
+    attrs: [],
+    urlAttrs: [],
+    selfClosing: false,
+    cssClass: "aranova-blog-callout",
+    promptUsage: "<Callout>...</Callout>",
+    promptDescription: "a highlighted tip/note block; no attributes."
+  },
+  {
+    name: "Cta",
+    attrs: ["href", "label"],
+    urlAttrs: ["href"],
+    selfClosing: true,
+    cssClass: "aranova-blog-cta",
+    promptUsage: '<Cta href="..." label="..." />',
+    promptDescription: "a call-to-action button (self-closing)."
+  },
+  {
+    name: "BlogImage",
+    attrs: ["id"],
+    urlAttrs: [],
+    selfClosing: true,
+    promptUsage: '<BlogImage id="..." />',
+    promptDescription: "a generated image placeholder (self-closing). The `id` references an image brief id from the plan; the renderer resolves it."
+  },
+  {
+    name: "FaqItem",
+    attrs: ["question"],
+    urlAttrs: [],
+    selfClosing: false,
+    cssClass: "aranova-blog-faq-item",
+    promptUsage: '<FaqItem question="...">...</FaqItem>',
+    promptDescription: "one FAQ entry: the required `question` attribute carries the question, the children are the prose answer. Group consecutive `<FaqItem>`s under an FAQ heading near the end of the post when the topic suits a Q&A section."
+  },
+  {
+    name: "KeyTakeaways",
+    attrs: [],
+    urlAttrs: [],
+    selfClosing: false,
+    cssClass: "aranova-blog-key-takeaways",
+    promptUsage: "<KeyTakeaways>...</KeyTakeaways>",
+    promptDescription: "a TL;DR box containing a standard markdown bullet list of 3-5 takeaways; place it right after the H1 (and hero image)."
+  }
+];
+var BLOG_MDX_ALLOWED_COMPONENTS = BLOG_MDX_COMPONENT_GRAMMAR.map((entry) => entry.name);
+var ALLOWED_NODE_TYPES = /* @__PURE__ */ new Set([
+  "root",
+  "heading",
+  "paragraph",
+  "text",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "image",
+  "linkReference",
+  "imageReference",
+  "definition",
+  "list",
+  "listItem",
+  "blockquote",
+  "code",
+  "inlineCode",
+  "table",
+  "tableRow",
+  "tableCell",
+  "thematicBreak",
+  "break"
+]);
+var FORBIDDEN_NODE_TYPES = {
+  html: { rule: "raw-html", message: "Raw HTML is not allowed" },
+  mdxjsEsm: { rule: "esm", message: "import/export statements are not allowed" },
+  mdxFlowExpression: { rule: "expression", message: "JSX expressions ({\u2026}) are not allowed" },
+  mdxTextExpression: { rule: "expression", message: "JSX expressions ({\u2026}) are not allowed" }
+};
+var COMPONENT_SPECS = Object.fromEntries(
+  BLOG_MDX_COMPONENT_GRAMMAR.map((entry) => [
+    entry.name,
+    { attrs: entry.attrs, urlAttrs: entry.urlAttrs, allowChildren: !entry.selfClosing }
+  ])
+);
+var URL_SCHEME_RE = /^([A-Za-z][A-Za-z0-9+.-]*):/;
+var ALLOWED_URL_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto"]);
+function forbiddenUrlScheme(rawUrl) {
+  const cleaned = rawUrl.replaceAll(/[\u0000-\u0020\u007F]/g, "");
+  const match = URL_SCHEME_RE.exec(cleaned);
+  if (!match) return null;
+  const scheme = match[1].toLowerCase();
+  return ALLOWED_URL_SCHEMES.has(scheme) ? null : scheme;
+}
+function nodeLine(node) {
+  return node.position?.start?.line;
+}
+function checkComponent(node, violations) {
+  const line = nodeLine(node);
+  const name = node.name;
+  if (!name) {
+    violations.push({
+      rule: "unknown-component",
+      message: "JSX fragments (<>\u2026</>) are not allowed",
+      line
+    });
+    return;
+  }
+  const spec = COMPONENT_SPECS[name];
+  if (!spec) {
+    violations.push({
+      rule: "unknown-component",
+      message: `<${name}> is not an allowed element (allowed: ${BLOG_MDX_ALLOWED_COMPONENTS.join(", ")})`,
+      line
+    });
+    return;
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const attr of node.attributes ?? []) {
+    if (attr.type !== "mdxJsxAttribute" || typeof attr.name !== "string") {
+      violations.push({
+        rule: "component-attribute",
+        message: `<${name}> has a non-literal attribute`,
+        line
+      });
+      continue;
+    }
+    if (!spec.attrs.includes(attr.name)) {
+      violations.push({
+        rule: "component-attribute",
+        message: `<${name}> does not accept attribute "${attr.name}"`,
+        line
+      });
+      continue;
+    }
+    if (typeof attr.value !== "string") {
+      violations.push({
+        rule: "component-attribute",
+        message: `<${name} ${attr.name}> must be a quoted string literal`,
+        line
+      });
+      continue;
+    }
+    seen.add(attr.name);
+    if (spec.urlAttrs.includes(attr.name)) {
+      const scheme = forbiddenUrlScheme(attr.value);
+      if (scheme !== null) {
+        violations.push({
+          rule: "url-scheme",
+          message: `<${name} ${attr.name}> uses forbidden URL scheme "${scheme}:"`,
+          line
+        });
+      }
+    }
+  }
+  for (const required of spec.attrs) {
+    if (!seen.has(required)) {
+      violations.push({
+        rule: "component-attribute",
+        message: `<${name}> requires attribute "${required}"`,
+        line
+      });
+    }
+  }
+  if (!spec.allowChildren && (node.children?.length ?? 0) > 0) {
+    violations.push({
+      rule: "component-attribute",
+      message: `<${name}> must be self-closing (no children)`,
+      line
+    });
+  }
+}
+function validateBlogMdx(mdx, options) {
+  const violations = [];
+  if (typeof mdx !== "string" || mdx.length > BLOG_MDX_MAX_SIZE) {
+    return {
+      ok: false,
+      violations: [
+        {
+          rule: "size-limit",
+          message: `Document exceeds the ${BLOG_MDX_MAX_SIZE}-character limit`
+        }
+      ]
+    };
+  }
+  let tree;
+  try {
+    tree = (0, import_unified2.unified)().use(import_remark_parse2.default).use(import_remark_mdx2.default).parse(mdx);
+  } catch (error) {
+    const line = error.line;
+    return {
+      ok: false,
+      violations: [
+        {
+          rule: "parse-error",
+          message: "Document is not valid MDX",
+          ...typeof line === "number" ? { line } : {}
+        }
+      ]
+    };
+  }
+  if (options?.requireLeadingH1) {
+    const firstChild = tree.children?.[0];
+    if (!firstChild || firstChild.type !== "heading" || firstChild.depth !== 1) {
+      violations.push({
+        rule: "leading-h1",
+        message: "Document must start with the H1 title (`# ...`) \u2014 no frontmatter or metadata block before it",
+        line: nodeLine(firstChild ?? tree)
+      });
+    }
+  }
+  let nodeCount = 0;
+  const stack = [{ node: tree, depth: 0 }];
+  while (stack.length > 0 && violations.length < MAX_VIOLATIONS) {
+    const item = stack.pop();
+    if (!item) break;
+    const { node, depth } = item;
+    nodeCount += 1;
+    if (nodeCount > BLOG_MDX_MAX_NODES) {
+      violations.push({ rule: "size-limit", message: "Document has too many nodes" });
+      break;
+    }
+    if (depth > BLOG_MDX_MAX_DEPTH) {
+      violations.push({ rule: "depth-limit", message: "Document nests too deeply" });
+      break;
+    }
+    const forbidden = FORBIDDEN_NODE_TYPES[node.type];
+    if (forbidden) {
+      violations.push({ ...forbidden, line: nodeLine(node) });
+      continue;
+    }
+    if (node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement") {
+      checkComponent(node, violations);
+    } else if (!ALLOWED_NODE_TYPES.has(node.type)) {
+      violations.push({
+        rule: "disallowed-node",
+        message: `Markdown construct "${node.type}" is not allowed`,
+        line: nodeLine(node)
+      });
+      continue;
+    }
+    if ((node.type === "link" || node.type === "image" || node.type === "definition") && typeof node.url === "string") {
+      const scheme = forbiddenUrlScheme(node.url);
+      if (scheme !== null) {
+        violations.push({
+          rule: "url-scheme",
+          message: `${node.type} uses forbidden URL scheme "${scheme}:"`,
+          line: nodeLine(node)
+        });
+      }
+    }
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        stack.push({ node: child, depth: depth + 1 });
+      }
+    }
+  }
+  return violations.length === 0 ? { ok: true } : { ok: false, violations };
+}
+
+// ../tracking-core/src/resources/blog/view/blog-post-view.tsx
+var import_rsc = require("next-mdx-remote/rsc");
+var import_rehype_slug = __toESM(require("rehype-slug"));
+
+// ../tracking-core/src/resources/blog/view/components.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function createDefaultComponents(images, classNames) {
+  const imagesById = new Map(images.map((image) => [image.id, image]));
+  return {
+    // `children` is destructured explicitly so static a11y analysis
+    // (heading-has-content, anchor-has-content) can see the content flow.
+    h1: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { ...props, children }),
+    h2: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { ...props, children }),
+    h3: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { ...props, children }),
+    h4: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { ...props, children }),
+    h5: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { ...props, children }),
+    h6: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { ...props, children }),
+    p: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props, children }),
+    a: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, children }),
+    img: ({ alt = "", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { loading: "lazy", alt, ...props }),
+    pre: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { ...props, children }),
+    code: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { ...props, children }),
+    blockquote: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { ...props, children }),
+    ul: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ...props, children }),
+    ol: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { ...props, children }),
+    li: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...props, children }),
+    // Wrapped so wide tables scroll horizontally inside the article instead of
+    // overflowing the host page (the wrapper also carries border + radius).
+    table: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: joinClassNames("aranova-blog-table-wrap", classNames?.tableWrap), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props, children }) }),
+    hr: (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { ...props }),
+    Callout: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: joinClassNames("aranova-blog-callout", classNames?.callout), children }),
+    Cta: ({ href, label }) => (
+      // `data-aranova-cta` opts this into the tracking SDK's cta_click
+      // auto-capture (default selector `[data-aranova-cta]`) with the label as
+      // the cta_name — zero site config. Inert if auto-capture is off.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          className: joinClassNames("aranova-blog-cta", classNames?.cta),
+          href,
+          "data-aranova-cta": label,
+          "data-aranova-section": "blog",
+          children: label
+        }
+      )
+    ),
+    BlogImage: ({ id }) => {
+      const image = imagesById.get(id);
+      if (!image) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: classNames?.figure, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: image.url,
+            alt: image.alt,
+            width: image.width,
+            height: image.height,
+            loading: "lazy"
+          }
+        ),
+        image.caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: image.caption }) : null
+      ] });
+    },
+    // Native disclosure accordion — no JS, server-renderable. The h3 inside
+    // <summary> is valid HTML and keeps the document outline / a11y heading.
+    FaqItem: ({ question, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: joinClassNames("aranova-blog-faq-item", classNames?.faqItem), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { className: joinClassNames("aranova-blog-faq-question", classNames?.faqQuestion), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: question }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: joinClassNames("aranova-blog-faq-answer", classNames?.faqAnswer), children })
+    ] }),
+    KeyTakeaways: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: joinClassNames("aranova-blog-key-takeaways", classNames?.keyTakeaways), children })
+  };
+}
+
+// ../tracking-core/src/resources/blog/view/styles.ts
+var BLOG_BASE_CSS = `/* Aranova blog post base stylesheet \u2014 authored source of truth.
+ *
+ * Scoped under \`.aranova-blog-post\` and driven entirely by the sanitized
+ * \`--ara-blog-*\` CSS custom properties emitted by \`blogThemeToCssVars\` on the
+ * article element. Host sites usually run Tailwind preflight, so:
+ *
+ *   - element rules use \`.aranova-blog-post :where(el)\` \u2014 one class of
+ *     specificity (0,1,0), enough to beat preflight's bare element resets
+ *     while every rule in this sheet stays flat and order-resolvable;
+ *   - component classes (\`.aranova-blog-callout\`, \u2026) keep their natural
+ *     class-on-class specificity.
+ *
+ * Responsive-capable tokens (h1/h2/h3/h4/body/small sizes, body line-height,
+ * content max-width, block gap, section gap, radius) are NEVER consumed via their raw
+ * \`--ara-blog-*\` vars here \u2014 the generated block below re-points internal
+ * \`--_*\` vars per breakpoint, and all rules consume those.
+ *
+ * Rhythm rules near the end target BOTH \`.aranova-blog-post\` (content is a
+ * direct child of the article today) and \`.aranova-blog-content\` (a later
+ * phase wraps content in that div) so that phase needs no CSS changes.
+ *
+ * No raw colors anywhere: every color flows through the theme vars, which
+ * already carry \`light-dark(...)\` values when a dark palette is present.
+ */
+
+/* Responsive token plumbing \u2014 GENERATED by build-styles.ts from theme.ts
+   (BLOG_BREAKPOINT_MIN_WIDTHS_PX + the responsive() token set). Mobile-first:
+   each breakpoint falls back through every narrower key down to the base var.
+   Authored rules consume ONLY the --_* internal vars for these tokens. */
+.aranova-blog-post {
+  --_h1-size: var(--ara-blog-type-h1-size);
+  --_h2-size: var(--ara-blog-type-h2-size);
+  --_h3-size: var(--ara-blog-type-h3-size);
+  --_h4-size: var(--ara-blog-type-h4-size);
+  --_body-size: var(--ara-blog-type-body-size);
+  --_body-line-height: var(--ara-blog-type-body-line-height);
+  --_small-size: var(--ara-blog-type-small-size);
+  --_content-max-width: var(--ara-blog-space-content-max-width);
+  --_block-gap: var(--ara-blog-space-block-gap);
+  --_section-gap: var(--ara-blog-space-section-gap);
+  --_radius: var(--ara-blog-radius);
+}
+@media (min-width: 640px) {
+  .aranova-blog-post {
+    --_h1-size: var(--ara-blog-type-h1-size-sm, var(--ara-blog-type-h1-size));
+    --_h2-size: var(--ara-blog-type-h2-size-sm, var(--ara-blog-type-h2-size));
+    --_h3-size: var(--ara-blog-type-h3-size-sm, var(--ara-blog-type-h3-size));
+    --_h4-size: var(--ara-blog-type-h4-size-sm, var(--ara-blog-type-h4-size));
+    --_body-size: var(--ara-blog-type-body-size-sm, var(--ara-blog-type-body-size));
+    --_body-line-height: var(--ara-blog-type-body-line-height-sm, var(--ara-blog-type-body-line-height));
+    --_small-size: var(--ara-blog-type-small-size-sm, var(--ara-blog-type-small-size));
+    --_content-max-width: var(--ara-blog-space-content-max-width-sm, var(--ara-blog-space-content-max-width));
+    --_block-gap: var(--ara-blog-space-block-gap-sm, var(--ara-blog-space-block-gap));
+    --_section-gap: var(--ara-blog-space-section-gap-sm, var(--ara-blog-space-section-gap));
+    --_radius: var(--ara-blog-radius-sm, var(--ara-blog-radius));
+  }
+}
+@media (min-width: 768px) {
+  .aranova-blog-post {
+    --_h1-size: var(--ara-blog-type-h1-size-md, var(--ara-blog-type-h1-size-sm, var(--ara-blog-type-h1-size)));
+    --_h2-size: var(--ara-blog-type-h2-size-md, var(--ara-blog-type-h2-size-sm, var(--ara-blog-type-h2-size)));
+    --_h3-size: var(--ara-blog-type-h3-size-md, var(--ara-blog-type-h3-size-sm, var(--ara-blog-type-h3-size)));
+    --_h4-size: var(--ara-blog-type-h4-size-md, var(--ara-blog-type-h4-size-sm, var(--ara-blog-type-h4-size)));
+    --_body-size: var(--ara-blog-type-body-size-md, var(--ara-blog-type-body-size-sm, var(--ara-blog-type-body-size)));
+    --_body-line-height: var(--ara-blog-type-body-line-height-md, var(--ara-blog-type-body-line-height-sm, var(--ara-blog-type-body-line-height)));
+    --_small-size: var(--ara-blog-type-small-size-md, var(--ara-blog-type-small-size-sm, var(--ara-blog-type-small-size)));
+    --_content-max-width: var(--ara-blog-space-content-max-width-md, var(--ara-blog-space-content-max-width-sm, var(--ara-blog-space-content-max-width)));
+    --_block-gap: var(--ara-blog-space-block-gap-md, var(--ara-blog-space-block-gap-sm, var(--ara-blog-space-block-gap)));
+    --_section-gap: var(--ara-blog-space-section-gap-md, var(--ara-blog-space-section-gap-sm, var(--ara-blog-space-section-gap)));
+    --_radius: var(--ara-blog-radius-md, var(--ara-blog-radius-sm, var(--ara-blog-radius)));
+  }
+}
+@media (min-width: 1024px) {
+  .aranova-blog-post {
+    --_h1-size: var(--ara-blog-type-h1-size-lg, var(--ara-blog-type-h1-size-md, var(--ara-blog-type-h1-size-sm, var(--ara-blog-type-h1-size))));
+    --_h2-size: var(--ara-blog-type-h2-size-lg, var(--ara-blog-type-h2-size-md, var(--ara-blog-type-h2-size-sm, var(--ara-blog-type-h2-size))));
+    --_h3-size: var(--ara-blog-type-h3-size-lg, var(--ara-blog-type-h3-size-md, var(--ara-blog-type-h3-size-sm, var(--ara-blog-type-h3-size))));
+    --_h4-size: var(--ara-blog-type-h4-size-lg, var(--ara-blog-type-h4-size-md, var(--ara-blog-type-h4-size-sm, var(--ara-blog-type-h4-size))));
+    --_body-size: var(--ara-blog-type-body-size-lg, var(--ara-blog-type-body-size-md, var(--ara-blog-type-body-size-sm, var(--ara-blog-type-body-size))));
+    --_body-line-height: var(--ara-blog-type-body-line-height-lg, var(--ara-blog-type-body-line-height-md, var(--ara-blog-type-body-line-height-sm, var(--ara-blog-type-body-line-height))));
+    --_small-size: var(--ara-blog-type-small-size-lg, var(--ara-blog-type-small-size-md, var(--ara-blog-type-small-size-sm, var(--ara-blog-type-small-size))));
+    --_content-max-width: var(--ara-blog-space-content-max-width-lg, var(--ara-blog-space-content-max-width-md, var(--ara-blog-space-content-max-width-sm, var(--ara-blog-space-content-max-width))));
+    --_block-gap: var(--ara-blog-space-block-gap-lg, var(--ara-blog-space-block-gap-md, var(--ara-blog-space-block-gap-sm, var(--ara-blog-space-block-gap))));
+    --_section-gap: var(--ara-blog-space-section-gap-lg, var(--ara-blog-space-section-gap-md, var(--ara-blog-space-section-gap-sm, var(--ara-blog-space-section-gap))));
+    --_radius: var(--ara-blog-radius-lg, var(--ara-blog-radius-md, var(--ara-blog-radius-sm, var(--ara-blog-radius))));
+  }
+}
+@media (min-width: 1280px) {
+  .aranova-blog-post {
+    --_h1-size: var(--ara-blog-type-h1-size-xl, var(--ara-blog-type-h1-size-lg, var(--ara-blog-type-h1-size-md, var(--ara-blog-type-h1-size-sm, var(--ara-blog-type-h1-size)))));
+    --_h2-size: var(--ara-blog-type-h2-size-xl, var(--ara-blog-type-h2-size-lg, var(--ara-blog-type-h2-size-md, var(--ara-blog-type-h2-size-sm, var(--ara-blog-type-h2-size)))));
+    --_h3-size: var(--ara-blog-type-h3-size-xl, var(--ara-blog-type-h3-size-lg, var(--ara-blog-type-h3-size-md, var(--ara-blog-type-h3-size-sm, var(--ara-blog-type-h3-size)))));
+    --_h4-size: var(--ara-blog-type-h4-size-xl, var(--ara-blog-type-h4-size-lg, var(--ara-blog-type-h4-size-md, var(--ara-blog-type-h4-size-sm, var(--ara-blog-type-h4-size)))));
+    --_body-size: var(--ara-blog-type-body-size-xl, var(--ara-blog-type-body-size-lg, var(--ara-blog-type-body-size-md, var(--ara-blog-type-body-size-sm, var(--ara-blog-type-body-size)))));
+    --_body-line-height: var(--ara-blog-type-body-line-height-xl, var(--ara-blog-type-body-line-height-lg, var(--ara-blog-type-body-line-height-md, var(--ara-blog-type-body-line-height-sm, var(--ara-blog-type-body-line-height)))));
+    --_small-size: var(--ara-blog-type-small-size-xl, var(--ara-blog-type-small-size-lg, var(--ara-blog-type-small-size-md, var(--ara-blog-type-small-size-sm, var(--ara-blog-type-small-size)))));
+    --_content-max-width: var(--ara-blog-space-content-max-width-xl, var(--ara-blog-space-content-max-width-lg, var(--ara-blog-space-content-max-width-md, var(--ara-blog-space-content-max-width-sm, var(--ara-blog-space-content-max-width)))));
+    --_block-gap: var(--ara-blog-space-block-gap-xl, var(--ara-blog-space-block-gap-lg, var(--ara-blog-space-block-gap-md, var(--ara-blog-space-block-gap-sm, var(--ara-blog-space-block-gap)))));
+    --_section-gap: var(--ara-blog-space-section-gap-xl, var(--ara-blog-space-section-gap-lg, var(--ara-blog-space-section-gap-md, var(--ara-blog-space-section-gap-sm, var(--ara-blog-space-section-gap)))));
+    --_radius: var(--ara-blog-radius-xl, var(--ara-blog-radius-lg, var(--ara-blog-radius-md, var(--ara-blog-radius-sm, var(--ara-blog-radius)))));
+  }
+}
+@media (min-width: 1536px) {
+  .aranova-blog-post {
+    --_h1-size: var(--ara-blog-type-h1-size-2xl, var(--ara-blog-type-h1-size-xl, var(--ara-blog-type-h1-size-lg, var(--ara-blog-type-h1-size-md, var(--ara-blog-type-h1-size-sm, var(--ara-blog-type-h1-size))))));
+    --_h2-size: var(--ara-blog-type-h2-size-2xl, var(--ara-blog-type-h2-size-xl, var(--ara-blog-type-h2-size-lg, var(--ara-blog-type-h2-size-md, var(--ara-blog-type-h2-size-sm, var(--ara-blog-type-h2-size))))));
+    --_h3-size: var(--ara-blog-type-h3-size-2xl, var(--ara-blog-type-h3-size-xl, var(--ara-blog-type-h3-size-lg, var(--ara-blog-type-h3-size-md, var(--ara-blog-type-h3-size-sm, var(--ara-blog-type-h3-size))))));
+    --_h4-size: var(--ara-blog-type-h4-size-2xl, var(--ara-blog-type-h4-size-xl, var(--ara-blog-type-h4-size-lg, var(--ara-blog-type-h4-size-md, var(--ara-blog-type-h4-size-sm, var(--ara-blog-type-h4-size))))));
+    --_body-size: var(--ara-blog-type-body-size-2xl, var(--ara-blog-type-body-size-xl, var(--ara-blog-type-body-size-lg, var(--ara-blog-type-body-size-md, var(--ara-blog-type-body-size-sm, var(--ara-blog-type-body-size))))));
+    --_body-line-height: var(--ara-blog-type-body-line-height-2xl, var(--ara-blog-type-body-line-height-xl, var(--ara-blog-type-body-line-height-lg, var(--ara-blog-type-body-line-height-md, var(--ara-blog-type-body-line-height-sm, var(--ara-blog-type-body-line-height))))));
+    --_small-size: var(--ara-blog-type-small-size-2xl, var(--ara-blog-type-small-size-xl, var(--ara-blog-type-small-size-lg, var(--ara-blog-type-small-size-md, var(--ara-blog-type-small-size-sm, var(--ara-blog-type-small-size))))));
+    --_content-max-width: var(--ara-blog-space-content-max-width-2xl, var(--ara-blog-space-content-max-width-xl, var(--ara-blog-space-content-max-width-lg, var(--ara-blog-space-content-max-width-md, var(--ara-blog-space-content-max-width-sm, var(--ara-blog-space-content-max-width))))));
+    --_block-gap: var(--ara-blog-space-block-gap-2xl, var(--ara-blog-space-block-gap-xl, var(--ara-blog-space-block-gap-lg, var(--ara-blog-space-block-gap-md, var(--ara-blog-space-block-gap-sm, var(--ara-blog-space-block-gap))))));
+    --_section-gap: var(--ara-blog-space-section-gap-2xl, var(--ara-blog-space-section-gap-xl, var(--ara-blog-space-section-gap-lg, var(--ara-blog-space-section-gap-md, var(--ara-blog-space-section-gap-sm, var(--ara-blog-space-section-gap))))));
+    --_radius: var(--ara-blog-radius-2xl, var(--ara-blog-radius-xl, var(--ara-blog-radius-lg, var(--ara-blog-radius-md, var(--ara-blog-radius-sm, var(--ara-blog-radius))))));
+  }
+}
+@media (min-width: 1920px) {
+  .aranova-blog-post {
+    --_h1-size: var(--ara-blog-type-h1-size-3xl, var(--ara-blog-type-h1-size-2xl, var(--ara-blog-type-h1-size-xl, var(--ara-blog-type-h1-size-lg, var(--ara-blog-type-h1-size-md, var(--ara-blog-type-h1-size-sm, var(--ara-blog-type-h1-size)))))));
+    --_h2-size: var(--ara-blog-type-h2-size-3xl, var(--ara-blog-type-h2-size-2xl, var(--ara-blog-type-h2-size-xl, var(--ara-blog-type-h2-size-lg, var(--ara-blog-type-h2-size-md, var(--ara-blog-type-h2-size-sm, var(--ara-blog-type-h2-size)))))));
+    --_h3-size: var(--ara-blog-type-h3-size-3xl, var(--ara-blog-type-h3-size-2xl, var(--ara-blog-type-h3-size-xl, var(--ara-blog-type-h3-size-lg, var(--ara-blog-type-h3-size-md, var(--ara-blog-type-h3-size-sm, var(--ara-blog-type-h3-size)))))));
+    --_h4-size: var(--ara-blog-type-h4-size-3xl, var(--ara-blog-type-h4-size-2xl, var(--ara-blog-type-h4-size-xl, var(--ara-blog-type-h4-size-lg, var(--ara-blog-type-h4-size-md, var(--ara-blog-type-h4-size-sm, var(--ara-blog-type-h4-size)))))));
+    --_body-size: var(--ara-blog-type-body-size-3xl, var(--ara-blog-type-body-size-2xl, var(--ara-blog-type-body-size-xl, var(--ara-blog-type-body-size-lg, var(--ara-blog-type-body-size-md, var(--ara-blog-type-body-size-sm, var(--ara-blog-type-body-size)))))));
+    --_body-line-height: var(--ara-blog-type-body-line-height-3xl, var(--ara-blog-type-body-line-height-2xl, var(--ara-blog-type-body-line-height-xl, var(--ara-blog-type-body-line-height-lg, var(--ara-blog-type-body-line-height-md, var(--ara-blog-type-body-line-height-sm, var(--ara-blog-type-body-line-height)))))));
+    --_small-size: var(--ara-blog-type-small-size-3xl, var(--ara-blog-type-small-size-2xl, var(--ara-blog-type-small-size-xl, var(--ara-blog-type-small-size-lg, var(--ara-blog-type-small-size-md, var(--ara-blog-type-small-size-sm, var(--ara-blog-type-small-size)))))));
+    --_content-max-width: var(--ara-blog-space-content-max-width-3xl, var(--ara-blog-space-content-max-width-2xl, var(--ara-blog-space-content-max-width-xl, var(--ara-blog-space-content-max-width-lg, var(--ara-blog-space-content-max-width-md, var(--ara-blog-space-content-max-width-sm, var(--ara-blog-space-content-max-width)))))));
+    --_block-gap: var(--ara-blog-space-block-gap-3xl, var(--ara-blog-space-block-gap-2xl, var(--ara-blog-space-block-gap-xl, var(--ara-blog-space-block-gap-lg, var(--ara-blog-space-block-gap-md, var(--ara-blog-space-block-gap-sm, var(--ara-blog-space-block-gap)))))));
+    --_section-gap: var(--ara-blog-space-section-gap-3xl, var(--ara-blog-space-section-gap-2xl, var(--ara-blog-space-section-gap-xl, var(--ara-blog-space-section-gap-lg, var(--ara-blog-space-section-gap-md, var(--ara-blog-space-section-gap-sm, var(--ara-blog-space-section-gap)))))));
+    --_radius: var(--ara-blog-radius-3xl, var(--ara-blog-radius-2xl, var(--ara-blog-radius-xl, var(--ara-blog-radius-lg, var(--ara-blog-radius-md, var(--ara-blog-radius-sm, var(--ara-blog-radius)))))));
+  }
+}
+
+.aranova-blog-post {
+  /* Internal spacing scale, derived from the responsive block gap. */
+  --_flow: var(--_block-gap);
+  --_flow-sm: calc(var(--_block-gap) * 0.5);
+  --_flow-lg: calc(var(--_block-gap) * 1.75);
+  --_flow-section: var(--_section-gap);
+  /* Optional heading color token \u2014 themes that don't set it fall back to text. */
+  --_heading-color: var(--ara-blog-color-heading, var(--ara-blog-color-text));
+
+  max-width: var(--_content-max-width);
+  margin-inline: auto;
+  background: var(--ara-blog-color-background);
+  color: var(--ara-blog-color-text);
+  font-family: var(--ara-blog-type-body-family);
+  font-weight: var(--ara-blog-type-body-weight);
+  font-size: var(--_body-size);
+  line-height: var(--_body-line-height);
+  overflow-wrap: break-word;
+}
+@media (max-width: 639.99px) {
+  .aranova-blog-post {
+    padding-inline: 1.25rem;
+  }
+}
+
+/* --- Headings ------------------------------------------------------------ */
+.aranova-blog-post :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--ara-blog-type-heading-family);
+  font-weight: var(--ara-blog-type-heading-weight);
+  line-height: 1.25;
+  margin-block: 0;
+  color: var(--_heading-color);
+  scroll-margin-top: 5rem;
+}
+.aranova-blog-post :where(h1, h2, h3) {
+  /* \`pretty\` fills each line greedily (only the LAST line is massaged to avoid
+   * an orphan word) \u2014 so a heading uses the full measure. \`balance\` was leaving
+   * short first lines. */
+  text-wrap: pretty;
+}
+.aranova-blog-post :where(h1) {
+  font-size: var(--_h1-size);
+  letter-spacing: var(--ara-blog-type-heading-letter-spacing);
+}
+.aranova-blog-post :where(h2) {
+  font-size: var(--_h2-size);
+  letter-spacing: var(--ara-blog-type-heading-letter-spacing);
+}
+.aranova-blog-post :where(h3) {
+  font-size: var(--_h3-size);
+  letter-spacing: calc(var(--ara-blog-type-heading-letter-spacing) * 0.5);
+}
+.aranova-blog-post :where(h4) {
+  font-size: var(--_h4-size);
+  font-weight: 600;
+  letter-spacing: calc(var(--ara-blog-type-heading-letter-spacing) * 0.5);
+}
+.aranova-blog-post :where(h5) {
+  font-size: var(--_body-size);
+  font-weight: 600;
+}
+.aranova-blog-post :where(h6) {
+  font-size: var(--_small-size);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ara-blog-color-text-muted);
+}
+
+/* --- Text ---------------------------------------------------------------- */
+.aranova-blog-post :where(p) {
+  margin-block: 0;
+}
+/* Lead paragraph: the one directly after the post title. */
+.aranova-blog-post :where(h1) + :where(p) {
+  font-size: 1.15em;
+  color: color-mix(in srgb, var(--ara-blog-color-text) 72%, var(--ara-blog-color-text-muted));
+}
+.aranova-blog-post :where(a) {
+  color: var(--ara-blog-color-link);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.aranova-blog-post :where(a):focus-visible {
+  outline: 2px solid var(--ara-blog-color-link);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* --- Lists ---------------------------------------------------------------- */
+.aranova-blog-post :where(ul, ol) {
+  margin-block: 0;
+  padding-inline-start: 1.5em;
+}
+.aranova-blog-post :where(ul) {
+  list-style-type: disc;
+}
+.aranova-blog-post :where(ul ul) {
+  list-style-type: circle;
+}
+.aranova-blog-post :where(ul ul ul) {
+  list-style-type: square;
+}
+.aranova-blog-post :where(ol) {
+  list-style-type: decimal;
+}
+.aranova-blog-post :where(ol ol) {
+  list-style-type: lower-alpha;
+}
+.aranova-blog-post :where(ul) > li::marker {
+  color: var(--ara-blog-color-text-muted);
+}
+.aranova-blog-post :where(ol) > li::marker {
+  font-weight: 600;
+  color: var(--_heading-color);
+}
+.aranova-blog-post :where(li + li) {
+  margin-block-start: 0.35em;
+}
+.aranova-blog-post :where(li > ul, li > ol) {
+  margin-block-start: 0.35em;
+}
+
+/* --- Blockquote ------------------------------------------------------------ */
+.aranova-blog-post :where(blockquote) {
+  margin: 0;
+  padding-block: 0.25em;
+  padding-inline: 1.25em 0.5em;
+  border-inline-start: 3px solid var(--ara-blog-color-primary);
+  color: var(--ara-blog-color-text-muted);
+  font-style: italic;
+}
+
+/* --- Code ------------------------------------------------------------------ */
+.aranova-blog-post :where(code) {
+  background: var(--ara-blog-color-code-background);
+  border-radius: calc(var(--_radius) / 2);
+  padding: 0.15em 0.35em;
+  font-size: 0.9em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.aranova-blog-post :where(pre) {
+  margin: 0;
+  background: var(--ara-blog-color-code-background);
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: var(--_radius);
+  padding: 1em;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+.aranova-blog-post :where(pre code) {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  font-size: var(--_small-size);
+}
+
+/* --- Media ------------------------------------------------------------------ */
+.aranova-blog-post :where(img) {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: var(--_radius);
+}
+.aranova-blog-post :where(figure) {
+  margin: 0;
+}
+.aranova-blog-post :where(figcaption) {
+  margin-block-start: 0.5em;
+  font-size: var(--_small-size);
+  color: var(--ara-blog-color-text-muted);
+  text-align: var(--ara-blog-type-caption-align, center);
+}
+
+/* --- Tables ------------------------------------------------------------------ */
+.aranova-blog-post .aranova-blog-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: var(--_radius);
+}
+.aranova-blog-post :where(table) {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--_small-size);
+}
+.aranova-blog-post :where(th, td) {
+  border: 0;
+  border-block-end: 1px solid var(--ara-blog-color-border);
+  padding: 0.6em 0.85em;
+  text-align: left;
+}
+.aranova-blog-post :where(th) {
+  background: var(--ara-blog-color-surface);
+  border-block-end: 2px solid var(--ara-blog-color-border);
+  font-weight: 600;
+}
+.aranova-blog-post :where(tbody tr:nth-child(even) td) {
+  background: color-mix(
+    in srgb,
+    var(--ara-blog-color-surface) 55%,
+    var(--ara-blog-color-background)
+  );
+}
+.aranova-blog-post :where(tbody tr:last-child) :where(th, td) {
+  border-block-end: 0;
+}
+
+/* --- Section break ------------------------------------------------------------ */
+.aranova-blog-post :where(hr) {
+  border: none;
+  border-top: 2px solid var(--ara-blog-color-border);
+  width: 4rem;
+  margin-inline: auto;
+}
+
+/* --- Callout ------------------------------------------------------------------ */
+.aranova-blog-post .aranova-blog-callout {
+  background: var(--ara-blog-color-surface);
+  border: 1px solid var(--ara-blog-color-border);
+  border-inline-start: 4px solid var(--ara-blog-color-primary);
+  border-radius: var(--_radius);
+  padding: 0.85em 1.1em;
+}
+.aranova-blog-post .aranova-blog-callout > * + * {
+  margin-block-start: var(--_flow-sm);
+}
+
+/* --- CTA ------------------------------------------------------------------ */
+.aranova-blog-post .aranova-blog-cta {
+  display: inline-block;
+  background: var(--ara-blog-color-primary);
+  color: var(--ara-blog-color-primary-foreground);
+  border-radius: var(--_radius);
+  padding: 0.6em 1.2em;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    filter 150ms ease,
+    transform 150ms ease;
+}
+.aranova-blog-post .aranova-blog-cta:hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+.aranova-blog-post .aranova-blog-cta:active {
+  filter: none;
+  transform: none;
+}
+.aranova-blog-post .aranova-blog-cta:focus-visible {
+  outline: 2px solid var(--ara-blog-color-primary);
+  outline-offset: 2px;
+}
+
+/* --- FAQ (details/summary accordion) ------------------------------------------ */
+.aranova-blog-post .aranova-blog-faq-item {
+  border-block-start: 1px solid var(--ara-blog-color-border);
+  padding-block: calc(var(--_flow) * 0.75);
+}
+.aranova-blog-post .aranova-blog-faq-question {
+  cursor: pointer;
+  list-style: none;
+  position: relative;
+  padding-inline-end: 1.75em;
+}
+.aranova-blog-post .aranova-blog-faq-question::-webkit-details-marker {
+  display: none;
+}
+/* Rotating chevron (border trick \u2014 colors via theme vars only). */
+.aranova-blog-post .aranova-blog-faq-question::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0.35em;
+  width: 0.45em;
+  height: 0.45em;
+  border-inline-end: 2px solid var(--ara-blog-color-text-muted);
+  border-block-end: 2px solid var(--ara-blog-color-text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  transition: transform 150ms ease;
+}
+.aranova-blog-post .aranova-blog-faq-item[open] > .aranova-blog-faq-question::after {
+  transform: translateY(-30%) rotate(225deg);
+}
+.aranova-blog-post .aranova-blog-faq-question:focus-visible {
+  outline: 2px solid var(--ara-blog-color-link);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.aranova-blog-post .aranova-blog-faq-answer {
+  padding-block-start: var(--_flow-sm);
+}
+.aranova-blog-post .aranova-blog-faq-answer > * + * {
+  margin-block-start: var(--_flow-sm);
+}
+/* Progressive open/close animation where the platform supports it. */
+@supports (interpolate-size: allow-keywords) {
+  .aranova-blog-post .aranova-blog-faq-item {
+    interpolate-size: allow-keywords;
+  }
+  .aranova-blog-post .aranova-blog-faq-item::details-content {
+    block-size: 0;
+    overflow-y: clip;
+    transition:
+      block-size 200ms ease,
+      content-visibility 200ms allow-discrete;
+  }
+  .aranova-blog-post .aranova-blog-faq-item[open]::details-content {
+    block-size: auto;
+  }
+}
+
+/* --- Key takeaways ------------------------------------------------------------ */
+.aranova-blog-post .aranova-blog-key-takeaways {
+  background: var(--ara-blog-color-surface);
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: var(--_radius);
+  padding: 1em 1.25em;
+}
+.aranova-blog-post .aranova-blog-key-takeaways :where(ul) {
+  margin-block: 0;
+}
+.aranova-blog-post .aranova-blog-key-takeaways :where(ul) > li::marker {
+  color: var(--ara-blog-color-primary);
+}
+
+/* --- Article layout (content column + optional aside rail) -----------------------
+ * \`.aranova-blog-layout\` is a plain block on narrow viewports (the aside, when
+ * present, stacks after the content). On wide viewports a grid opens ONLY when
+ * an aside exists, and the article widens by exactly the rail + gap so the
+ * content column keeps its \`content_max_width\`. */
+.aranova-blog-post .aranova-blog-layout {
+  /* Flex column (not block) so the aside can be VISUALLY hoisted above the
+   * content on narrow viewports while the content stays first in DOM
+   * (reading order / SEO). */
+  display: flex;
+  flex-direction: column;
+}
+.aranova-blog-post .aranova-blog-layout > .aranova-blog-aside {
+  order: -1;
+  margin-block-end: var(--_flow-lg);
+}
+@media (min-width: 1100px) {
+  .aranova-blog-post:has(.aranova-blog-aside) {
+    max-width: calc(var(--_content-max-width) + 240px + 3rem);
+  }
+  .aranova-blog-post .aranova-blog-layout:has(.aranova-blog-aside) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 240px;
+    column-gap: 3rem;
+    align-items: start;
+  }
+  .aranova-blog-post .aranova-blog-layout:has(.aranova-blog-aside) > .aranova-blog-aside {
+    /* Reset the mobile hoist: grid auto-placement honors \`order\`, so -1 would
+     * drop the aside into the FIRST column. */
+    order: 0;
+    margin-block-end: 0;
+    position: sticky;
+    top: 5rem;
+    align-self: start;
+    max-height: calc(100vh - 6rem);
+    overflow: auto;
+  }
+  /* Rail on the LEFT: flip the column order (content DOM stays first for
+   * reading order / SEO; only the visual columns swap). */
+  .aranova-blog-post .aranova-blog-layout[data-toc-side="left"]:has(.aranova-blog-aside) {
+    grid-template-columns: 240px minmax(0, 1fr);
+  }
+  /* Horizontal collapse, CLOSED: the rail column shrinks to the compact toggle
+   * (auto) and the article reflows into the reclaimed space. */
+  .aranova-blog-post
+    .aranova-blog-layout:has(
+      .aranova-blog-toc-panel[data-collapse="horizontal"]:not([data-open="true"])
+    ) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .aranova-blog-post
+    .aranova-blog-layout[data-toc-side="left"]:has(
+      .aranova-blog-toc-panel[data-collapse="horizontal"]:not([data-open="true"])
+    ) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  .aranova-blog-post
+    .aranova-blog-layout[data-toc-side="left"]:has(.aranova-blog-aside)
+    > .aranova-blog-content {
+    order: 2;
+  }
+  .aranova-blog-post
+    .aranova-blog-layout[data-toc-side="left"]:has(.aranova-blog-aside)
+    > .aranova-blog-aside {
+    order: 1;
+  }
+}
+
+/* --- Byline / meta row (chrome) --------------------------------------------------- */
+.aranova-blog-post .aranova-blog-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35em 0.5em;
+  font-size: var(--_small-size);
+  color: var(--ara-blog-color-text-muted);
+  padding-block-end: var(--_flow);
+  border-block-end: 1px solid var(--ara-blog-color-border);
+}
+.aranova-blog-post .aranova-blog-meta-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.5em;
+  white-space: nowrap;
+}
+.aranova-blog-post .aranova-blog-meta-tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35em;
+  margin-inline-start: auto;
+}
+.aranova-blog-post .aranova-blog-meta-tag {
+  background: var(--ara-blog-color-surface);
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: 999px;
+  padding: 0.1em 0.7em;
+  white-space: nowrap;
+}
+
+/* --- Breadcrumbs (chrome) ---------------------------------------------------------- */
+.aranova-blog-post .aranova-blog-breadcrumbs {
+  font-size: var(--_small-size);
+  color: var(--ara-blog-color-text-muted);
+}
+.aranova-blog-post .aranova-blog-breadcrumbs ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.2em 0.5em;
+}
+.aranova-blog-post .aranova-blog-breadcrumbs li {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.5em;
+}
+.aranova-blog-post .aranova-blog-breadcrumbs a {
+  color: var(--ara-blog-color-text-muted);
+  text-decoration: none;
+}
+.aranova-blog-post .aranova-blog-breadcrumbs a:hover {
+  color: var(--ara-blog-color-link);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.aranova-blog-post .aranova-blog-breadcrumbs [aria-current="page"] {
+  color: var(--ara-blog-color-text);
+}
+
+/* --- Table of contents (chrome) -----------------------------------------------------
+ * Zero-JS shell: a native details/summary disclosure. Chevron follows the FAQ
+ * accordion's border-trick pattern (theme vars only, no raw colors). */
+.aranova-blog-post .aranova-blog-toc {
+  font-size: var(--_small-size);
+  background: var(--ara-blog-color-surface);
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: var(--_radius);
+  padding: 0.85em 1.1em;
+}
+.aranova-blog-post .aranova-blog-toc-title {
+  cursor: pointer;
+  list-style: none;
+  position: relative;
+  padding-inline-end: 1.75em;
+  font-weight: 600;
+  color: var(--_heading-color);
+}
+.aranova-blog-post .aranova-blog-toc-title::-webkit-details-marker {
+  display: none;
+}
+.aranova-blog-post .aranova-blog-toc-title::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0.35em;
+  width: 0.45em;
+  height: 0.45em;
+  border-inline-end: 2px solid var(--ara-blog-color-text-muted);
+  border-block-end: 2px solid var(--ara-blog-color-text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  transition: transform 150ms ease;
+}
+.aranova-blog-post .aranova-blog-toc[open] > .aranova-blog-toc-title::after {
+  transform: translateY(-30%) rotate(225deg);
+}
+.aranova-blog-post .aranova-blog-toc-title:focus-visible {
+  outline: 2px solid var(--ara-blog-color-link);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.aranova-blog-post .aranova-blog-toc ol {
+  list-style: none;
+  margin: 0.75em 0 0;
+  padding: 0;
+}
+.aranova-blog-post .aranova-blog-toc li {
+  margin: 0;
+}
+.aranova-blog-post .aranova-blog-toc li + li {
+  margin-block-start: 0.3em;
+}
+.aranova-blog-post .aranova-blog-toc li[data-depth="3"] {
+  padding-inline-start: 0.9em;
+  font-size: 0.94em;
+}
+.aranova-blog-post .aranova-blog-toc a {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  line-height: 1.35;
+  color: var(--ara-blog-color-text-muted);
+  text-decoration: none;
+}
+.aranova-blog-post .aranova-blog-toc a:hover {
+  color: var(--ara-blog-color-link);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+/* --- Table of contents (client island) ------------------------------------------
+ * Animated companion to the zero-JS shell above: same box, but a real <button>
+ * header (aria-expanded) and a grid-template-rows 0fr\u21941fr collapse. The global
+ * reduced-motion block at the end of this sheet disables the transition. */
+.aranova-blog-post .aranova-blog-toc-panel {
+  font-size: var(--_small-size);
+  background: var(--ara-blog-color-surface);
+  border: 1px solid var(--ara-blog-color-border);
+  border-radius: var(--_radius);
+  padding: 0.85em 1.1em;
+}
+.aranova-blog-post .aranova-blog-toc-panel-title {
+  /* Button reset \u2014 host sites may or may not run Tailwind preflight. */
+  appearance: none;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  padding-inline-end: 1.75em;
+  width: 100%;
+  text-align: start;
+  font: inherit;
+  cursor: pointer;
+  position: relative;
+  font-weight: 600;
+  color: var(--_heading-color);
+}
+/* Rotating chevron (border trick \u2014 same pattern as the FAQ / zero-JS TOC). */
+.aranova-blog-post .aranova-blog-toc-panel-title::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0.35em;
+  width: 0.45em;
+  height: 0.45em;
+  border-inline-end: 2px solid var(--ara-blog-color-text-muted);
+  border-block-end: 2px solid var(--ara-blog-color-text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  transition: transform 250ms ease;
+}
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-open="true"]
+  > .aranova-blog-toc-panel-title::after {
+  transform: translateY(-30%) rotate(225deg);
+}
+.aranova-blog-post .aranova-blog-toc-panel-title:focus-visible {
+  outline: 2px solid var(--ara-blog-color-link);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+/* Collapsible body: the grid row animates 0fr\u21941fr; the clip wrapper hides overflow. */
+.aranova-blog-post .aranova-blog-toc-panel-body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms ease;
+}
+.aranova-blog-post .aranova-blog-toc-panel[data-open="true"] > .aranova-blog-toc-panel-body {
+  grid-template-rows: 1fr;
+}
+/* Horizontal collapse: a clean binary toggle along the inline axis. Open = the
+ * normal rail; closed = the whole panel is a compact chevron chip and the rail
+ * grid column reclaims the space (via \`:has()\` on the layout, below). No width
+ * animation: grid \`auto\` tracks can't interpolate, and a sliding clip either
+ * overflows the sticky aside (horizontal scrollbar) or reflows the entries \u2014
+ * instant + correct beats janky. */
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"]
+  > .aranova-blog-toc-panel-body {
+  display: block;
+  grid-template-rows: none;
+}
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"]:not([data-open="true"])
+  > .aranova-blog-toc-panel-body {
+  display: none;
+}
+/* Closed panel compacts to a small rounded chevron chip: the label is clipped
+ * out of a square toggle box and the panel hugs it (the rail's \`auto\` grid
+ * column then shrinks to the chip). */
+.aranova-blog-post .aranova-blog-toc-panel[data-collapse="horizontal"]:not([data-open="true"]) {
+  width: fit-content;
+  padding: 0.6em;
+}
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"]:not([data-open="true"])
+  > .aranova-blog-toc-panel-title {
+  display: block;
+  width: 1.4em;
+  height: 1.4em;
+  overflow: hidden;
+  text-indent: 150%;
+  white-space: nowrap;
+  padding-inline-end: 0;
+}
+/* Horizontal chevron points along the fold axis (\u2039/\u203A), flipping on open/close
+ * per side, instead of the vertical \u2304/\u2303. */
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"]
+  > .aranova-blog-toc-panel-title::after {
+  inset-inline: auto 0.5em;
+}
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"]:not([data-open="true"])
+  > .aranova-blog-toc-panel-title::after {
+  inset-inline: 0;
+  margin-inline: auto;
+}
+/* Left rail: open folds left (\u2039 = rotate 135deg), closed expands right (\u203A = -45deg). */
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"][data-side="left"][data-open="true"]
+  > .aranova-blog-toc-panel-title::after {
+  transform: translateY(-30%) rotate(135deg);
+}
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"][data-side="left"]:not([data-open="true"])
+  > .aranova-blog-toc-panel-title::after {
+  transform: translateY(-70%) rotate(-45deg);
+}
+/* Right rail: mirror \u2014 open folds right (\u203A), closed expands left (\u2039). */
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"][data-side="right"][data-open="true"]
+  > .aranova-blog-toc-panel-title::after {
+  transform: translateY(-70%) rotate(-45deg);
+}
+.aranova-blog-post
+  .aranova-blog-toc-panel[data-collapse="horizontal"][data-side="right"]:not([data-open="true"])
+  > .aranova-blog-toc-panel-title::after {
+  transform: translateY(-30%) rotate(135deg);
+}
+.aranova-blog-post .aranova-blog-toc-panel-clip {
+  overflow: hidden;
+  min-height: 0;
+}
+.aranova-blog-post .aranova-blog-toc-panel ol {
+  list-style: none;
+  margin: 0.75em 0 0;
+  padding: 0;
+}
+.aranova-blog-post .aranova-blog-toc-panel li {
+  margin: 0;
+}
+.aranova-blog-post .aranova-blog-toc-panel li + li {
+  margin-block-start: 0.3em;
+}
+.aranova-blog-post .aranova-blog-toc-panel li[data-depth="3"] {
+  padding-inline-start: 0.9em;
+  font-size: 0.94em;
+}
+.aranova-blog-post .aranova-blog-toc-panel-link {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  line-height: 1.35;
+  color: var(--ara-blog-color-text-muted);
+  text-decoration: none;
+  border-inline-start: 2px solid transparent;
+  padding-inline-start: 0.6em;
+  margin-inline-start: -0.75em;
+  transition: color 150ms ease;
+}
+.aranova-blog-post .aranova-blog-toc-panel-link:hover {
+  color: var(--ara-blog-color-link);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+/* Scroll-spy active entry: primary color + inline-start accent. */
+.aranova-blog-post .aranova-blog-toc-panel-link[data-active="true"] {
+  color: var(--ara-blog-color-primary);
+  border-inline-start-color: var(--ara-blog-color-primary);
+  font-weight: 600;
+}
+
+/* --- Reading progress (client island) --------------------------------------------
+ * Fixed strip along the top of the viewport; fill = scaleX(scrolled fraction),
+ * driven directly from rAF (no transition \u2014 it tracks position, so the
+ * reduced-motion block has nothing to disable and the bar stays useful). */
+.aranova-blog-post .aranova-blog-progress {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 60;
+  background: var(--ara-blog-color-primary);
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  pointer-events: none;
+}
+
+/* --- Vertical rhythm ------------------------------------------------------------
+ * Kept AFTER the element rules: the owl selector and the :where()-wrapped
+ * element rules all sit at (0,1,0), so source order lets rhythm win over the
+ * elements' margin resets, and the per-heading overrides below win over the
+ * owl. \`:is(...)\` targets both today's direct-child layout and the later
+ * \`.aranova-blog-content\` wrapper at class specificity. */
+:is(.aranova-blog-post, .aranova-blog-content) > * + * {
+  margin-block-start: var(--_flow);
+}
+:is(.aranova-blog-post, .aranova-blog-content) > :where(h2) {
+  margin-block-start: var(--_flow-section);
+}
+:is(.aranova-blog-post, .aranova-blog-content) > :where(h3, h4) {
+  margin-block-start: var(--_flow-lg);
+}
+:is(.aranova-blog-post, .aranova-blog-content) > :where(figure) {
+  margin-block: var(--_flow-lg);
+}
+:is(.aranova-blog-post, .aranova-blog-content) > :where(hr) {
+  margin-block: var(--_flow-section);
+}
+
+/* --- Motion ------------------------------------------------------------------
+ * Opt-in: a later phase stamps data-motion="subtle" on the article; without
+ * the attribute nothing animates. */
+@media (prefers-reduced-motion: no-preference) {
+  .aranova-blog-post[data-motion="subtle"] {
+    animation: aranova-blog-fade-up 300ms ease-out both;
+  }
+}
+@keyframes aranova-blog-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .aranova-blog-post,
+  .aranova-blog-post *,
+  .aranova-blog-post *::before,
+  .aranova-blog-post *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+`;
+
+// ../tracking-core/src/resources/blog/view/blog-post-view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+async function BlogPostView({
+  mdx,
+  theme = BASE_BLOG_THEME,
+  components,
+  header,
+  aside,
+  motion = "none",
+  classNames,
+  requireLeadingH1 = true,
+  tocSide = "right"
+}) {
+  const style = blogThemeToCssVars(theme);
+  const merged = { ...createDefaultComponents([], classNames), ...components };
+  const validation = validateBlogMdx(mdx, { requireLeadingH1 });
+  if (!validation.ok) {
+    const rules = Array.from(new Set(validation.violations.map((v) => v.rule))).join(", ");
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "article",
+      {
+        className: joinClassNames("aranova-blog-post", classNames?.article),
+        "data-error": "mdx-validation-failed",
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: BLOG_BASE_CSS }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
+            "This post could not be displayed. (blocked: ",
+            rules,
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+  let content;
+  try {
+    const compiled = await (0, import_rsc.compileMDX)({
+      source: mdx,
+      components: merged,
+      options: { mdxOptions: { rehypePlugins: [import_rehype_slug.default] } }
+    });
+    content = compiled.content;
+  } catch {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "article",
+      {
+        className: joinClassNames("aranova-blog-post", classNames?.article),
+        "data-error": "mdx-render-failed",
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: BLOG_BASE_CSS }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "This post could not be displayed." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "article",
+    {
+      className: joinClassNames("aranova-blog-post", classNames?.article),
+      "data-motion": motion,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: BLOG_BASE_CSS }),
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: joinClassNames("aranova-blog-layout", classNames?.layout),
+            "data-toc-side": tocSide,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: joinClassNames("aranova-blog-content", classNames?.content), children: content }),
+              aside ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("aside", { className: joinClassNames("aranova-blog-aside", classNames?.aside), children: aside }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// ../tracking-core/src/resources/blog/view/chrome/breadcrumbs.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function BlogBreadcrumbs({
+  items,
+  currentLabel,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { "aria-label": "Breadcrumbs", className: joinClassNames("aranova-blog-breadcrumbs", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ol", { children: [
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: item.href, children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", className: "aranova-blog-breadcrumbs-separator", children: "/" })
+    ] }, `${item.href} ${item.label}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-current": "page", children: currentLabel }) })
+  ] }) });
+}
+
+// ../tracking-core/src/resources/blog/view/chrome/meta.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_BLOG_LOCALE = "en-CA";
+function formatBlogDate(iso, locale) {
+  if (!iso) return null;
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return null;
+  let formatter;
+  try {
+    formatter = new Intl.DateTimeFormat(locale, { dateStyle: "long", timeZone: "UTC" });
+  } catch {
+    formatter = new Intl.DateTimeFormat(DEFAULT_BLOG_LOCALE, {
+      dateStyle: "long",
+      timeZone: "UTC"
+    });
+  }
+  return { dateTime: date.toISOString().slice(0, 10), label: formatter.format(date) };
+}
+function BlogPostMeta({
+  publishedAt,
+  updatedAt,
+  readingTimeMinutes,
+  tags,
+  locale = DEFAULT_BLOG_LOCALE,
+  className
+}) {
+  const published = formatBlogDate(publishedAt, locale);
+  const updated = formatBlogDate(updatedAt, locale);
+  const showUpdated = updated !== null && updated.dateTime !== published?.dateTime;
+  const showReadingTime = typeof readingTimeMinutes === "number" && readingTimeMinutes > 0;
+  const shownTags = (tags ?? []).filter((tag) => tag.length > 0);
+  const items = [];
+  if (published) {
+    items.push({
+      key: "published",
+      node: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("time", { dateTime: published.dateTime, children: published.label })
+    });
+  }
+  if (showUpdated && updated) {
+    items.push({
+      key: "updated",
+      node: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        "Updated ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("time", { dateTime: updated.dateTime, children: updated.label })
+      ] })
+    });
+  }
+  if (showReadingTime) {
+    items.push({ key: "reading-time", node: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      readingTimeMinutes,
+      " min read"
+    ] }) });
+  }
+  if (items.length === 0 && shownTags.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: joinClassNames("aranova-blog-meta", className), children: [
+    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "aranova-blog-meta-item", children: [
+      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "aranova-blog-meta-separator", children: "\xB7" }) : null,
+      item.node
+    ] }, item.key)),
+    shownTags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "aranova-blog-meta-tags", children: shownTags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "aranova-blog-meta-tag", children: tag }, tag)) }) : null
+  ] });
+}
+
+// ../tracking-core/src/resources/blog/view/chrome/toc.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function BlogTocShell({
+  headings,
+  title = "On this page",
+  className
+}) {
+  if (headings.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("details", { open: true, className: joinClassNames("aranova-blog-toc", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("summary", { className: "aranova-blog-toc-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { "aria-label": "Table of contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { children: headings.map((heading) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { "data-depth": heading.depth, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: `#${heading.id}`, title: heading.text, children: heading.text }) }, heading.id)) }) })
+  ] });
+}
+
+// ../tracking-core/src/resources/blog/view/blog-post.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+async function BlogPost({
+  slug,
+  client,
+  defaultTheme,
+  components,
+  notFound,
+  showMeta = false,
+  showToc = false,
+  tocSide = "right",
+  showBreadcrumbs = false,
+  breadcrumbs,
+  locale,
+  tocSlot,
+  progressSlot,
+  classNames
+}) {
+  const post = await client.getPost(slug);
+  if (!post) {
+    return notFound ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("article", { className: "aranova-blog-post", "data-error": "not-found", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "This post could not be found." }) });
+  }
+  const theme = resolveBlogTheme(
+    sanitizeBlogTheme(defaultTheme),
+    sanitizeBlogTheme(post.theme_overrides)
+  );
+  const merged = { ...createDefaultComponents(post.images, classNames), ...components };
+  const crumbs = showBreadcrumbs && breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    BlogBreadcrumbs,
+    {
+      items: breadcrumbs,
+      currentLabel: post.title,
+      className: classNames?.breadcrumbs
+    }
+  ) : null;
+  const meta = showMeta ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    BlogPostMeta,
+    {
+      publishedAt: post.published_at,
+      updatedAt: post.updated_at,
+      readingTimeMinutes: estimateReadingTime(post.mdx),
+      locale,
+      className: classNames?.meta
+    }
+  ) : null;
+  const progress = progressSlot ? progressSlot() : null;
+  const header = progress || crumbs || meta ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    progress,
+    crumbs,
+    meta
+  ] }) : void 0;
+  const headings = showToc ? extractBlogHeadings(post.mdx) : [];
+  const aside = headings.length > 0 ? tocSlot?.(headings) ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlogTocShell, { headings, className: classNames?.toc }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    BlogPostView,
+    {
+      mdx: post.mdx,
+      theme,
+      components: merged,
+      header,
+      aside,
+      classNames,
+      tocSide
+    }
+  );
+}
+
+// src/blog-post.tsx
+var import_blog_client = require("@aranova/tracking-next/blog-client");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BlogPost2({
+  showProgress = false,
+  tocCollapse = "vertical",
+  ...props
+}) {
+  const tocSide = props.tocSide ?? "right";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    BlogPost,
+    {
+      ...props,
+      tocSlot: (headings) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_blog_client.TocPanel,
+        {
+          headings,
+          className: props.classNames?.toc,
+          collapse: tocCollapse,
+          side: tocSide
+        }
+      ),
+      progressSlot: showProgress ? () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_blog_client.ReadingProgress, { className: props.classNames?.progress }) : void 0
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BASE_BLOG_THEME,
+  BLOG_BASE_CSS,
+  BLOG_BREAKPOINTS,
+  BLOG_BREAKPOINT_MIN_WIDTHS_PX,
+  BLOG_MDX_ALLOWED_COMPONENTS,
+  BLOG_MDX_COMPONENT_GRAMMAR,
+  BLOG_MDX_MAX_DEPTH,
+  BLOG_MDX_MAX_NODES,
+  BLOG_MDX_MAX_SIZE,
+  BLOG_THEME_PRESETS,
+  BlogBreadcrumbs,
+  BlogPost,
+  BlogPostMeta,
+  BlogPostView,
+  BlogTocShell,
+  DEFAULT_BLOG_LOCALE,
+  blogHeroImageSchema,
+  blogImageSchema,
+  blogManifestEntrySchema,
+  blogManifestSchema,
+  blogManifestWireSchema,
+  blogPostContentSchema,
+  blogPostContentWireSchema,
+  blogSeoSchema,
+  blogThemeColorsSchema,
+  blogThemeOverrideSchema,
+  blogThemeSchema,
+  blogThemeSpacingSchema,
+  blogThemeToCssVars,
+  blogThemeTypographySchema,
+  buildBlogPostMetadata,
+  buildBlogPostingJsonLd,
+  buildBlogSitemapEntries,
+  buildFaqJsonLd,
+  createBlogClient,
+  createBlogFontTheme,
+  createDefaultComponents,
+  estimateReadingTime,
+  extractBlogHeadings,
+  extractFaqPairs,
+  joinClassNames,
+  nullishField,
+  parseBlogManifest,
+  parseBlogPostContent,
+  resolveBlogTheme,
+  responsive,
+  sanitizeBlogTheme,
+  serializeJsonLd,
+  toBlogBreakpointMap,
+  validateBlogMdx
+});
+//# sourceMappingURL=blog-server.js.map