@hanzo/ui 5.0.0 → 5.0.2

package/primitives/mermaid.tsx

@@ -0,0 +1,196 @@
+// import { save } from '@tauri-apps/plugin-dialog'; // Not available in web environment
+// import * as fs from '@tauri-apps/plugin-fs'; // Not available in web environment
+import { RotateCcw, Download } from 'lucide-react';
+import mermaid from 'mermaid';
+import { FC, useEffect, useRef, useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { cn } from '../src/utils';
+import { Button } from './button';
+import { SyntaxHighlighterProps } from './markdown-preview';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+export type MermaidDiagramProps = SyntaxHighlighterProps & {
+  className?: string;
+  isRunning?: boolean;
+};
+
+mermaid.initialize({
+  startOnLoad: true,
+  mindmap: {
+    useWidth: 800,
+  },
+  theme: 'dark',
+  fontSize: 18,
+  darkMode: true,
+  fontFamily: 'Inter',
+});
+
+const generateId = () => `mermaid-${Math.random().toString(36).slice(2)}`;
+
+const downloadBlob = async (blob: Blob, filename: string) => {
+  // Web-compatible download (instead of Tauri)
+  try {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+    toast.success('Mermaid diagram saved successfully');
+  } catch (error) {
+    toast.error('Failed to download diagram');
+  }
+};
+
+export const MermaidDiagram: FC<MermaidDiagramProps> = ({
+  code,
+  className,
+  isRunning,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const lastCode = useRef<string | null>(null);
+  const [instance, setInstance] = useState<any>(null);
+
+  const isComplete = !isRunning;
+
+  const resetZoom = useCallback(() => {
+    instance?.fit();
+    instance?.center();
+  }, [instance]);
+
+  const downloadSVG = useCallback(() => {
+    if (ref.current) {
+      const svg = ref.current.innerHTML;
+      const blob = new Blob([svg], { type: 'image/svg+xml' });
+      void downloadBlob(blob, 'mermaid-diagram.svg');
+    }
+  }, []);
+
+  const enableZoom = useCallback(() => {
+    instance?.enablePan();
+    instance?.enableZoom();
+  }, [instance]);
+
+  const disableZoom = useCallback(() => {
+    instance?.disablePan();
+    instance?.disableZoom();
+  }, [instance]);
+
+  const handleFocus = useCallback(() => {
+    enableZoom();
+  }, [enableZoom]);
+
+  const handleBlur = useCallback(() => {
+    disableZoom();
+  }, [disableZoom]);
+
+  const handleClick = useCallback(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isComplete || !ref.current || !code) return;
+
+    if (lastCode.current === code) return;
+
+    void (async () => {
+      try {
+        const id = generateId();
+        const { svg } = await mermaid.render(id, code);
+
+        if (ref.current) {
+          ref.current.innerHTML = svg;
+
+          const svgElement = ref.current.querySelector('svg');
+          if (svgElement) {
+            svgElement.setAttribute('height', '100%');
+            svgElement.setAttribute('width', '100%');
+            svgElement.style.height = '100%';
+            svgElement.style.width = '100%';
+            svgElement.style.position = 'absolute';
+            svgElement.style.top = '0';
+            svgElement.style.left = '0';
+
+            // Dynamically import svg-pan-zoom only on client side
+            if (typeof window !== 'undefined') {
+              const svgPanZoomModule = await import('svg-pan-zoom');
+              const svgPanZoom = svgPanZoomModule.default || svgPanZoomModule;
+              
+              const panZoomInstance = svgPanZoom(svgElement);
+              panZoomInstance.fit();
+              panZoomInstance.center();
+              panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
+              panZoomInstance.disablePan();
+              panZoomInstance.disableZoom();
+              setInstance(panZoomInstance);
+            }
+          }
+        }
+
+        lastCode.current = code;
+      } catch (e) {
+        console.warn('Failed to render Mermaid diagram:', e);
+      }
+    })();
+  }, [code, isComplete]);
+
+  return (
+    <div className="relative">
+      <div className="absolute top-2 right-2 z-10 flex gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="tertiary"
+              size="icon"
+              onClick={resetZoom}
+              className="text-text-secondary"
+            >
+              <RotateCcw size={14} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Reset Zoom</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="tertiary"
+              size="icon"
+              onClick={downloadSVG}
+              className="text-text-secondary"
+            >
+              <Download size={14} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Download SVG</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+      <div
+        onClick={handleClick}
+        className="text-text-secondary bg-bg-quaternary absolute right-2 bottom-2 z-10 rounded px-2 py-1 text-xs"
+      >
+        Click to focus, then scroll to zoom & drag to pan
+      </div>
+      <div
+        ref={ref}
+        tabIndex={0}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onClick={handleClick}
+        className={cn(
+          'text-text-secondary bg-bg-quaternary focus:ring-opacity-50 relative w-full cursor-grab overflow-hidden rounded-b-lg p-4 py-10 text-center text-sm focus:cursor-grabbing focus:ring-2 focus:ring-blue-500 focus:outline-none',
+          className,
+        )}
+        style={{ width: '100%', minHeight: '400px' }}
+      >
+        Drawing diagram...
+      </div>
+    </div>
+  );
+};

