@djangocfg/nextjs 2.1.6 → 2.1.8

package/dist/navigation/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/navigation/utils.ts"],"sourcesContent":["/**\n * Navigation Utilities\n *\n * Common utilities for route definitions and navigation\n */\n\nimport type { RouteDefinition, RouteMetadata, MenuItem } from './types';\n\n// ─────────────────────────────────────────────────────────────────────────\n// Route Definition Helper\n// ─────────────────────────────────────────────────────────────────────────\n\n/**\n * Define a route with metadata\n *\n * IMPORTANT: Next.js automatically handles basePath for <Link> components when\n * basePath is set in next.config.ts. We should NOT add basePath manually here,\n * as it would cause double-prefixing in static builds.\n *\n * @param path - Route path (e.g., '/dashboard', '/admin/users')\n * @param metadata - Route metadata (label, icon, etc.)\n */\nexport function defineRoute(\n  path: string,\n  metadata: RouteMetadata,\n): RouteDefinition {\n  // Always return path as-is. Next.js will handle basePath automatically\n  // for <Link> components when basePath is set in next.config.ts\n  return {\n    path,\n    metadata,\n  };\n}\n\n// ─────────────────────────────────────────────────────────────────────────\n// Route Guards\n// ─────────────────────────────────────────────────────────────────────────\n\n/**\n * Get redirect path for unauthenticated users\n */\nexport function getUnauthenticatedRedirect(\n  path: string,\n  authPath: string = '/auth',\n): string | null {\n  if (path.startsWith('/private') || path.startsWith('/admin')) {\n    // Return path as-is. Next.js will handle basePath automatically for router.push()\n    // when basePath is set in next.config.ts\n    return authPath;\n  }\n  return null;\n}\n\n/**\n * Get redirect path to auth page\n */\nexport function redirectToAuth(\n  authPath: string = '/auth',\n): string {\n  // Return path as-is. Next.js will handle basePath automatically for router.push()\n  // when basePath is set in next.config.ts\n  return authPath;\n}\n\n// ─────────────────────────────────────────────────────────────────────────\n// Route Lookup\n// ─────────────────────────────────────────────────────────────────────────\n\nexport function findRoute(\n  routes: RouteDefinition[],\n  path: string\n): RouteDefinition | undefined {\n  return routes.find((r) => r.path === path);\n}\n\nexport function findRouteByPattern(\n  routes: RouteDefinition[],\n  path: string\n): RouteDefinition | undefined {\n  const exact = findRoute(routes, path);\n  if (exact) return exact;\n\n  const segments = path.split('/').filter(Boolean);\n  for (let i = segments.length; i > 0; i--) {\n    const parentPath = '/' + segments.slice(0, i).join('/');\n    const parent = findRoute(routes, parentPath);\n    if (parent) return parent;\n  }\n\n  return undefined;\n}\n\n// ─────────────────────────────────────────────────────────────────────────\n// Page Title\n// ─────────────────────────────────────────────────────────────────────────\n\nexport function getPageTitle(\n  routes: RouteDefinition[],\n  path: string,\n  fallback = 'Dashboard'\n): string {\n  const route = findRouteByPattern(routes, path);\n  return route?.metadata.label || fallback;\n}\n\n// ─────────────────────────────────────────────────────────────────────────\n// Active Route\n// ─────────────────────────────────────────────────────────────────────────\n\n/**\n * Check if a route is active\n *\n * @param current - Current pathname\n * @param target - Target route path to check\n * @param allRoutes - Optional array of all routes to prevent parent paths from being active when child paths are active\n * @returns true if the route is active\n */\nexport function isActive(\n  current: string,\n  target: string,\n  allRoutes?: RouteDefinition[]\n): boolean {\n  const matches =\n    current === target || (target !== '/' && current.startsWith(target + '/'));\n\n  // If allRoutes is provided, check for more specific paths\n  if (matches && allRoutes) {\n    return !allRoutes.some(\n      (otherRoute) =>\n        otherRoute.path !== target &&\n        otherRoute.path.startsWith(target + '/') &&\n        (current === otherRoute.path ||\n          current.startsWith(otherRoute.path + '/'))\n    );\n  }\n\n  return matches;\n}\n\n// ─────────────────────────────────────────────────────────────────────────\n// Menu Generation Helper\n// ─────────────────────────────────────────────────────────────────────────\n\n/**\n * Filter and convert routes to menu items\n */\nexport function routesToMenuItems(\n  routes: RouteDefinition[],\n  groupName: string\n): MenuItem[] {\n  return routes\n    .filter(\n      (r) =>\n        r.metadata.group === groupName &&\n        r.metadata.icon &&\n        (r.metadata.show === undefined || r.metadata.show === true)\n    )\n    .sort((a, b) => (a.metadata.order || 0) - (b.metadata.order || 0))\n    .map((r) => ({\n      path: r.path,\n      label: r.metadata.label,\n      icon: r.metadata.icon!,\n    }));\n}\n\n"],"mappings":";AAsBO,SAAS,YACd,MACA,UACiB;AAGjB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,2BACd,MACA,WAAmB,SACJ;AACf,MAAI,KAAK,WAAW,UAAU,KAAK,KAAK,WAAW,QAAQ,GAAG;AAG5D,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAKO,SAAS,eACd,WAAmB,SACX;AAGR,SAAO;AACT;AAMO,SAAS,UACd,QACA,MAC6B;AAC7B,SAAO,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,IAAI;AAC3C;AAEO,SAAS,mBACd,QACA,MAC6B;AAC7B,QAAM,QAAQ,UAAU,QAAQ,IAAI;AACpC,MAAI,MAAO,QAAO;AAElB,QAAM,WAAW,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAC/C,WAAS,IAAI,SAAS,QAAQ,IAAI,GAAG,KAAK;AACxC,UAAM,aAAa,MAAM,SAAS,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AACtD,UAAM,SAAS,UAAU,QAAQ,UAAU;AAC3C,QAAI,OAAQ,QAAO;AAAA,EACrB;AAEA,SAAO;AACT;AAMO,SAAS,aACd,QACA,MACA,WAAW,aACH;AACR,QAAM,QAAQ,mBAAmB,QAAQ,IAAI;AAC7C,SAAO,OAAO,SAAS,SAAS;AAClC;AAcO,SAAS,SACd,SACA,QACA,WACS;AACT,QAAM,UACJ,YAAY,UAAW,WAAW,OAAO,QAAQ,WAAW,SAAS,GAAG;AAG1E,MAAI,WAAW,WAAW;AACxB,WAAO,CAAC,UAAU;AAAA,MAChB,CAAC,eACC,WAAW,SAAS,UACpB,WAAW,KAAK,WAAW,SAAS,GAAG,MACtC,YAAY,WAAW,QACtB,QAAQ,WAAW,WAAW,OAAO,GAAG;AAAA,IAC9C;AAAA,EACF;AAEA,SAAO;AACT;AASO,SAAS,kBACd,QACA,WACY;AACZ,SAAO,OACJ;AAAA,IACC,CAAC,MACC,EAAE,SAAS,UAAU,aACrB,EAAE,SAAS,SACV,EAAE,SAAS,SAAS,UAAa,EAAE,SAAS,SAAS;AAAA,EAC1D,EACC,KAAK,CAAC,GAAG,OAAO,EAAE,SAAS,SAAS,MAAM,EAAE,SAAS,SAAS,EAAE,EAChE,IAAI,CAAC,OAAO;AAAA,IACX,MAAM,EAAE;AAAA,IACR,OAAO,EAAE,SAAS;AAAA,IAClB,MAAM,EAAE,SAAS;AAAA,EACnB,EAAE;AACN;","names":[]}

