blocks-dusted 0.1.2 → 0.1.3

package/templates/components/HeaderDD02/index.tsx

@@ -0,0 +1,517 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import React, { useEffect, useMemo, useState, useRef } from 'react'
+import Link from 'next/link'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger
+} from '@/components/ui/navigation-menu'
+import { CircleCheck, CircleHelp, Circle, Home, User, Settings, Mail, Phone } from 'lucide-react'
+import type { Header as HeaderType } from '@/payload-types'
+import RichText from '@/components/RichText'
+import { cn } from '@/utilities/ui'
+
+import * as LucideIcons from 'lucide-react'
+import { motion } from 'framer-motion'
+
+import MobileBottomNav from './MobileBottomNav'
+
+interface HeaderDD02Props {
+  data?: HeaderType
+  variant?: 'default' | 'centered' | 'fullwidth'
+  sticky?: boolean
+}
+
+const iconMap = {
+  CircleHelp,
+  Circle,
+  CircleCheck,
+  Home,
+  User,
+  Settings,
+  Mail,
+  Phone
+}
+
+type CartVisibilityMode = 'always' | 'hide' | 'show'
+
+type CartVisibilityEntry = {
+  path?: string | null
+}
+
+type CartVisibilityConfig = {
+  mode?: CartVisibilityMode
+  paths?: CartVisibilityEntry[]
+}
+
+type HeaderDD02Data = HeaderType['header02'] & {
+  cartButtonVisibility?: CartVisibilityConfig
+}
+
+const normalizePath = (value?: string | null) => {
+  if (!value) return '/'
+  const [base] = value.split(/[?#]/)
+  if (!base) return '/'
+  if (base !== '/' && base.endsWith('/')) {
+    return base.slice(0, -1)
+  }
+  return base || '/'
+}
+
+// Helper to extract href from link field
+const getLinkHref = (link: any): string => {
+  if (!link) return '#'
+  if (link.type === 'reference') {
+    const value = link.reference?.value
+    if (typeof value === 'object' && 'slug' in value) {
+      return `/${value.slug}`
+    }
+  }
+  return link.url || '#'
+}
+
+const resolveCustomIconUrl = (customIcon?: any): string | null => {
+  if (!customIcon) return null
+  if (typeof customIcon === 'string') return customIcon
+  if (typeof customIcon === 'number') return null
+  if (typeof customIcon === 'object' && 'url' in customIcon && typeof customIcon.url === 'string') {
+    return customIcon.url
+  }
+  return null
+}
+
+// Helper to render icon from link field or fallback
+const renderIcon = (iconName?: string | null, className?: string, customIcon?: any) => {
+  const customUrl = resolveCustomIconUrl(customIcon)
+  if (customUrl) {
+    return (
+      <img
+        src={customUrl}
+        className={className || 'size-4'}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+      />
+    )
+  }
+
+  if (!iconName) return null
+  const IconComponent = (LucideIcons as any)[iconName]
+  if (!IconComponent) return null
+  return <IconComponent className={className || 'size-4'} />
+}
+
+const dropdownStyles = `
+  .dropdown-richtext-content {
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  :where(.navigation-menu-viewport) {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    perspective: 2000px;
+    transform-origin: top center;
+  }
+
+  .NavigationMenuContent {
+    position: relative;
+    top: 0;
+    left: 0;
+    animation-duration: 250ms;
+    max-height: var(--radix-navigation-menu-viewport-height);
+    overflow: auto;
+  }
+`
+
+function ListItem({
+  title,
+  children,
+  href,
+  className,
+  icon,
+  iconPosition = 'before'
+}: {
+  title: string
+  children?: React.ReactNode
+  href: string
+  className?: string
+  icon?: React.ReactNode
+  iconPosition?: 'before' | 'after'
+}) {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <Link
+          href={href}
+          className={cn(
+            'block select-none space-y-1 no-underline outline-none transition-colors hover:bg-zinc-800/50 duration-300 rounded-sm hover:text-accent  focus:bg-accent focus:text-stone-200 py-2 px-3',
+            className
+          )}
+        >
+          <div className="text-sm font-medium leading-none flex items-center gap-2">
+            {icon && iconPosition === 'before' && icon}
+            {title}
+            {icon && iconPosition === 'after' && icon}
+          </div>
+          {children && (
+            <p
+              className="line-clamp-2 text-xs leading-snug text-stone-400 mt-0 !pt-1 -translate-y-2"
+              style={{ lineHeight: '1.3' }}
+            >
+              {children}
+            </p>
+          )}
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
+
+function ListItemWithIcon({
+  title,
+  href,
+  icon,
+  className
+}: {
+  title: string
+  href: string
+  icon: string
+  className?: string
+}) {
+  const IconComponent = iconMap[icon as keyof typeof iconMap]
+
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <Link
+          href={href}
+          className={cn(
+            'flex items-center gap-2 select-none no-underline outline-none transition-colors hover:bg-accent hover:text-stone-200 focus:bg-accent focus:text-stone-200 py-2 px-3',
+            className
+          )}
+        >
+          {IconComponent && <IconComponent className="size-4" />}
+          <span className="text-sm font-medium leading-none">{title}</span>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
+
+export default function HeaderDD02({ data, variant = 'default', sticky = true }: HeaderDD02Props) {
+  // Get scroll settings from data with defaults
+  const enableHideOnScroll = data?.header02?.enableHideOnScroll ?? true
+  const scrollThreshold = data?.header02?.scrollThreshold ?? 100
+  const animationDuration = data?.header02?.animationDuration ?? 0.3
+  const [forceOpen, setForceOpen] = useState(true)
+
+  // State for handling scroll behavior
+  const [isHidden, setIsHidden] = useState(false)
+  const lastScrollY = useRef(0)
+  const pathname = usePathname()
+  const normalizedCurrentPathname = useMemo(() => normalizePath(pathname), [pathname])
+  const header02Data = data?.header02 as HeaderDD02Data | undefined
+  const cartVisibilityConfig =
+    header02Data?.cartButtonVisibility ?? (data as any)?.header02CartButtonVisibility
+  const normalizedPathname = useMemo(() => normalizePath(pathname), [pathname])
+  const cartVisibilityPaths = useMemo(
+    () =>
+      (cartVisibilityConfig?.paths ?? [])
+        .map((entry) => normalizePath(entry?.path))
+        .filter((path): path is string => Boolean(path)),
+    [cartVisibilityConfig?.paths]
+  )
+  const cartVisibilityMode = cartVisibilityConfig?.mode ?? 'always'
+  const showCartButton = useMemo(() => {
+    if (cartVisibilityMode === 'always') return true
+    const matches = cartVisibilityPaths.includes(normalizedPathname)
+    return cartVisibilityMode === 'hide' ? !matches : matches
+  }, [cartVisibilityMode, cartVisibilityPaths, normalizedPathname])
+
+  // Effect for scroll hide/show behavior
+  useEffect(() => {
+    if (!enableHideOnScroll) return
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      setIsHidden(currentScrollY > lastScrollY.current && currentScrollY > scrollThreshold)
+      lastScrollY.current = currentScrollY
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [enableHideOnScroll, scrollThreshold])
+
+  // Extract navItems from header02 data
+  const navItems = data?.header02?.navItems || []
+
+  return (
+    <>
+      <style jsx global>
+        {dropdownStyles}
+      </style>
+      {/* Desktop Navigation - Hidden on mobile */}
+      <header className="header-02 fixed container left-0 right-0 mx-auto w-screen mt-2 justify-between hidden md:flex">
+        <motion.nav
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: enableHideOnScroll && isHidden ? -100 : 0 }}
+          transition={{ duration: animationDuration }}
+          className={`navbar fixed top-0 z-50 right-0 ${variant === 'default' ? 'text-left' : ''} ${sticky ? 'sticky top-0 z-50' : ''} transition-transform duration-300 ease-out`}
+          id="topnav"
+        >
+          <div className="nav">
+            <NavigationMenu
+              viewport={false}
+              className="header02-navigation-menu shadow-glass dark:border-neutral-700 !flex w-full items-center justify-between rounded-2xl border px-5 py-0 pr-2.5 backdrop-blur-md relative"
+            >
+              <NavigationMenuList className="ml-2 gap-4 md:gap-6 flex">
+                {navItems.map((navItem, index) => {
+                  // Simple Link - works
+                  if (navItem.type === 'link') {
+                    const href = getLinkHref(navItem.link)
+                    const normalizedHref = normalizePath(href)
+                    const isActive = normalizedHref === normalizedCurrentPathname
+                    const icon = renderIcon(navItem.link?.icon, undefined, navItem.link?.customIcon)
+                    const iconPosition = navItem.link?.iconPosition || 'before'
+                    const showLabel = navItem.showLabel ?? true
+                    return (
+                      <NavigationMenuItem key={index}>
+                        <NavigationMenuLink
+                          asChild
+                          className={cn(
+                            'header02-nav-btn !flex flex-row items-center justify-center px-0 bg-transparent text-stone-200 dark:text-stone-200 gap-0 text-sm transition-colors focus:outline-none',
+                            isActive &&
+                              'header02-nav-btn-active text-stone-200 dark:text-stone-200 font-semibold'
+                          )}
+                        >
+                          <Link
+                            href={href}
+                            {...(navItem.link?.newTab
+                              ? { target: '_blank', rel: 'noopener noreferrer' }
+                              : {})}
+                            className="flex items-center gap-1 h-[2.5rem] card-bottom-lit"
+                          >
+                            {icon && iconPosition === 'before' && icon}
+                            {showLabel && navItem.link?.label}
+                            {icon && iconPosition === 'after' && icon}
+                          </Link>
+                        </NavigationMenuLink>
+                      </NavigationMenuItem>
+                    )
+                  }
+
+                  // Dropdown with RichText + Links (Variant 1) - works
+                  if (navItem.type === 'dropdown-richtext') {
+                    const triggerIcon = renderIcon(navItem.triggerIcon)
+                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                    return (
+                      <NavigationMenuItem
+                        key={index}
+                        className="header02-nav-btn card-bottom-lit bg-transparent text-stone-200 dark:text-stone-200"
+                      >
+                        <NavigationMenuTrigger className="flex items-center gap-2">
+                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {navItem.label}
+                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                        </NavigationMenuTrigger>
+                        <NavigationMenuContent className="header02-dropdown">
+                          <motion.div
+                            initial={{ opacity: 0, x: -50 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            className="border border-border rounded-md overflow-hidden grid gap-3 pt-0 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"
+                          >
+                            <div className="row-span-4">
+                              <NavigationMenuLink asChild>
+                                <div className="bg-card flex h-full w-full select-none flex-col justify-end rounded-none p-4 no-underline outline-none focus:shadow-md">
+                                  {navItem.richTextContent && (
+                                    <RichText
+                                      data={navItem.richTextContent}
+                                      enableGutter={false}
+                                      enableProse={false}
+                                      className="text-sm"
+                                    />
+                                  )}
+                                </div>
+                              </NavigationMenuLink>
+                            </div>
+                            <ul className="flex flex-col gap-2 pt-4 p-1">
+                              {navItem.v1_children?.map((child, childIndex) => (
+                                <ListItem
+                                  key={childIndex}
+                                  title={child.link?.label || ''}
+                                  href={getLinkHref(child.link)}
+                                  icon={renderIcon(
+                                    child.link?.icon,
+                                    undefined,
+                                    child.link?.customIcon
+                                  )}
+                                  iconPosition={child.link?.iconPosition || 'before'}
+                                  className="text-sm"
+                                >
+                                  {child.description}
+                                </ListItem>
+                              ))}
+                            </ul>
+                          </motion.div>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    )
+                  }
+
+                  // Dropdown - Single Column with Description (Variant 4) - works
+                  if (navItem.type === 'dropdown-single-desc') {
+                    const triggerIcon = renderIcon(navItem.triggerIcon)
+                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                    return (
+                      <NavigationMenuItem
+                        key={index}
+                        className="header02-nav-btn card-bottom-lit text-stone-200 dark:text-stone-200"
+                      >
+                        <NavigationMenuTrigger className="flex items-center gap-2">
+                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {navItem.label}
+                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                        </NavigationMenuTrigger>
+                        <NavigationMenuContent className="p-0">
+                          <motion.ul
+                            initial={{ opacity: 0, x: -50 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            className="bg-7 border border-border rounded-md overflow-hidden grid gap-3 p-1 w-fit md:w-[14rem]"
+                          >
+                            {navItem.v1_children?.map((child, childIndex) => (
+                              <ListItem
+                                key={childIndex}
+                                title={child.link?.label || ''}
+                                href={getLinkHref(child.link)}
+                                icon={renderIcon(
+                                  child.link?.icon,
+                                  undefined,
+                                  child.link?.customIcon
+                                )}
+                                iconPosition={child.link?.iconPosition || 'before'}
+                              >
+                                {child.description}
+                              </ListItem>
+                            ))}
+                          </motion.ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    )
+                  }
+
+                  // Dropdown - Single Column no Description (Variant 5) - works
+                  if (navItem.type === 'dropdown-single') {
+                    const triggerIcon = renderIcon(navItem.triggerIcon)
+                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                    return (
+                      <NavigationMenuItem
+                        key={index}
+                        className="header02-nav-btn card-bottom-lit bg-transparent text-stone-200 dark:text-stone-200"
+                      >
+                        <NavigationMenuTrigger className="flex items-center gap-2">
+                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {navItem.label}
+                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                        </NavigationMenuTrigger>
+                        <NavigationMenuContent className="p-0">
+                          <motion.ul
+                            initial={{ opacity: 0, x: -50 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            className="bg-7 border border-border rounded-md overflow-hidden flex flex-col gap-2 p-1 w-fit"
+                          >
+                            {navItem.v5_children?.map((child, childIndex) => (
+                              <ListItem
+                                key={childIndex}
+                                title={child.link?.label || ''}
+                                href={getLinkHref(child.link)}
+                                icon={renderIcon(
+                                  child.link?.icon,
+                                  undefined,
+                                  child.link?.customIcon
+                                )}
+                                iconPosition={child.link?.iconPosition || 'before'}
+                              />
+                            ))}
+                          </motion.ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    )
+                  }
+
+                  // Dropdown - Single Column with Icons (Variant 6) - works
+                  if (navItem.type === 'dropdown-icons') {
+                    const triggerIcon = renderIcon(navItem.triggerIcon)
+                    const triggerIconPosition = navItem.triggerIconPosition || 'before'
+                    return (
+                      <NavigationMenuItem
+                        key={index}
+                        className="header02-nav-btn card-bottom-lit bg-transparent text-stone-200 dark:text-stone-200"
+                      >
+                        <NavigationMenuTrigger className="flex items-center gap-2">
+                          {triggerIcon && triggerIconPosition === 'before' && triggerIcon}
+                          {navItem.label}
+                          {triggerIcon && triggerIconPosition === 'after' && triggerIcon}
+                        </NavigationMenuTrigger>
+                        <NavigationMenuContent className="p-0">
+                          <motion.ul
+                            initial={{ opacity: 0, x: -50 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ duration: 0.2, ease: 'easeOut' }}
+                            className="bg-7 border border-border rounded-md overflow-hidden flex flex-col gap-2 p-1 w-fit"
+                          >
+                            {navItem.v6_children?.map((child, childIndex) => {
+                              const icon = renderIcon(
+                                child.link?.icon,
+                                'size-4',
+                                child.link?.customIcon
+                              )
+                              const iconPosition = child.link?.iconPosition || 'before'
+                              return (
+                                <li key={childIndex}>
+                                  <NavigationMenuLink asChild>
+                                    <Link
+                                      href={getLinkHref(child.link)}
+                                      className={cn(
+                                        'flex items-center gap-2 select-none no-underline outline-none transition-colors rounded-sm group bg-8 hover:bg-zinc-600/50 !hover:text-stone-200 focus:bg-accent focus:text-stone-200 py-2 px-3'
+                                      )}
+                                    >
+                                      {' '}
+                                      {icon && iconPosition === 'before' && icon}
+                                      <span className="!text-xs group font-medium leading-none scale-75 !hover:text-stone-200 ">
+                                        {child.link?.label}
+                                      </span>
+                                      {icon && iconPosition === 'after' && icon}
+                                    </Link>
+                                  </NavigationMenuLink>
+                                </li>
+                              )
+                            })}
+                          </motion.ul>
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    )
+                  }
+                  return null
+                })}
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+        </motion.nav>
+      </header>
+
+      {/* Mobile Bottom Navigation - Visible only on mobile */}
+      <MobileBottomNav data={data} />
+    </>
+  )
+}

package/templates/components/HeaderDD02/manifest.json

@@ -0,0 +1,123 @@
+{
+  "type": "component",
+  "name": "HeaderDD02",
+  "label": "Header DD 02",
+  "sourceName": "Header02",
+  "portableName": "HeaderDD02",
+  "slug": "HeaderDD02",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/Header/variants/Header02",
+    "originalConfigExport": "header02Fields",
+    "originalComponentExport": "Header02",
+    "removedLexicalBlockImports": [
+      "@/blocks/AnimatedText/config",
+      "@/blocks/ButtonWithIcon/config",
+      "@/blocks/CounterBlock/config",
+      "@/blocks/MediaBlock/config"
+    ],
+    "excludedHeaderFiles": [
+      "src/Header/Component.tsx",
+      "src/Header/Component.client.tsx",
+      "src/Header/config.ts",
+      "src/Header/Nav/index.tsx",
+      "src/Header/hooks/revalidateHeader.ts"
+    ]
+  },
+  "files": [
+    {
+      "from": "index.tsx",
+      "to": "src/Header/variants/HeaderDD02/index.tsx"
+    },
+    {
+      "from": "MobileBottomNav/index.tsx",
+      "to": "src/Header/variants/HeaderDD02/MobileBottomNav/index.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/Header/variants/HeaderDD02/config.ts"
+    },
+    {
+      "from": "RowLabel.tsx",
+      "to": "src/Header/RowLabel.tsx"
+    },
+    {
+      "from": "README.md",
+      "to": "src/Header/variants/HeaderDD02/README.md"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "@payloadcms/richtext-lexical"
+    },
+    {
+      "name": "framer-motion"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "requiredProjectFiles": [
+    {
+      "path": "src/fields/defaultLexical.ts",
+      "reason": "HeaderDD02 richText fields use the target project's shared defaultLexical helper."
+    },
+    {
+      "path": "src/fields/link.ts",
+      "reason": "HeaderDD02 navigation fields reuse the target project's link field helper."
+    },
+    {
+      "path": "src/fields/lucide-icon-picker/field.ts",
+      "reason": "HeaderDD02 dropdown trigger icons reuse the shared icon picker field."
+    },
+    {
+      "path": "src/components/ui/navigation-menu.tsx",
+      "reason": "HeaderDD02 desktop navigation renders the target project's NavigationMenu primitives."
+    },
+    {
+      "path": "src/components/RichText/index.tsx",
+      "reason": "HeaderDD02 renders richTextContent and floatingContent through the target project's RichText renderer."
+    },
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "HeaderDD02 uses cn from @/utilities/ui."
+    },
+    {
+      "path": "src/components/animate-ui/components/animate/tooltip.tsx",
+      "reason": "HeaderDD02 MobileBottomNav uses the target tooltip primitives."
+    }
+  ],
+  "collectionRegistration": {
+    "enabled": false
+  },
+  "renderBlocksRegistration": {
+    "enabled": false
+  },
+  "manual": [
+    "This header uses the shared `defaultLexical` editor standard from `@/fields/defaultLexical`. Project-specific Lexical blocks are intentionally not bundled. The nested `BlocksFeature` uses an empty `blocks` array so each target project can register only the blocks it requires.",
+    "Removed source Lexical block imports: `@/blocks/AnimatedText/config`, `@/blocks/ButtonWithIcon/config`, `@/blocks/CounterBlock/config`, `@/blocks/MediaBlock/config`.",
+    "HeaderDD02 installs the Header02 runtime component, MobileBottomNav, Header02 field config, and the RowLabel admin helper only. Header01 and Header03 are not bundled.",
+    "This component template does not yet patch an existing active Header global, replace Header/Component.tsx, or inspect database-stored Header content automatically. Review the existing Header global before activation and back up active files before wiring the variant into the target project.",
+    "Inspect any existing target Header richText data before replacing an active Header schema. Do not apply the empty nested blocks extension point to stored content that already depends on registered block node types.",
+    "Verify the target `src/fields/defaultLexical.ts` exports a compatible `defaultLexical` helper that accepts `defaultLexical({ features: [] })` and does not inject unrelated project-specific blocks.",
+    "Wire `HeaderDD02` into the target Header global or render it directly after confirming the target project will not render two headers."
+  ],
+  "manualSteps": [
+    "This header uses the shared `defaultLexical` editor standard from `@/fields/defaultLexical`. Project-specific Lexical blocks are intentionally not bundled. The nested `BlocksFeature` uses an empty `blocks` array so each target project can register only the blocks it requires.",
+    "Removed source Lexical block imports: `@/blocks/AnimatedText/config`, `@/blocks/ButtonWithIcon/config`, `@/blocks/CounterBlock/config`, `@/blocks/MediaBlock/config`.",
+    "HeaderDD02 installs the Header02 runtime component, MobileBottomNav, Header02 field config, and the RowLabel admin helper only. Header01 and Header03 are not bundled.",
+    "This component template does not yet patch an existing active Header global, replace Header/Component.tsx, or inspect database-stored Header content automatically. Review the existing Header global before activation and back up active files before wiring the variant into the target project.",
+    "Inspect any existing target Header richText data before replacing an active Header schema. Do not apply the empty nested blocks extension point to stored content that already depends on registered block node types.",
+    "Verify the target `src/fields/defaultLexical.ts` exports a compatible `defaultLexical` helper that accepts `defaultLexical({ features: [] })` and does not inject unrelated project-specific blocks.",
+    "Wire `HeaderDD02` into the target Header global or render it directly after confirming the target project will not render two headers."
+  ],
+  "notes": [
+    "Converted from DesignsDustedv3 Header02 after tracing Header/variants/Header02/index.tsx and its direct imports.",
+    "Header02 styling is inline Tailwind class usage plus style jsx global blocks in index.tsx and MobileBottomNav/index.tsx; no separate Header02 stylesheet was imported.",
+    "Parent Header files were audited but excluded because the reusable export targets Header02 only, not the multi-variant app header shell."
+  ],
+  "backupExistingDestination": true,
+  "exportName": "HeaderDD02",
+  "interfaceName": "HeaderDD02"
+}