@djangocfg/layouts 1.4.24 → 1.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.24",
+  "version": "1.4.27",
   "description": "Pre-built dashboard layouts, authentication pages, and admin templates for Next.js applications with Tailwind CSS",
   "keywords": [
     "layouts",
@@ -85,9 +85,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.24",
-    "@djangocfg/og-image": "^1.4.24",
-    "@djangocfg/ui": "^1.4.24",
+    "@djangocfg/api": "^1.4.27",
+    "@djangocfg/og-image": "^1.4.27",
+    "@djangocfg/ui": "^1.4.27",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -109,7 +109,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.24",
+    "@djangocfg/typescript-config": "^1.4.27",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/Seo.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { generateOgImageUrl } from '@djangocfg/og-image/utils';
 
 import { PageConfig } from '../../../types/pageConfig';
@@ -13,6 +14,8 @@ interface SeoProps {
     logoVector?: string;
   };
   siteUrl?: string;
+  /** Override canonical URL (defaults to current page URL) */
+  canonicalUrl?: string;
 }
 
 /**
@@ -28,8 +31,7 @@ function isAbsoluteUrl(url: string): boolean {
  * Priority:
  * 1. Provided siteUrl (if absolute)
  * 2. NEXT_PUBLIC_SITE_URL env var
- * 3. NEXT_PUBLIC_VERCEL_URL (for Vercel deployments)
- * 4. window.location.origin (client-side only)
+ * 3. window.location.origin (client-side only)
  */
 function getAbsoluteSiteUrl(siteUrl?: string): string | null {
   // 1. Check if provided siteUrl is already absolute
@@ -43,13 +45,7 @@ function getAbsoluteSiteUrl(siteUrl?: string): string | null {
     return envSiteUrl.replace(/\/$/, '');
   }
 
-  // 3. Check Vercel URL (auto-set by Vercel)
-  const vercelUrl = process.env.NEXT_PUBLIC_VERCEL_URL;
-  if (vercelUrl) {
-    return `https://${vercelUrl}`;
-  }
-
-  // 4. Client-side fallback (not available during SSR)
+  // 3. Client-side fallback (not available during SSR)
   if (typeof window !== 'undefined') {
     return window.location.origin;
   }
@@ -57,7 +53,9 @@ function getAbsoluteSiteUrl(siteUrl?: string): string | null {
   return null;
 }
 
-export default function Seo({ pageConfig, icons, siteUrl }: SeoProps) {
+export default function Seo({ pageConfig, icons, siteUrl, canonicalUrl }: SeoProps) {
+  const router = useRouter();
+
   const {
     title,
     description,
@@ -74,6 +72,11 @@ export default function Seo({ pageConfig, icons, siteUrl }: SeoProps) {
   // Get absolute site URL with smart fallbacks
   const absoluteSiteUrl = getAbsoluteSiteUrl(siteUrl);
 
+  // Build canonical URL: custom > siteUrl + current path
+  const currentPath = router.asPath.split('?')[0]; // Remove query params
+  const absoluteCanonicalUrl = canonicalUrl
+    || (absoluteSiteUrl ? `${absoluteSiteUrl}${currentPath}` : null);
+
   // Generate OG image URL using @djangocfg/og-image utilities
   const ogImageUrl = ogImage
     ? generateOgImageUrl('/api/og', {
@@ -97,14 +100,19 @@ export default function Seo({ pageConfig, icons, siteUrl }: SeoProps) {
       {/* Favicon */}
       <link rel="icon" type="image/png" href={icons?.logo192 || '/favicon.png'} />
 
+      {/* Canonical URL - important for SEO */}
+      {absoluteCanonicalUrl && (
+        <link rel="canonical" href={absoluteCanonicalUrl} />
+      )}
+
       {/* Open Graph */}
       <meta property="og:title" content={openGraph?.title || ogTitle} />
       <meta property="og:description" content={openGraph?.description || ogSubtitle} />
       <meta property="og:type" content={openGraph?.type || 'website'} />
 
-      {/* Canonical URL */}
-      {absoluteSiteUrl && (
-        <meta property="og:url" content={absoluteSiteUrl} />
+      {/* OG Canonical URL */}
+      {absoluteCanonicalUrl && (
+        <meta property="og:url" content={absoluteCanonicalUrl} />
       )}
 
       {/* Site Name */}

package/src/snippets/ContactForm/ContactForm.tsx

@@ -58,17 +58,17 @@ export interface ContactFormProps {
 // ============================================================================
 
 /**
- * ContactForm - Contact form using Django-CFG Lead API
+ * ContactFormBase - Contact form using Django-CFG Lead API
+ *
+ * NOTE: Use ContactForm from index.ts which is dynamically imported (ssr: false)
  *
  * @example
  * ```tsx
- * <ContactForm
- *   apiUrl="https://api.example.com"
- *   onSuccess={(result) => console.log('Lead ID:', result.lead_id)}
- * />
+ * import { ContactForm } from '@djangocfg/layouts';
+ * <ContactForm apiUrl="https://api.example.com" />
  * ```
  */
-export function ContactForm({ apiUrl, ...props }: ContactFormProps) {
+export function ContactFormBase({ apiUrl, ...props }: ContactFormProps) {
   return (
     <ContactFormProvider apiUrl={apiUrl}>
       <ContactFormInner {...props} />
@@ -112,20 +112,42 @@ function ContactFormInner({
   const t = { ...DEFAULT_FORM_TEXTS, ...texts };
   const [draft, setDraft, clearDraft] = useLocalStorage<FormDraft>(STORAGE_KEY, emptyDraft);
   const [isSuccess, setIsSuccess] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
 
   const form = useForm<FormData>({
     resolver: zodResolver(Schemas.LeadSubmissionRequestSchema),
+    // Start with empty values to match SSR
     defaultValues: {
       ...emptyDraft,
-      ...draft,
-      site_url: typeof window !== 'undefined' ? window.location.href : '',
+      site_url: '',
     },
   });
 
+  // Hydrate form with localStorage draft and site_url after mount
+  useEffect(() => {
+    if (isHydrated) return;
+    setIsHydrated(true);
+
+    // Apply draft from localStorage and set site_url
+    const currentValues = form.getValues();
+    const hasDraftData = draft.name || draft.email || draft.company || draft.subject || draft.message;
+
+    if (hasDraftData || !currentValues.site_url) {
+      form.reset({
+        ...emptyDraft,
+        ...draft,
+        site_url: window.location.href,
+      });
+    }
+  }, [draft, form, isHydrated]);
+
   // Watch form values and save to localStorage
   const watchedValues = useWatch({ control: form.control });
 
   useEffect(() => {
+    // Only save to localStorage after hydration to avoid unnecessary writes
+    if (!isHydrated) return;
+
     const { name, email, company, subject, message } = watchedValues;
     if (name || email || company || subject || message) {
       setDraft({
@@ -136,14 +158,30 @@ function ContactFormInner({
         message: message || '',
       });
     }
-  }, [watchedValues, setDraft]);
+  }, [watchedValues, setDraft, isHydrated]);
 
   const handleSubmit = async (data: FormData) => {
     try {
       const result = await submit(data);
       if (resetOnSuccess) {
-        form.reset();
-        clearDraft();
+        // Keep contact info (name, email, company), clear only message content
+        const currentValues = form.getValues();
+        form.reset({
+          name: currentValues.name,
+          email: currentValues.email,
+          company: currentValues.company,
+          subject: '',
+          message: '',
+          site_url: currentValues.site_url,
+        });
+        // Update draft to keep contact info
+        setDraft({
+          name: currentValues.name || '',
+          email: currentValues.email || '',
+          company: currentValues.company || '',
+          subject: '',
+          message: '',
+        });
       }
       setIsSuccess(true);
       onSuccess?.(result);
@@ -156,7 +194,16 @@ function ContactFormInner({
 
   const handleReset = () => {
     setIsSuccess(false);
-    form.reset();
+    // Keep contact info when returning to form
+    const currentDraft = draft;
+    form.reset({
+      name: currentDraft.name,
+      email: currentDraft.email,
+      company: currentDraft.company,
+      subject: '',
+      message: '',
+      site_url: typeof window !== 'undefined' ? window.location.href : '',
+    });
   };
 
   // Success state

package/src/snippets/ContactForm/ContactPage.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Mail, MapPin, Calendar } from 'lucide-react';
-import { ContactForm } from './ContactForm';
+import { ContactFormBase as ContactForm } from './ContactForm';
 import { ContactInfo } from './ContactInfo';
 import type { ContactDetail, LeadSubmissionResult } from './types';
 
@@ -48,29 +48,17 @@ export interface ContactPageProps {
 // ============================================================================
 
 /**
- * ContactPage - Pre-configured contact page component
+ * ContactPageBase - Pre-configured contact page component
  *
- * Ready to use in any project with sensible defaults.
+ * NOTE: Use ContactPage from index.ts which is dynamically imported (ssr: false)
  *
  * @example
  * ```tsx
- * // Minimal usage - just drop it in
+ * import { ContactPage } from '@djangocfg/layouts';
  * <ContactPage />
- *
- * // With custom title
- * <ContactPage
- *   title={<>Contact <span className="text-primary">Us</span></>}
- *   subtitle="We'd love to hear from you"
- * />
- *
- * // Override defaults
- * <ContactPage
- *   apiUrl="https://api.myproject.com"
- *   email="hello@myproject.com"
- * />
  * ```
  */
-export function ContactPage({
+export function ContactPageBase({
   apiUrl = DEFAULT_CONFIG.apiUrl,
   email = DEFAULT_CONFIG.email,
   calendlyUrl = DEFAULT_CONFIG.calendly,

package/src/snippets/ContactForm/dynamic.tsx

@@ -0,0 +1,55 @@
+/**
+ * Dynamic ContactForm components (ssr: false)
+ *
+ * Avoids hydration mismatch when using localStorage for form drafts.
+ * Components are loaded client-side only.
+ */
+
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@djangocfg/ui';
+import type { ContactFormProps } from './ContactForm';
+import type { ContactPageProps } from './ContactPage';
+
+function ContactFormSkeleton() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="w-full h-10" />
+      <Skeleton className="w-full h-10" />
+      <Skeleton className="w-full h-10" />
+      <Skeleton className="w-full h-24" />
+      <Skeleton className="w-full h-10" />
+    </div>
+  );
+}
+
+function ContactPageSkeleton() {
+  return (
+    <div>
+      <div className="text-center mb-8 md:mb-12">
+        <Skeleton className="w-64 h-12 mx-auto mb-4" />
+        <Skeleton className="w-96 h-6 mx-auto" />
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2">
+          <ContactFormSkeleton />
+        </div>
+        <div className="space-y-4">
+          <Skeleton className="w-full h-32" />
+          <Skeleton className="w-full h-24" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const ContactForm = dynamic<ContactFormProps>(
+  () => import('./ContactForm').then((mod) => mod.ContactFormBase),
+  { ssr: false, loading: () => <ContactFormSkeleton /> }
+);
+
+export const ContactPage = dynamic<ContactPageProps>(
+  () => import('./ContactPage').then((mod) => mod.ContactPageBase),
+  { ssr: false, loading: () => <ContactPageSkeleton /> }
+);

package/src/snippets/ContactForm/index.ts

@@ -2,10 +2,13 @@
 // ContactForm - Contact form using Django-CFG Lead API
 // ============================================================================
 
-// Components
-export { ContactForm, type ContactFormProps } from './ContactForm';
+// Components (dynamic import, ssr: false - no hydration issues)
+export { ContactForm, ContactPage } from './dynamic';
 export { ContactInfo } from './ContactInfo';
-export { ContactPage, type ContactPageProps } from './ContactPage';
+
+// Types
+export type { ContactFormProps } from './ContactForm';
+export type { ContactPageProps } from './ContactPage';
 
 // Provider & Hooks
 export {