package/dist/og-image/components/index.d.mts

@@ -0,0 +1,59 @@
+import { ReactElement } from 'react';
+
+/**
+ * OG Image Types
+ *
+ * Shared types for OG image templates and handlers
+ * This file is safe to import in client components
+ */
+interface OgImageTemplateProps {
+    title: string;
+    description?: string;
+    subtitle?: string;
+    siteName?: string;
+    logo?: string;
+    showLogo?: boolean;
+    showSiteName?: boolean;
+    backgroundType?: 'gradient' | 'solid';
+    gradientStart?: string;
+    gradientEnd?: string;
+    backgroundColor?: string;
+    titleSize?: number;
+    titleWeight?: number;
+    titleColor?: string;
+    descriptionSize?: number;
+    descriptionColor?: string;
+    siteNameSize?: number;
+    siteNameColor?: string;
+    padding?: number;
+    logoSize?: number;
+    devMode?: boolean;
+}
+
+/**
+ * Default OG Image Template
+ *
+ * A modern, gradient-based template for OG images
+ */
+
+/**
+ * Default OG Image Template Component
+ *
+ * Features:
+ * - Modern gradient background
+ * - Responsive text sizing
+ * - Optional logo and site name
+ * - Clean typography
+ * - Full customization support
+ *
+ * @param props - Template props with title, description, siteName, logo and optional customization
+ */
+declare function DefaultTemplate({ title, description, siteName, logo, showLogo, showSiteName, backgroundType, gradientStart, gradientEnd, backgroundColor, titleSize, titleWeight, titleColor, descriptionSize, descriptionColor, siteNameSize, siteNameColor, padding, logoSize, devMode, }: OgImageTemplateProps): ReactElement;
+/**
+ * Simple light template variant
+ *
+ * Light background variant with dark text
+ */
+declare function LightTemplate({ title, description, siteName, logo, showLogo, showSiteName, backgroundType, gradientStart, gradientEnd, backgroundColor, titleSize, titleWeight, titleColor, descriptionSize, descriptionColor, siteNameSize, siteNameColor, padding, logoSize, devMode, }: OgImageTemplateProps): ReactElement;
+
+export { DefaultTemplate, LightTemplate, type OgImageTemplateProps };

