blocks-dusted 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocks-dusted",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Manifest-driven CLI for installing reusable Payload CMS blocks.",
   "type": "module",
   "bin": {
@@ -37,4 +37,4 @@
   },
   "homepage": "https://github.com/Hadizainal/blocks-dusted#readme",
   "license": "MIT"
-}
+}

package/src/commands/add.js

@@ -44,7 +44,7 @@ export async function addTemplate({
     const missingRequired = checks.missingRequirements ?? []
     if (missingRequired.length > 0) {
       throw new Error(
-        `Required project files are missing:\n${missingRequired.map((check) => `- ${check.path}: ${check.reason}`).join('\n')}`,
+        `Required project files are missing:\n${missingRequired.map(formatMissingRequirement).join('\n')}`,
       )
     }
   }
@@ -353,6 +353,11 @@ export async function addTemplate({
   )
 }
 
+function formatMissingRequirement(check) {
+  const resolution = check.resolution ? `\n  Resolve: ${check.resolution}` : ''
+  return `- ${check.path}: ${check.reason}${resolution}`
+}
+
 function collectionRegistrationResults({ isCollectionTemplate, manifest, action }) {
   if (!isCollectionTemplate) {
     return [{ status: 'skipped', reason: `${manifest.type} templates do not use Payload config collection registration` }]

package/templates/components/HeaderDD02/README.md

@@ -43,3 +43,9 @@ Do not modify database records automatically.
 Do not run destructive migrations.
 Do not remove the existing header until the replacement is verified.
 ```
+
+## Bundled shared UI primitives
+
+HeaderDD02 includes shared templates for `src/components/ui/navigation-menu.tsx`, `src/components/animate-ui/components/animate/tooltip.tsx`, `src/components/animate-ui/primitives/animate/tooltip.tsx`, `src/components/animate-ui/primitives/animate/slot.tsx`, and `src/lib/get-strict-context.tsx`. The installer copies them only when missing and preserves existing target files.
+
+If package dependencies are missing, run the install command printed by the CLI, for example `pnpm add @radix-ui/react-navigation-menu class-variance-authority motion @floating-ui/react`.

package/templates/components/HeaderDD02/manifest.json

@@ -56,6 +56,18 @@
     },
     {
       "name": "lucide-react"
+    },
+    {
+      "name": "@radix-ui/react-navigation-menu"
+    },
+    {
+      "name": "class-variance-authority"
+    },
+    {
+      "name": "motion"
+    },
+    {
+      "name": "@floating-ui/react"
     }
   ],
   "requiredProjectFiles": [
@@ -71,10 +83,6 @@
       "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."
@@ -82,10 +90,6 @@
     {
       "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": {
@@ -101,7 +105,8 @@
     "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."
+    "Wire `HeaderDD02` into the target Header global or render it directly after confirming the target project will not render two headers.",
+    "HeaderDD02 can install its missing NavigationMenu and animate-ui tooltip primitives as shared files. Existing target files are preserved and skipped instead of overwritten."
   ],
   "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.",
@@ -110,14 +115,48 @@
     "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."
+    "Wire `HeaderDD02` into the target Header global or render it directly after confirming the target project will not render two headers.",
+    "HeaderDD02 can install its missing NavigationMenu and animate-ui tooltip primitives as shared files. Existing target files are preserved and skipped instead of overwritten."
   ],
   "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."
+    "Parent Header files were audited but excluded because the reusable export targets Header02 only, not the multi-variant app header shell.",
+    "NavigationMenu and animate-ui tooltip primitives are bundled as shared files because HeaderDD02 imports them directly."
   ],
   "backupExistingDestination": true,
   "exportName": "HeaderDD02",
-  "interfaceName": "HeaderDD02"
+  "interfaceName": "HeaderDD02",
+  "sharedFiles": [
+    {
+      "from": "templates/shared/components/ui/navigation-menu.tsx",
+      "to": "src/components/ui/navigation-menu.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/animate-ui/components/animate/tooltip.tsx",
+      "to": "src/components/animate-ui/components/animate/tooltip.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/animate-ui/primitives/animate/tooltip.tsx",
+      "to": "src/components/animate-ui/primitives/animate/tooltip.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/animate-ui/primitives/animate/slot.tsx",
+      "to": "src/components/animate-ui/primitives/animate/slot.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/lib/get-strict-context.tsx",
+      "to": "src/lib/get-strict-context.tsx",
+      "required": true,
+      "safeToCopy": true
+    }
+  ]
 }

package/templates/shared/components/animate-ui/components/animate/tooltip.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import * as motion from 'motion/react-client';
+
+import {
+  TooltipProvider as TooltipProviderPrimitive,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+  TooltipContent as TooltipContentPrimitive,
+  TooltipArrow as TooltipArrowPrimitive,
+  type TooltipProviderProps as TooltipProviderPrimitiveProps,
+  type TooltipProps as TooltipPrimitiveProps,
+  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
+  type TooltipContentProps as TooltipContentPrimitiveProps,
+} from '@/components/animate-ui/primitives/animate/tooltip';
+import { cn } from '@/utilities/ui';
+
+type TooltipProviderProps = TooltipProviderPrimitiveProps;
+
+function TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {
+  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;
+}
+
+type TooltipProps = TooltipPrimitiveProps;
+
+function Tooltip({ sideOffset = 10, ...props }: TooltipProps) {
+  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;
+}
+
+type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
+
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  return <TooltipTriggerPrimitive {...props} />;
+}
+
+type TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {
+  children: React.ReactNode;
+  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+};
+
+function TooltipContent({
+  className,
+  children,
+  layout = 'preserve-aspect',
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipContentPrimitive
+      className={cn(
+        'z-50 w-fit bg-primary text-primary-foreground rounded-md',
+        className,
+      )}
+      {...props}
+    >
+      <motion.div className="overflow-hidden px-3 py-1.5 text-xs text-balance">
+        <motion.div layout={layout}>{children}</motion.div>
+      </motion.div>
+      <TooltipArrowPrimitive
+        className="fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]"
+        tipRadius={2}
+      />
+    </TooltipContentPrimitive>
+  );
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipContentProps,
+};

package/templates/shared/components/animate-ui/primitives/animate/slot.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { motion, isMotionComponent, type HTMLMotionProps } from 'motion/react';
+import { cn } from '@/utilities/ui';
+
+type AnyProps = Record<string, unknown>;
+
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
+  HTMLMotionProps<keyof HTMLElementTagNameMap>,
+  'ref'
+> & { ref?: React.Ref<T> };
+
+type WithAsChild<Base extends object> =
+  | (Base & { asChild: true; children: React.ReactElement })
+  | (Base & { asChild?: false | undefined });
+
+type SlotProps<T extends HTMLElement = HTMLElement> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any;
+} & DOMMotionProps<T>;
+
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        (ref as React.RefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+function mergeProps<T extends HTMLElement>(
+  childProps: AnyProps,
+  slotProps: DOMMotionProps<T>,
+): AnyProps {
+  const merged: AnyProps = { ...childProps, ...slotProps };
+
+  if (childProps.className || slotProps.className) {
+    merged.className = cn(
+      childProps.className as string,
+      slotProps.className as string,
+    );
+  }
+
+  if (childProps.style || slotProps.style) {
+    merged.style = {
+      ...(childProps.style as React.CSSProperties),
+      ...(slotProps.style as React.CSSProperties),
+    };
+  }
+
+  return merged;
+}
+
+function Slot<T extends HTMLElement = HTMLElement>({
+  children,
+  ref,
+  ...props
+}: SlotProps<T>) {
+  const isAlreadyMotion =
+    typeof children.type === 'object' &&
+    children.type !== null &&
+    isMotionComponent(children.type);
+
+  const Base = React.useMemo(
+    () =>
+      isAlreadyMotion
+        ? (children.type as React.ElementType)
+        : motion.create(children.type as React.ElementType),
+    [isAlreadyMotion, children.type],
+  );
+
+  if (!React.isValidElement(children)) return null;
+
+  const { ref: childRef, ...childProps } = children.props as AnyProps;
+
+  const mergedProps = mergeProps(childProps, props);
+
+  return (
+    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
+  );
+}
+
+export {
+  Slot,
+  type SlotProps,
+  type WithAsChild,
+  type DOMMotionProps,
+  type AnyProps,
+};

package/templates/shared/components/animate-ui/primitives/animate/tooltip.tsx

@@ -0,0 +1,547 @@
+'use client'
+
+import * as React from 'react'
+import {
+  motion,
+  AnimatePresence,
+  LayoutGroup,
+  type Transition,
+  type HTMLMotionProps
+} from 'motion/react'
+import {
+  useFloating,
+  autoUpdate,
+  offset as floatingOffset,
+  flip,
+  shift,
+  arrow as floatingArrow,
+  FloatingPortal,
+  FloatingArrow,
+  type UseFloatingReturn
+} from '@floating-ui/react'
+
+import { getStrictContext } from '@/lib/get-strict-context'
+import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot'
+
+type Side = 'top' | 'bottom' | 'left' | 'right'
+type Align = 'start' | 'center' | 'end'
+
+type TooltipData = {
+  contentProps: HTMLMotionProps<'div'>
+  contentAsChild: boolean
+  rect: DOMRect
+  side: Side
+  sideOffset: number
+  align: Align
+  alignOffset: number
+  id: string
+}
+
+type GlobalTooltipContextType = {
+  showTooltip: (data: TooltipData) => void
+  hideTooltip: () => void
+  hideImmediate: () => void
+  currentTooltip: TooltipData | null
+  transition: Transition
+  globalId: string
+  setReferenceEl: (el: HTMLElement | null) => void
+  referenceElRef: React.RefObject<HTMLElement | null>
+}
+
+const [GlobalTooltipProvider, useGlobalTooltip] =
+  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider')
+
+type TooltipContextType = {
+  props: HTMLMotionProps<'div'>
+  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>
+  asChild: boolean
+  setAsChild: React.Dispatch<React.SetStateAction<boolean>>
+  side: Side
+  sideOffset: number
+  align: Align
+  alignOffset: number
+  id: string
+}
+
+const [LocalTooltipProvider, useTooltip] =
+  getStrictContext<TooltipContextType>('LocalTooltipProvider')
+
+type TooltipPosition = { x: number; y: number }
+
+function getResolvedSide(placement: Side | `${Side}-${Align}`) {
+  if (placement.includes('-')) {
+    return placement.split('-')[0] as Side
+  }
+  return placement as Side
+}
+
+function initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {
+  if (side === 'top') return { y: 15 }
+  if (side === 'bottom') return { y: -15 }
+  if (side === 'left') return { x: 15 }
+  return { x: -15 }
+}
+
+type TooltipProviderProps = {
+  children: React.ReactNode
+  id?: string
+  openDelay?: number
+  closeDelay?: number
+  transition?: Transition
+}
+
+function TooltipProvider({
+  children,
+  id,
+  openDelay = 700,
+  closeDelay = 300,
+  transition = { type: 'spring', stiffness: 300, damping: 35 }
+}: TooltipProviderProps) {
+  const globalId = React.useId()
+  const [currentTooltip, setCurrentTooltip] = React.useState<TooltipData | null>(null)
+  const timeoutRef = React.useRef<number | null>(null)
+  const lastCloseTimeRef = React.useRef<number>(0)
+  const referenceElRef = React.useRef<HTMLElement | null>(null)
+
+  const showTooltip = React.useCallback(
+    (data: TooltipData) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      if (currentTooltip !== null) {
+        setCurrentTooltip(data)
+        return
+      }
+      const now = Date.now()
+      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay
+      timeoutRef.current = window.setTimeout(() => setCurrentTooltip(data), delay)
+    },
+    [openDelay, closeDelay, currentTooltip]
+  )
+
+  const hideTooltip = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = window.setTimeout(() => {
+      setCurrentTooltip(null)
+      lastCloseTimeRef.current = Date.now()
+    }, closeDelay)
+  }, [closeDelay])
+
+  const hideImmediate = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    setCurrentTooltip(null)
+    lastCloseTimeRef.current = Date.now()
+  }, [])
+
+  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {
+    referenceElRef.current = el
+  }, [])
+
+  React.useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hideImmediate()
+    }
+    window.addEventListener('keydown', onKeyDown, true)
+    window.addEventListener('scroll', hideImmediate, true)
+    window.addEventListener('resize', hideImmediate, true)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, true)
+      window.removeEventListener('scroll', hideImmediate, true)
+      window.removeEventListener('resize', hideImmediate, true)
+    }
+  }, [hideImmediate])
+
+  return (
+    <GlobalTooltipProvider
+      value={{
+        showTooltip,
+        hideTooltip,
+        hideImmediate,
+        currentTooltip,
+        transition,
+        globalId: id ?? globalId,
+        setReferenceEl,
+        referenceElRef
+      }}
+    >
+      <LayoutGroup>{children}</LayoutGroup>
+      <TooltipOverlay />
+    </GlobalTooltipProvider>
+  )
+}
+
+type RenderedTooltipContextType = {
+  side: Side
+  align: Align
+  open: boolean
+}
+
+const [RenderedTooltipProvider, useRenderedTooltip] =
+  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext')
+
+type FloatingContextType = {
+  context: UseFloatingReturn['context']
+  arrowRef: React.RefObject<SVGSVGElement | null>
+}
+
+const [FloatingProvider, useFloatingContext] =
+  getStrictContext<FloatingContextType>('FloatingContext')
+
+const MotionTooltipArrow = motion.create(FloatingArrow)
+
+type TooltipArrowProps = Omit<React.ComponentProps<typeof MotionTooltipArrow>, 'context'> & {
+  withTransition?: boolean
+}
+
+function TooltipArrow({ ref, withTransition = true, ...props }: TooltipArrowProps) {
+  const { side, align, open } = useRenderedTooltip()
+  const { context, arrowRef } = useFloatingContext()
+  const { transition, globalId } = useGlobalTooltip()
+  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement)
+
+  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side]
+
+  return (
+    <MotionTooltipArrow
+      ref={arrowRef}
+      context={context}
+      data-state={open ? 'open' : 'closed'}
+      data-side={side}
+      data-align={align}
+      data-slot="tooltip-arrow"
+      style={{ rotate: deg }}
+      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}
+      transition={withTransition ? transition : undefined}
+      {...props}
+    />
+  )
+}
+
+type TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>
+
+function TooltipPortal(props: TooltipPortalProps) {
+  return <FloatingPortal {...props} />
+}
+
+function TooltipOverlay() {
+  const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip()
+
+  const [rendered, setRendered] = React.useState<{
+    data: TooltipData | null
+    open: boolean
+  }>({ data: null, open: false })
+
+  const arrowRef = React.useRef<SVGSVGElement | null>(null)
+
+  const side = rendered.data?.side ?? 'top'
+  const align = rendered.data?.align ?? 'center'
+
+  const { refs, x, y, strategy, context, update } = useFloating({
+    placement: align === 'center' ? side : `${side}-${align}`,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      floatingOffset({
+        mainAxis: rendered.data?.sideOffset ?? 0,
+        crossAxis: rendered.data?.alignOffset ?? 0
+      }),
+      flip(),
+      shift({ padding: 8 }),
+      floatingArrow({ element: arrowRef })
+    ]
+  })
+
+  React.useEffect(() => {
+    if (currentTooltip) {
+      setRendered({ data: currentTooltip, open: true })
+    } else {
+      setRendered((p) => (p.data ? { ...p, open: false } : p))
+    }
+  }, [currentTooltip])
+
+  React.useLayoutEffect(() => {
+    if (referenceElRef.current) {
+      refs.setReference(referenceElRef.current)
+      update()
+    }
+  }, [referenceElRef, refs, update, rendered.data])
+
+  const ready = x != null && y != null
+  const Component = rendered.data?.contentAsChild ? Slot : motion.div
+  const resolvedSide = getResolvedSide(context.placement)
+
+  return (
+    <AnimatePresence mode="wait">
+      {rendered.data && ready && (
+        <TooltipPortal>
+          <div
+            ref={refs.setFloating}
+            data-slot="tooltip-overlay"
+            data-side={resolvedSide}
+            data-align={rendered.data.align}
+            data-state={rendered.open ? 'open' : 'closed'}
+            style={{
+              position: strategy,
+              top: 0,
+              left: 0,
+              zIndex: 50,
+              transform: `translate3d(${x!}px, ${y!}px, 0)`
+            }}
+          >
+            <FloatingProvider value={{ context, arrowRef }}>
+              <RenderedTooltipProvider
+                value={{
+                  side: resolvedSide,
+                  align: rendered.data.align,
+                  open: rendered.open
+                }}
+              >
+                <Component
+                  data-slot="tooltip-content"
+                  data-side={resolvedSide}
+                  data-align={rendered.data.align}
+                  data-state={rendered.open ? 'open' : 'closed'}
+                  layoutId={`tooltip-content-${globalId}`}
+                  initial={{
+                    opacity: 0,
+                    scale: 0,
+                    ...initialFromSide(rendered.data.side)
+                  }}
+                  animate={
+                    rendered.open
+                      ? { opacity: 1, scale: 1, x: 0, y: 0 }
+                      : {
+                          opacity: 0,
+                          scale: 0,
+                          ...initialFromSide(rendered.data.side)
+                        }
+                  }
+                  exit={{
+                    opacity: 0,
+                    scale: 0,
+                    ...initialFromSide(rendered.data.side)
+                  }}
+                  onAnimationComplete={() => {
+                    if (!rendered.open) setRendered({ data: null, open: false })
+                  }}
+                  transition={transition}
+                  {...rendered.data.contentProps}
+                  style={{
+                    position: 'relative',
+                    ...(rendered.data.contentProps?.style || {})
+                  }}
+                />
+              </RenderedTooltipProvider>
+            </FloatingProvider>
+          </div>
+        </TooltipPortal>
+      )}
+    </AnimatePresence>
+  )
+}
+
+type TooltipProps = {
+  children: React.ReactNode
+  side?: Side
+  sideOffset?: number
+  align?: Align
+  alignOffset?: number
+}
+
+function Tooltip({
+  children,
+  side = 'top',
+  sideOffset = 0,
+  align = 'center',
+  alignOffset = 0
+}: TooltipProps) {
+  const id = React.useId()
+  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({})
+  const [asChild, setAsChild] = React.useState(false)
+
+  return (
+    <LocalTooltipProvider
+      value={{
+        props,
+        setProps,
+        asChild,
+        setAsChild,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        id
+      }}
+    >
+      {children}
+    </LocalTooltipProvider>
+  )
+}
+
+type TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>
+
+function shallowEqualWithoutChildren(a?: HTMLMotionProps<'div'>, b?: HTMLMotionProps<'div'>) {
+  if (a === b) return true
+  if (!a || !b) return false
+  const keysA = Object.keys(a).filter((k) => k !== 'children')
+  const keysB = Object.keys(b).filter((k) => k !== 'children')
+  if (keysA.length !== keysB.length) return false
+  for (const k of keysA) {
+    if ((a as Record<string, unknown>)[k] !== (b as Record<string, unknown>)[k]) return false
+  }
+  return true
+}
+
+function TooltipContent({ asChild = false, ...props }: TooltipContentProps) {
+  const { setProps, setAsChild } = useTooltip()
+  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(undefined)
+
+  React.useEffect(() => {
+    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
+      lastPropsRef.current = props
+      setProps(props)
+    }
+  }, [props, setProps])
+
+  React.useEffect(() => {
+    setAsChild(asChild)
+  }, [asChild, setAsChild])
+
+  return null
+}
+
+type TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>
+
+function TooltipTrigger({
+  ref,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onPointerDown,
+  asChild = false,
+  ...props
+}: TooltipTriggerProps) {
+  const {
+    props: contentProps,
+    asChild: contentAsChild,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    id
+  } = useTooltip()
+  const { showTooltip, hideTooltip, hideImmediate, currentTooltip, setReferenceEl } =
+    useGlobalTooltip()
+
+  const triggerRef = React.useRef<HTMLDivElement>(null)
+  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement)
+
+  const suppressNextFocusRef = React.useRef(false)
+
+  const handleOpen = React.useCallback(() => {
+    if (!triggerRef.current) return
+    setReferenceEl(triggerRef.current)
+    const rect = triggerRef.current.getBoundingClientRect()
+    showTooltip({
+      contentProps,
+      contentAsChild,
+      rect,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      id
+    })
+  }, [
+    showTooltip,
+    setReferenceEl,
+    contentProps,
+    contentAsChild,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    id
+  ])
+
+  const handlePointerDown = React.useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      onPointerDown?.(e)
+      if (currentTooltip?.id === id) {
+        suppressNextFocusRef.current = true
+        hideImmediate()
+        Promise.resolve().then(() => {
+          suppressNextFocusRef.current = false
+        })
+      }
+    },
+    [onPointerDown, currentTooltip?.id, id, hideImmediate]
+  )
+
+  const handleMouseEnter = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseEnter?.(e)
+      handleOpen()
+    },
+    [handleOpen, onMouseEnter]
+  )
+
+  const handleMouseLeave = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeave?.(e)
+      hideTooltip()
+    },
+    [hideTooltip, onMouseLeave]
+  )
+
+  const handleFocus = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onFocus?.(e)
+      if (suppressNextFocusRef.current) return
+      handleOpen()
+    },
+    [handleOpen, onFocus]
+  )
+
+  const handleBlur = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onBlur?.(e)
+      hideTooltip()
+    },
+    [hideTooltip, onBlur]
+  )
+
+  const Component = asChild ? Slot : motion.div
+
+  return (
+    <Component
+      ref={triggerRef}
+      onPointerDown={handlePointerDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      data-slot="tooltip-trigger"
+      data-side={side}
+      data-align={align}
+      data-state={currentTooltip?.id === id ? 'open' : 'closed'}
+      {...props}
+    />
+  )
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipArrow,
+  useGlobalTooltip,
+  useTooltip,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipContentProps,
+  type TooltipTriggerProps,
+  type TooltipArrowProps,
+  type TooltipPosition,
+  type GlobalTooltipContextType,
+  type TooltipContextType
+}

package/templates/shared/components/ui/navigation-menu.tsx

@@ -0,0 +1,161 @@
+// Todo: Fix dropdown motion issue on first open (looks like a flash) - https://reui.io/docs/navigation-menu
+'use client'
+
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cn } from '@/utilities/ui'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center z-10',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'cursor-pointer group inline-flex h-9 w-max items-center justify-center px-4 py-2 text-sm font-medium disabled:pointer-events-none disabled:opacity-50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 text-stone-200 dark:text-stone-200'
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ms-1 size-3.5 opacity-60 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+        '!bg-[linear-gradient(90deg,_rgba(26,_26,_30,_.8),_rgba(25,_22,_38,_.85))] backdrop-blur-md',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:left-0 group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu: group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-1.5 origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        'NavigationMenuPrimitive flex flex-col gap-1 text-sm transition-colors focus:outline-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn('z-[1] flex h-1.5 items-end justify-center overflow-hidden', className)}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle
+}

package/templates/shared/lib/get-strict-context.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+  ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => React.JSX.Element,
+  () => T,
+] {
+  const Context = React.createContext<T | undefined>(undefined);
+
+  const Provider = ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => <Context.Provider value={value}>{children}</Context.Provider>;
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context);
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);
+    }
+    return ctx;
+  };
+
+  return [Provider, useSafeContext] as const;
+}
+
+export { getStrictContext };