package/primitives/navigation-menu.tsx

@@ -0,0 +1,147 @@
+'use client'
+import React from 'react'
+
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDown } from 'lucide-react'
+
+import { cn } from '../util'
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    {/* <NavigationMenuViewport /> */}
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      'group flex flex-1 list-none items-center justify-center space-x-1',
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Item
+    ref={ref}
+    className={cn("relative", className)}
+    {...props}
+  />
+))
+NavigationMenuItem.displayName = 'NavigationMenuItem'
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 ' + 
+  'text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent ' + 
+  ' focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 ' + 
+  'data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50'
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    {...props}
+  >
+    {children}{' '}
+    <ChevronDown
+      className='relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180'
+      aria-hidden='true'
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "right-0  absolute",
+      "absolute top-full w-fit bg-popover mt-[5px]",
+      "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 bg-background overflow-hidden rounded-md border",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn('absolute left-0 top-full flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border ',
+        'bg-background text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', 
+      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      className
+    )}
+    {...props}
+  >
+    <div className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md' />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

package/primitives/next/image.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import NextImage from 'next/image'
+
+// @ts-ignore
+const { ImageDef, Dimensions, MediaTransform } = {}
+import { constrain, cn, spreadToTransform } from '../../util'
+
+const Image: React.FC<{
+  def: ImageDef
+  constrainTo?: Dimensions
+  transform?: MediaTransform
+  fullWidth?: boolean
+  className?: string
+  preload?: boolean
+}> = ({
+  def,
+  constrainTo,
+  transform={},
+  fullWidth=false,
+  className='',
+  preload=false
+}) => {
+  
+  const {
+    src, 
+    alt: _alt, 
+    dim, 
+    sizes,
+    svgFillClass: _svgFillClass,
+  } = def
+
+  const toSpread: any = {}
+  if (fullWidth) {
+    toSpread.style = {
+      width: '100%',
+      height: 'auto',
+      ...spreadToTransform(transform)
+    }
+    if (constrainTo) {
+      toSpread.style.maxWidth = constrainTo.w  
+      toSpread.style.maxHeight = constrainTo.h  
+    }
+  }
+  else {
+    const resolved = constrainTo ? constrain(dim, constrainTo) : dim
+    toSpread.width = resolved.w
+    toSpread.height = resolved.h
+    toSpread.style = {...spreadToTransform(transform)}
+  } 
+
+  if (sizes) {
+    toSpread.sizes = sizes
+  }
+
+    // Note: cannot be spread (a Next thing)
+  let alt: string
+  if (_alt) {
+    alt = _alt
+  }
+  else {
+    const tokens = src.split('/')
+      // Something remotely meaningful
+    alt = (tokens.length > 0) ? tokens[tokens.length - 1] : src
+  }
+
+  const svgFillClass = _svgFillClass ?? ''
+
+  return (fullWidth) ? (
+    <div className='relative flex flex-col items-center justify-center w-full'>
+      <NextImage 
+        src={src} 
+        alt={alt} 
+        {...toSpread} 
+        priority={preload} 
+        loading={preload ? 'eager' : 'lazy'} 
+        className={cn(svgFillClass, className)}
+      />
+    </div>
+  ) : (
+    <NextImage 
+      src={src} 
+      alt={alt} 
+      {...toSpread} 
+      priority={preload} 
+      loading={preload ? 'eager' : 'lazy'} 
+      className={cn(svgFillClass, className)}
+    />   
+  )
+}
+
+export default Image

package/primitives/next/index.ts

@@ -0,0 +1,7 @@
+export { default as Image } from './image'
+export { default as InlineIcon } from './inline-icon' 
+export { default as LinkElement } from './link-element' 
+export { default as MDXLink } from './mdx-link'
+export { default as MediaStack } from './media-stack'
+export { default as NavItems } from './nav-items'
+export { default as YouTubeEmbed } from './youtube-embed'

package/primitives/next/inline-icon.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Image from 'next/image'
+
+interface InlineIconProps {
+  /**
+   * If a ReactNode is passed in, it should be set to 'w-full h-auto' so that it can be sized
+   * according to width of parent.
+   */
+  icon: React.ReactNode;
+  /** default should be handled by calling code. */
+  size?: number;
+  agent?: string;
+  className?: string;
+}
+
+const InlineIcon: React.FC<InlineIconProps> = ({
+  icon,
+  size,
+  agent,
+  className=''
+}) => {
+  if (!icon) return null
+
+  const phone = agent === 'phone'
+  if (typeof icon === 'string') {
+    const _size = (phone && size) ? (size * .75) : size
+    return (<Image src={icon} width={_size} height={_size} alt='icon' className={className}/>)
+  }
+  return (
+    <div className={className}>
+      {icon}
+    </div>
+  )
+}
+
+export default InlineIcon

package/primitives/next/link-element.tsx