package/dist/og-image/components/index.mjs

@@ -0,0 +1,325 @@
+// src/og-image/components/DefaultTemplate.tsx
+function DefaultTemplate({
+  title,
+  description,
+  siteName,
+  logo,
+  // Visibility flags
+  showLogo = true,
+  showSiteName = true,
+  // Background customization
+  backgroundType = "gradient",
+  gradientStart = "#667eea",
+  gradientEnd = "#764ba2",
+  backgroundColor = "#ffffff",
+  // Typography - Title
+  titleSize,
+  titleWeight = 800,
+  titleColor = "white",
+  // Typography - Description
+  descriptionSize = 32,
+  descriptionColor = "rgba(255, 255, 255, 0.85)",
+  // Typography - Site Name
+  siteNameSize = 28,
+  siteNameColor = "rgba(255, 255, 255, 0.95)",
+  // Layout
+  padding = 80,
+  logoSize = 48,
+  // Dev mode
+  devMode = false
+}) {
+  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
+  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
+  const gridOverlay = devMode ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundImage: `
+          linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
+        `,
+        backgroundSize: "20px 20px",
+        pointerEvents: "none",
+        zIndex: 10
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        background: backgroundStyle,
+        padding: `${padding}px`,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        position: "relative"
+      }
+    },
+    gridOverlay,
+    (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px"
+        }
+      },
+      showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: logo,
+          alt: "Logo",
+          width: logoSize,
+          height: logoSize,
+          style: {
+            borderRadius: "8px"
+          }
+        }
+      ),
+      showSiteName && siteName && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: siteNameSize,
+            fontWeight: 600,
+            color: siteNameColor,
+            letterSpacing: "-0.02em"
+          }
+        },
+        siteName
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "24px",
+          flex: 1,
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: calculatedTitleSize,
+            fontWeight: titleWeight,
+            color: titleColor,
+            lineHeight: 1.1,
+            letterSpacing: "-0.03em",
+            textShadow: backgroundType === "gradient" ? "0 2px 20px rgba(0, 0, 0, 0.2)" : "none",
+            maxWidth: "100%",
+            wordWrap: "break-word"
+          }
+        },
+        title
+      ),
+      description && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: descriptionSize,
+            fontWeight: 400,
+            color: descriptionColor,
+            lineHeight: 1.5,
+            letterSpacing: "-0.01em",
+            maxWidth: "90%",
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden"
+          }
+        },
+        description
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          height: "4px",
+          background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
+          borderRadius: "2px"
+        }
+      }
+    )
+  );
+}
+function LightTemplate({
+  title,
+  description,
+  siteName,
+  logo,
+  // Visibility flags
+  showLogo = true,
+  showSiteName = true,
+  // Background customization (defaults to light theme)
+  backgroundType = "solid",
+  gradientStart = "#667eea",
+  gradientEnd = "#764ba2",
+  backgroundColor = "#ffffff",
+  // Typography - Title
+  titleSize,
+  titleWeight = 800,
+  titleColor = "#111",
+  // Typography - Description
+  descriptionSize = 32,
+  descriptionColor = "#666",
+  // Typography - Site Name
+  siteNameSize = 28,
+  siteNameColor = "#111",
+  // Layout
+  padding = 80,
+  logoSize = 48,
+  // Dev mode
+  devMode = false
+}) {
+  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);
+  const backgroundStyle = backgroundType === "gradient" ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : backgroundColor;
+  const gridOverlay = devMode ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundImage: `
+          linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
+        `,
+        backgroundSize: "20px 20px",
+        pointerEvents: "none",
+        zIndex: 10
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        background: backgroundStyle,
+        padding: `${padding}px`,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        position: "relative"
+      }
+    },
+    gridOverlay,
+    (showLogo && logo || showSiteName && siteName) && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px"
+        }
+      },
+      showLogo && logo && // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: logo,
+          alt: "Logo",
+          width: logoSize,
+          height: logoSize,
+          style: {
+            borderRadius: "8px"
+          }
+        }
+      ),
+      showSiteName && siteName && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: siteNameSize,
+            fontWeight: 600,
+            color: siteNameColor,
+            letterSpacing: "-0.02em"
+          }
+        },
+        siteName
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "24px",
+          flex: 1,
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: calculatedTitleSize,
+            fontWeight: titleWeight,
+            color: titleColor,
+            lineHeight: 1.1,
+            letterSpacing: "-0.03em",
+            maxWidth: "100%",
+            wordWrap: "break-word"
+          }
+        },
+        title
+      ),
+      description && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: descriptionSize,
+            fontWeight: 400,
+            color: descriptionColor,
+            lineHeight: 1.5,
+            letterSpacing: "-0.01em",
+            maxWidth: "90%"
+          }
+        },
+        description
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          height: "4px",
+          background: backgroundType === "gradient" ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)` : gradientStart,
+          borderRadius: "2px"
+        }
+      }
+    )
+  );
+}
+export {
+  DefaultTemplate,
+  LightTemplate
+};
+//# sourceMappingURL=index.mjs.map

package/dist/og-image/components/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/og-image/components/DefaultTemplate.tsx"],"sourcesContent":["/**\n * Default OG Image Template\n *\n * A modern, gradient-based template for OG images\n */\n\nimport type { ReactElement } from 'react';\nimport type { OgImageTemplateProps } from '../types';\n\n/**\n * Default OG Image Template Component\n *\n * Features:\n * - Modern gradient background\n * - Responsive text sizing\n * - Optional logo and site name\n * - Clean typography\n * - Full customization support\n *\n * @param props - Template props with title, description, siteName, logo and optional customization\n */\nexport function DefaultTemplate({\n  title,\n  description,\n  siteName,\n  logo,\n  // Visibility flags\n  showLogo = true,\n  showSiteName = true,\n  // Background customization\n  backgroundType = 'gradient',\n  gradientStart = '#667eea',\n  gradientEnd = '#764ba2',\n  backgroundColor = '#ffffff',\n  // Typography - Title\n  titleSize,\n  titleWeight = 800,\n  titleColor = 'white',\n  // Typography - Description\n  descriptionSize = 32,\n  descriptionColor = 'rgba(255, 255, 255, 0.85)',\n  // Typography - Site Name\n  siteNameSize = 28,\n  siteNameColor = 'rgba(255, 255, 255, 0.95)',\n  // Layout\n  padding = 80,\n  logoSize = 48,\n  // Dev mode\n  devMode = false,\n}: OgImageTemplateProps): ReactElement {\n  // Calculate title size if not provided (responsive based on title length)\n  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);\n  \n  // Determine background style\n  const backgroundStyle =\n    backgroundType === 'gradient'\n      ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`\n      : backgroundColor;\n\n  // Grid overlay for dev mode\n  const gridOverlay = devMode ? (\n    <div\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundImage: `\n          linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)\n        `,\n        backgroundSize: '20px 20px',\n        pointerEvents: 'none',\n        zIndex: 10,\n      }}\n    />\n  ) : null;\n\n  return (\n    <div\n      style={{\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        background: backgroundStyle,\n        padding: `${padding}px`,\n        fontFamily: 'system-ui, -apple-system, sans-serif',\n        position: 'relative',\n      }}\n    >\n      {gridOverlay}\n      \n      {/* Header with logo and site name */}\n      {((showLogo && logo) || (showSiteName && siteName)) && (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: '16px',\n          }}\n        >\n          {showLogo && logo && (\n            // eslint-disable-next-line @next/next/no-img-element\n            <img\n              src={logo}\n              alt=\"Logo\"\n              width={logoSize}\n              height={logoSize}\n              style={{\n                borderRadius: '8px',\n              }}\n            />\n          )}\n          {showSiteName && siteName && (\n            <div\n              style={{\n                fontSize: siteNameSize,\n                fontWeight: 600,\n                color: siteNameColor,\n                letterSpacing: '-0.02em',\n              }}\n            >\n              {siteName}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Main content */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '24px',\n          flex: 1,\n          justifyContent: 'center',\n        }}\n      >\n        {/* Title */}\n        <div\n          style={{\n            fontSize: calculatedTitleSize,\n            fontWeight: titleWeight,\n            color: titleColor,\n            lineHeight: 1.1,\n            letterSpacing: '-0.03em',\n            textShadow: backgroundType === 'gradient' ? '0 2px 20px rgba(0, 0, 0, 0.2)' : 'none',\n            maxWidth: '100%',\n            wordWrap: 'break-word',\n          }}\n        >\n          {title}\n        </div>\n\n        {/* Description */}\n        {description && (\n          <div\n            style={{\n              fontSize: descriptionSize,\n              fontWeight: 400,\n              color: descriptionColor,\n              lineHeight: 1.5,\n              letterSpacing: '-0.01em',\n              maxWidth: '90%',\n              display: '-webkit-box',\n              WebkitLineClamp: 2,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden',\n            }}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n\n      {/* Footer decoration */}\n      <div\n        style={{\n          display: 'flex',\n          width: '100%',\n          height: '4px',\n          background: backgroundType === 'gradient' \n            ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)`\n            : gradientStart,\n          borderRadius: '2px',\n        }}\n      />\n    </div>\n  );\n}\n\n/**\n * Simple light template variant\n * \n * Light background variant with dark text\n */\nexport function LightTemplate({\n  title,\n  description,\n  siteName,\n  logo,\n  // Visibility flags\n  showLogo = true,\n  showSiteName = true,\n  // Background customization (defaults to light theme)\n  backgroundType = 'solid',\n  gradientStart = '#667eea',\n  gradientEnd = '#764ba2',\n  backgroundColor = '#ffffff',\n  // Typography - Title\n  titleSize,\n  titleWeight = 800,\n  titleColor = '#111',\n  // Typography - Description\n  descriptionSize = 32,\n  descriptionColor = '#666',\n  // Typography - Site Name\n  siteNameSize = 28,\n  siteNameColor = '#111',\n  // Layout\n  padding = 80,\n  logoSize = 48,\n  // Dev mode\n  devMode = false,\n}: OgImageTemplateProps): ReactElement {\n  // Calculate title size if not provided (responsive based on title length)\n  const calculatedTitleSize = titleSize || (title.length > 60 ? 56 : 72);\n  \n  // Determine background style\n  const backgroundStyle =\n    backgroundType === 'gradient'\n      ? `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`\n      : backgroundColor;\n\n  // Grid overlay for dev mode\n  const gridOverlay = devMode ? (\n    <div\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        backgroundImage: `\n          linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)\n        `,\n        backgroundSize: '20px 20px',\n        pointerEvents: 'none',\n        zIndex: 10,\n      }}\n    />\n  ) : null;\n\n  return (\n    <div\n      style={{\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        background: backgroundStyle,\n        padding: `${padding}px`,\n        fontFamily: 'system-ui, -apple-system, sans-serif',\n        position: 'relative',\n      }}\n    >\n      {gridOverlay}\n      \n      {/* Header with logo and site name */}\n      {((showLogo && logo) || (showSiteName && siteName)) && (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: '16px',\n          }}\n        >\n          {showLogo && logo && (\n            // eslint-disable-next-line @next/next/no-img-element\n            <img\n              src={logo}\n              alt=\"Logo\"\n              width={logoSize}\n              height={logoSize}\n              style={{\n                borderRadius: '8px',\n              }}\n            />\n          )}\n          {showSiteName && siteName && (\n            <div\n              style={{\n                fontSize: siteNameSize,\n                fontWeight: 600,\n                color: siteNameColor,\n                letterSpacing: '-0.02em',\n              }}\n            >\n              {siteName}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Main content */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '24px',\n          flex: 1,\n          justifyContent: 'center',\n        }}\n      >\n        {/* Title */}\n        <div\n          style={{\n            fontSize: calculatedTitleSize,\n            fontWeight: titleWeight,\n            color: titleColor,\n            lineHeight: 1.1,\n            letterSpacing: '-0.03em',\n            maxWidth: '100%',\n            wordWrap: 'break-word',\n          }}\n        >\n          {title}\n        </div>\n\n        {/* Description */}\n        {description && (\n          <div\n            style={{\n              fontSize: descriptionSize,\n              fontWeight: 400,\n              color: descriptionColor,\n              lineHeight: 1.5,\n              letterSpacing: '-0.01em',\n              maxWidth: '90%',\n            }}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n\n      {/* Footer decoration */}\n      <div\n        style={{\n          display: 'flex',\n          width: '100%',\n          height: '4px',\n          background: backgroundType === 'gradient' \n            ? `linear-gradient(90deg, ${gradientStart} 0%, ${gradientEnd} 100%)`\n            : gradientStart,\n          borderRadius: '2px',\n        }}\n      />\n    </div>\n  );\n}\n\n"],"mappings":"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","names":[]}

package/dist/og-image/index.d.mts

@@ -0,0 +1,112 @@
+import { ImageResponse } from 'next/og';
+import { NextRequest } from 'next/server';
+import { ReactElement } from 'react';
+import { OgImageTemplateProps } from './components/index.mjs';
+export { DefaultTemplate, LightTemplate } from './components/index.mjs';
+export { FontConfig, OgImageMetadataOptions, OgImageUrlParams, createFontLoader, createOgImageMetadataGenerator, createOgImageUrlBuilder, decodeBase64, encodeBase64, generateOgImageMetadata, generateOgImageUrl, getAbsoluteOgImageUrl, loadGoogleFont, loadGoogleFonts, parseOgImageData, parseOgImageUrl } from './utils/index.mjs';
+import 'next';
+
+/**
+ * OG Image Route Handler
+ *
+ * Factory function to create OG Image route handler for Next.js App Router
+ *
+ * Usage:
+ * ```tsx
+ * // app/api/og/route.tsx
+ * import { createOgImageHandler } from '@djangocfg/nextjs/og-image';
+ * import { MyTemplate } from './templates';
+ *
+ * export const { GET, runtime } = createOgImageHandler({
+ *   template: MyTemplate,
+ *   defaultProps: {
+ *     siteName: 'My Site',
+ *   },
+ *   fonts: [{ family: 'Manrope', weight: 700 }],
+ * });
+ * ```
+ */
+
+interface OgImageHandlerConfig {
+    /** Custom template component (optional, defaults to DefaultTemplate) */
+    template?: (props: OgImageTemplateProps) => ReactElement;
+    /** Default props to merge with query params */
+    defaultProps?: Partial<OgImageTemplateProps>;
+    /** Google Fonts to load */
+    fonts?: Array<{
+        family: string;
+        weight: 400 | 500 | 600 | 700 | 800 | 900;
+    }>;
+    /** Image size */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /** Enable debug mode */
+    debug?: boolean;
+}
+/**
+ * Factory function to create OG Image route handler
+ *
+ * @example
+ * ```tsx
+ * // app/api/og/route.tsx
+ * import { createOgImageHandler } from '@djangocfg/nextjs/og-image';
+ * import { MyTemplate } from '@/components/MyTemplate';
+ *
+ * export const { GET, runtime } = createOgImageHandler({
+ *   template: MyTemplate,
+ *   defaultProps: { siteName: 'My Site' },
+ *   fonts: [{ family: 'Inter', weight: 700 }],
+ * });
+ * ```
+ */
+declare function createOgImageHandler(config: OgImageHandlerConfig): {
+    GET: (req: NextRequest) => Promise<ImageResponse>;
+    runtime: "edge";
+};
+/**
+ * Create OG Image route handler for dynamic route with path parameter
+ *
+ * This is a convenience wrapper for Next.js dynamic routes like `/api/og/[data]/route.tsx`.
+ * It extracts the `data` parameter from the path and passes it to the handler as a query parameter.
+ * Also handles static export mode automatically.
+ *
+ * @example
+ * ```tsx
+ * // app/api/og/[data]/route.tsx
+ * import { createOgImageDynamicRoute } from '@djangocfg/nextjs/og-image';
+ * import { OgImageTemplate } from '@/components/OgImageTemplate';
+ *
+ * export const runtime = 'nodejs';
+ * export const dynamic = 'force-static';
+ * export const revalidate = false;
+ *
+ * const handler = createOgImageDynamicRoute({
+ *   template: OgImageTemplate,
+ *   defaultProps: {
+ *     siteName: 'My App',
+ *     logo: '/logo.svg',
+ *   },
+ * });
+ *
+ * export async function GET(
+ *   request: NextRequest,
+ *   { params }: { params: { data: string } }
+ ) {
+ *   return handler(request, params);
+ * }
+ * ```
+ */
+declare function createOgImageDynamicRoute(config: OgImageHandlerConfig): {
+    GET: (request: NextRequest, context: {
+        params: Promise<{
+            data: string;
+        }>;
+    }) => Promise<Response>;
+    generateStaticParams: () => Promise<Array<{
+        data: string;
+    }>>;
+};
+
+export { type OgImageHandlerConfig, OgImageTemplateProps, createOgImageDynamicRoute, createOgImageHandler };