@@ -0,0 +1,109 @@
+import React, { PropsWithChildren } from 'react'
+import Link from 'next/link'
+
+import type { LinkDef }  from '../../types'
+import { buttonVariants } from '../button'
+import { cn, type VariantProps } from '../../util'
+
+  /**
+   * If this is rendered directly (and not auto generated in a Block)
+   * and it has any children, title, icon, and iconAfter
+   * are ignore.
+   */
+const LinkElement: React.FC<
+  PropsWithChildren & 
+  VariantProps<typeof buttonVariants> & 
+{
+  def: LinkDef,
+
+    /** 
+     * Use to trigger other events in addition to the 
+     * link action itself. For example, to also close a drawer menu.  
+     */  
+  onClick?: () => void  
+
+    /** overrides def (eg, for title area)*/
+  icon?: React.ReactNode          
+    /** overrides def */
+  iconAfter?: boolean   
+  className?: string,
+}> = ({ 
+  def,
+    // DO NOT provide a default to any of the props that also appear in def!
+  onClick,
+  size, 
+  variant,
+  rounded,
+  icon,     
+  iconAfter, 
+  className = '',
+  children,
+} ) => {
+
+  const {
+    href,
+    newTab,
+    variant: defVariant,
+    size: defSize, 
+    rounded: defRounded, 
+    title
+  } = def
+
+  const linkProps: any = {}
+
+      // As per LinkDef docs
+  if (href.startsWith('http') || href.startsWith('mailto')) { 
+    linkProps.rel = 'noreferrer noopener'
+    if (newTab ?? true) {
+      linkProps.target = '_blank'
+    }
+  } 
+  else if (newTab) {
+    linkProps.target = '_blank'
+  }
+
+  const toSpread = {
+    href,
+    ...(onClick ? { onClick } : {}),
+    ...linkProps
+  }
+
+  const Contents: React.FC = () => {
+
+    if (React.Children.count(children) > 0) return children
+
+      // Props > def fields > defaults.
+    const _icon = (icon) ? icon : (def.icon) ? def.icon : undefined
+    const _iconAfter = (iconAfter) ? iconAfter : (def.iconAfter) ? def.iconAfter : false
+
+      // 'title' is not guaranteed as it could be an icon only button / link
+    return (<>
+      {_icon && !_iconAfter && (<div className='pr-1'>{_icon}</div>)}
+      {title && (<div>{title}</div>)}
+      {_icon && _iconAfter  && (<div className='pl-1'>{_icon}</div>)}
+    </>)
+  }
+
+  return (
+    <Link
+      className={cn(
+        buttonVariants({ 
+          variant: variant ?  variant : (defVariant ? defVariant : 'link'), 
+          size: (!defVariant || defVariant.includes('link') || variant?.includes('link'))  ? 
+            'link' 
+            : 
+            (size ? size : defSize),
+          rounded: rounded ?  rounded : (defRounded ? defRounded : 'md'), 
+        }), 
+          // This is a "label only" LinkDef.  cf: footer"
+        ((href.length > 0 || onClick) ? '' : 'pointer-events-none'),
+        className 
+      )}
+      {...toSpread}
+    >
+      <Contents />
+    </Link>
+  )
+}
+
+export default LinkElement

package/primitives/next/mdx-link.tsx

@@ -0,0 +1,22 @@
+import React,  { AnchorHTMLAttributes, type PropsWithChildren } from 'react'
+import Link from 'next/link'
+
+const MDXLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement> > = ({
+  href,
+  children,
+  ...rest
+}) => {
+
+    // internal link
+  if (href && (href.startsWith('/'))) {
+    return (
+      <Link href={href} {...rest}>
+        {children}
+      </Link>
+    )
+  }
+
+  return <a target="_blank" href={href} {...rest} >{children}</a>
+}
+
+export default MDXLink

package/primitives/next/media-stack.tsx

@@ -0,0 +1,52 @@
+'use client'
+import React from 'react'
+
+import { cn, constrain, spreadToTransform } from '../../util'
+import type { MediaStackDef, Dimensions } from '../../types'
+
+import Image from './image'
+import VideoPlayer from '../video-player'
+
+const MediaStack: React.FC<{
+  media: MediaStackDef
+  constrainTo?: Dimensions
+  clx?: string
+}> = ({
+  media,
+  constrainTo: cnst = {w: 250, h: 250},
+  clx=''
+}) => {
+  const {img, video, mediaTransform} = media
+
+  const transform = mediaTransform ?? {}
+
+  // Order of precedence: MP4 > Image
+  if (video) {
+    const dim = constrain(video.dim.md, cnst)
+    return (
+      <VideoPlayer 
+        className={clx} 
+        sources={video.sources} 
+        width={dim.w} 
+        height={dim.h} 
+        style={{
+          minHeight: dim.h, // prevents layout jumps
+          ...spreadToTransform(transform)
+        }}
+        {...video.videoProps} 
+      />
+    )
+  } 
+  return img ? ( 
+    <Image
+      def={img}
+      constrainTo={cnst} 
+      className={clx}
+      transform={transform}
+    />
+  ) : (
+    <div style={{width: cnst.w, height: cnst.h}} className={cn('bg-level-2', clx)} />
+  )
+}
+
+export default MediaStack