@hanzo/ui 3.4.4 → 3.5.1

package/blocks/components/image-block.tsx

@@ -3,13 +3,13 @@ import Image from 'next/image'
 
 import type { Dimensions } from '../../types'
 import type { ImageBlock } from '../def'
-import { resolveDimensions, containsToken, cn } from '../../util'
+import { constrain, containsToken, cn } from '../../util'
 
 import type BlockComponentProps from './block-component-props'
 
 
 const ImageBlockComponent: React.FC<BlockComponentProps & {
-  constraintTo?: {w: number, h: number}
+  constraintTo?: Dimensions
 }> = ({
   block,
   className='',
@@ -36,7 +36,7 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
 
   const toSpread: any = {}
   if (props?.fill === undefined) {
-    const resolved = resolveDimensions(dim, constraintTo)
+    const resolved = constraintTo ? constrain(dim, constraintTo) : dim
     toSpread.width = resolved.w
     toSpread.height = resolved.h
   } 
@@ -66,9 +66,8 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
         sizes: '100vw',
       }
         // only for aspect ratio and to satisfy parser
-      const resolved = resolveDimensions(dim)
-      toSpread.width = resolved.w
-      toSpread.height = resolved.h
+      toSpread.width = dim.w
+      toSpread.height = dim.h
 
       return (
         <div className='flex flex-col items-center w-full'>
@@ -84,9 +83,8 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
         props.style.width = props.style.width *.75 
       }
       else if (props?.style && !props?.style.width) {
-        const resolved = resolveDimensions(dim)
-        toSpread.width = resolved.w * .75
-        toSpread.height = resolved.w * .75
+        toSpread.width = dim.w * .75
+        toSpread.height = dim.h * .75
       }
     }
   }

package/blocks/components/screenful-block/index.tsx

@@ -37,6 +37,7 @@ const ScreenfulComponent: React.FC<{
   const specified = (s: string) => (containsToken(b.specifiers, s))
   const narrowGutters = specified('narrow-gutters') // eg, for a table object that is large
   const noGutters = specified('no-gutters')
+  const fullScreenWidth = specified('full-screen-width')
   const vertCenter = specified('vert-center')
 
     // content wrapper clx:
@@ -46,7 +47,8 @@ const ScreenfulComponent: React.FC<{
     //    p&m-modifiers
     // ]
   const cwclx = [
-    'xl:mx-auto max-w-screen-xl overflow-y-hidden ',
+    'xl:mx-auto overflow-y-hidden ',
+    fullScreenWidth ? '' : 'max-w-screen-xl',
       // desktop header: 80px / pt-20
       // mobile header: 44px / pt-11  
     narrowGutters ? 

package/blocks/components/video-block.tsx

@@ -13,7 +13,7 @@ import type BlockComponentProps from './block-component-props'
 const VideoBlockComponent: React.FC<BlockComponentProps & {
   usePoster?: boolean
   size?: TShirtSize
-  constrainTo?: {w: number, h: number}
+  constrainTo?: Dimensions
 }> = ({
   block,
   className='',
@@ -23,7 +23,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
   constrainTo
 }) => {
 
-  const [_dim, setDim] = useState<{w: number, h: number} | undefined>(undefined)
+  const [_dim, setDim] = useState<Dimensions | undefined>(undefined)
 
   const onResize = () => { 
     setDim({
@@ -120,7 +120,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
   }
   
   const videoDims = b.dim as TShirtDimensions
-  const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as {w: number, h: number}
+  const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as Dimensions
   const conDim = (constrainTo ? constrain(dim, constrainTo) : dim) 
   return usePoster ? (
     <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.4.4",
+  "version": "3.5.1",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -49,6 +49,8 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.75",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

package/primitives/button.tsx

@@ -7,7 +7,7 @@ import { cn } from "../util"
 const variant = {
   primary: "bg-primary text-primary-fg hover:bg-primary-hover font-nav whitespace-nowrap not-typography",
   secondary: "bg-secondary text-secondary-fg hover:bg-secondary-hover font-nav whitespace-nowrap not-typography",
-  outline: "text-foreground bg-background border border-muted-4 hover:bg-level-1 hover:text-accent hover:border-accent font-nav whitespace-nowrap not-typography",
+  outline: "text-foreground bg-background border border-muted-1 hover:bg-level-1 hover:text-accent hover:border-accent font-nav whitespace-nowrap not-typography",
   destructive: "bg-destructive text-destructive-fg font-sans whitespace-nowrap hover:bg-destructive-hover",
   ghost: "text-foreground hover:bg-level-1 hover:text-accent whitespace-nowrap font-sans ",
   link: "text-foreground hover:text-muted-1 font-sans ",
@@ -19,7 +19,7 @@ const size = {
   xs: "h-8 px-2 text-xs",
   sm: "h-9 px-3 text-xs",
   square: 'h-10 py-2 px-2 text-sm aspect-square',
-  default: "h-10 py-2 px-4 text-sm lg:min-w-[220px]",
+  default: "h-10 py-2 px-4 text-sm min-w-0",
   lg: "h-10 px-8 text-sm md:text-base min-w-0 md:min-w-[260px] lg:min-w-[300px]",
   icon: "h-10 w-10",
 }
@@ -54,7 +54,7 @@ const buttonVariants = cva(
 
 type ButtonVariants = keyof typeof variant
 type ButtonSizes = keyof typeof size
-type ButtonRounded = keyof typeof rounded
+type ButtonRoundedValue = keyof typeof rounded
 
 interface ButtonProps extends
   React.ButtonHTMLAttributes<HTMLButtonElement>, 
@@ -83,6 +83,6 @@ export {
   type ButtonProps,
   type ButtonVariants,
   type ButtonSizes, 
-  type ButtonRounded,
+  type ButtonRoundedValue,
   buttonVariants,
 }

package/primitives/carousel.tsx

@@ -2,26 +2,26 @@
 
 import * as React from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
-import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 
 import { cn } from '../util'
 import Button from './button'
 
 type CarouselApi = EmblaCarouselType  
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugins = UseCarouselParameters[1]
+type CarouselOptions = EmblaOptionsType
+type CarouselPlugin = EmblaPluginType
 
 type CarouselProps = {
   options?: CarouselOptions
-  plugins?: CarouselPlugins
+  plugins?: CarouselPlugin[] 
   orientation?: 'horizontal' | 'vertical'
   setApi?: (api: CarouselApi) => void
   onCarouselSelect?: (api: CarouselApi) => void 
 }
 
-type CarouselContextProps = {
+type UseCarouselType = {
   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
   api: ReturnType<typeof useEmblaCarousel>[1]
   scrollPrev: () => void
@@ -30,112 +30,76 @@ type CarouselContextProps = {
   canScrollNext: boolean
 } & CarouselProps
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel(): CarouselContextProps {
-  const context = React.useContext(CarouselContext)
+const CarouselContext = React.createContext<UseCarouselType | null>(null)
 
-  if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />')
-  }
-
-  return context
+const useCarousel = (): UseCarouselType => {
+  const service = React.useContext(CarouselContext)
+  if (!service) { throw new Error('useCarousel must be used within a <Carousel />') }
+  return service
 }
 
 // https://github.com/emilkowalski/vaul/pull/250
 // See data-vaul-no-drag throughout
 
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = 'horizontal',
-      options,
-      setApi,
-      plugins,
-      className,
-      children,
-      onCarouselSelect,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...options,
-        axis: orientation === 'horizontal' ? 'x' : 'y',
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({
+    orientation = 'horizontal',
+    options,
+    setApi,
+    plugins,
+    className,
+    children,
+    onCarouselSelect,
+    ...props
+  }, ref ) => {
+
+    const [carouselRef, api] = useEmblaCarousel({...options, axis: orientation === 'horizontal' ? 'x' : 'y'}, plugins)
+
+    const [canScrollPrev, setCanScrollPrev] = React.useState<boolean>(false)
+    const [canScrollNext, setCanScrollNext] = React.useState<boolean>(false)
 
     const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
+      if (!api) { return } // would this ever happen??
 
       setCanScrollPrev(api.canScrollPrev())
       setCanScrollNext(api.canScrollNext())
-      if (onCarouselSelect) {
-        onCarouselSelect(api)
-      }
+      if (onCarouselSelect) { onCarouselSelect(api)}
     }, [])
 
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+    const scrollPrev = React.useCallback(() => { api?.scrollPrev()}, [api])
+    const scrollNext = React.useCallback(() => { api?.scrollNext()}, [api])
 
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault()
-          scrollPrev()
-        }
-        else if (event.key === 'ArrowRight') {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      }
+      else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
       }
+    }, [scrollPrev, scrollNext])
 
+    React.useEffect(() => {
+      if (!api || !setApi) { return }
       setApi(api)
     }, [api, setApi])
 
     React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
+      if (!api) { return }
       onSelect(api)
       api.on('reInit', onSelect)
       api.on('select', onSelect)
-
-      return () => {
-        api?.off('select', onSelect)
-      }
+      return () => { api?.off('select', onSelect) }
     }, [api, onSelect])
 
     return (
       <CarouselContext.Provider
         value={{
           carouselRef,
-          api: api,
+          api,
           options,
-          orientation:
-            orientation || (options?.axis === 'y' ? 'vertical' : 'horizontal'),
+          orientation: orientation || (options?.axis === 'y' ? 'vertical' : 'horizontal'),
           scrollPrev,
           scrollNext,
           canScrollPrev,
@@ -207,7 +171,7 @@ CarouselItem.displayName = 'CarouselItem'
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+>(({ className, variant = 'ghost', size = 'icon', ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
@@ -236,7 +200,7 @@ CarouselPrevious.displayName = 'CarouselPrevious'
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+>(({ className, variant = 'ghost', size = 'icon', ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
@@ -264,7 +228,7 @@ CarouselNext.displayName = 'CarouselNext'
 
 export {
   type CarouselApi,
-  type EmblaOptionsType as CarouselOptionsType,
+  type CarouselOptions,
   Carousel,
   CarouselContent,
   CarouselItem,

package/primitives/drawer.tsx

@@ -49,7 +49,7 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-2 shrink-0' />
+      <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-3 shrink-0' />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

package/primitives/image.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import NextImage from 'next/image'
 
-import type { ImageDef } from '../types'
-import { resolveDimensions, cn } from '../util'
+import type { ImageDef, Dimensions } from '../types'
+import { constrain, cn } from '../util'
 
 const Image: React.FC<{
   def: ImageDef
-  constrainTo?: {w: number, h: number}
+  constrainTo?: Dimensions
   fullWidth?: boolean
   className?: string
   preload?: boolean
@@ -38,7 +38,7 @@ const Image: React.FC<{
     }
   }
   else {
-    const resolved = resolveDimensions(dim, constrainTo)
+    const resolved = constrainTo ? constrain(dim, constrainTo) : dim
     toSpread.width = resolved.w
     toSpread.height = resolved.h
   } 
@@ -62,10 +62,10 @@ const Image: React.FC<{
 
   return (fullWidth) ? (
     <div className='relative flex flex-col items-center w-full'>
-      <NextImage src={src} alt={alt} {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>
+      <NextImage src={src} alt={alt} data-vaul-no-drag {...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)}/>   
+    <NextImage src={src} alt={alt} data-vaul-no-drag {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>   
   )
 }
 

package/primitives/index.ts

@@ -147,7 +147,7 @@ export {
 
 export {
   type CarouselApi,
-  type CarouselOptionsType,
+  type CarouselOptions,
   Carousel,
   CarouselContent,
   CarouselItem,
@@ -174,6 +174,7 @@ export { default as Calendar } from './calendar'
 export { default as Checkbox } from './checkbox' 
 export { default as Image } from './image'
 export { default as Progress } from './progress' 
+export { default as MediaStack } from './media-stack' 
 export { default as Separator } from './separator' 
 export { default as Skeleton } from './skeleton' 
 export { default as InlineIcon } from './inline-icon' 

package/primitives/input-otp.tsx

@@ -34,7 +34,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-2 text-sm ',
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-3 text-sm ',
         'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
         isActive && 'z-above-content ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
         className

package/primitives/input.tsx

@@ -13,8 +13,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-inherit px-3 py-2 text-sm ring-offset-background ' + 
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-1 ' + 
+          'flex h-10 w-full rounded-md border border-muted-3 bg-inherit px-3 py-2 text-sm ring-offset-background ' + 
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-2 ' + 
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' + 
           'first-letter:disabled:cursor-not-allowed disabled:opacity-50',
           className

package/primitives/media-stack.tsx

@@ -0,0 +1,67 @@
+'use client'
+import React from 'react'
+
+import Spline from '@splinetool/react-spline'
+
+import { cn, constrain } from '../util'
+import { type Block, type VideoBlock, VideoBlockComponent } from '../blocks'
+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: {img, video, animation},
+  constrainTo: cnst = {w: 250, h: 250},
+  clx=''
+}) => {
+
+
+    // Order of precedence: 3D > MP4 > Image
+  if (animation) {
+    return ( 
+      <Spline
+        scene={animation}
+        className={cn(clx, 'pointer-events-none')} 
+        data-vaul-no-drag 
+        style={{
+            // // !aspect-[12/10] 
+          width: (6/5 * (typeof cnst.h === 'number' ? cnst.h as number : parseInt(cnst.h as string)) ),
+          height: cnst.h
+        }}
+      />
+    )
+  } 
+  if (video) {
+
+    const dim = constrain(video.dim.md, cnst)
+    return (
+      <VideoPlayer 
+        className={cn('mx-auto', clx)} 
+        sources={video.sources} 
+        width={dim.w} 
+        height={dim.h} 
+        style={{
+          minHeight: dim.h // prevents layout jumps
+        }}
+        {...video.videoProps} 
+      />
+    )
+  } 
+  return img ? ( 
+    <Image
+      def={img}
+      constrainTo={cnst} 
+      className={cn('mx-auto', clx)}
+    />
+  ) : (
+    <div style={{width: cnst.w, height: cnst.h}} className={cn('bg-level-2', clx)} />
+  )
+
+}
+
+export default MediaStack

package/primitives/select.tsx

@@ -17,8 +17,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-muted-2 ' + 
-      'bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-3 ' + 
+      'flex h-10 w-full items-center justify-between rounded-md border border-muted-3 ' + 
+      'bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-2 ' + 
       'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ' + 
       'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className

package/primitives/text-area.tsx

@@ -10,8 +10,8 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-muted-2 px-3 py-2 text-sm ' + 
-          'placeholder:text-muted-3  focus-visible:outline-none focus-visible:ring-2 ' + 
+          'flex min-h-[80px] w-full rounded-md border border-muted-3 px-3 py-2 text-sm ' + 
+          'placeholder:text-muted-2  focus-visible:outline-none focus-visible:ring-2 ' + 
           'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}

package/primitives/video-player.tsx

@@ -3,19 +3,16 @@ import React from 'react'
 
 interface VideoProps extends React.ComponentPropsWithoutRef<"video"> {
   sources: string[]
-  className?: string
 }
 
 const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
 ({
   sources, 
-  className='', 
   ...rest
 }, ref) => {
   
-
   return (
-    <video ref={ref} {...rest} className={className}>
+    <video ref={ref} {...rest}  data-vaul-no-drag >
     {sources.map((source, index) => (  
       <source key={index} src={source} />
     ))} 

package/style/hanzo-default-colors.css

@@ -45,8 +45,7 @@
     --hz-ui-destructive-hover: hsl(0 62.8% 25%);
     --hz-ui-destructive-fg: hsl(0 0% 100%);
 
-    --hz-ui-input: var(--hz-ui-bg-1);
-    --hz-ui-ring: var(--hz-ui-fg-1);
+    --hz-ui-ring: var(--hz-ui-fg-2);
 
     --hz-ui-radius: 0.5rem;
   }
@@ -54,7 +53,7 @@
   .hanzo-ui-dark-theme {
 
     --hz-ui-fg-0: hsl(0 0% 100%);
-    --hz-ui-fg-body: hsl(0, 100%, 0%);
+    --hz-ui-fg-body: hsl(0, 0%, 97%);
     --hz-ui-fg-1: hsl(0 0% 85%);
     --hz-ui-fg-2: hsl(0 0% 70%);
     --hz-ui-fg-3: hsl(0 0% 55%);

package/tailwind/colors.tailwind.js

@@ -2,7 +2,6 @@ export default ({ colors }) => ({
   inherit: colors.inherit,
   current: colors.current,
   transparent: colors.transparent,
-  input: "var(--hz-ui-input)",
   ring: "var(--hz-ui-ring)",
   background: 'var(--hz-ui-bg-0)',
     // Should be partially transparent,

package/tailwind/typography-test.mdx

@@ -17,7 +17,7 @@ laboris nisi ut aliquip ex ea commodo consequat.
 2) dolor in reprehenderit 
 3) in voluptate velit esse 
 
-Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaefam cupidatat non proident,
 
 - sunt in culpa 
 - qui officia deserunt 

package/types/animation-def.ts

@@ -0,0 +1,3 @@
+type AnimationDef = string
+
+export { type AnimationDef as default }

package/types/dimensions.ts

@@ -1,10 +1,4 @@
-type Dimensions = {
-  w: number
-  ar: number
-} | {
-  h: number
-  ar: number
-} | {
+interface Dimensions {
   w: number
   h: number
 }

package/types/image-def.ts

@@ -1,3 +1,4 @@
+import type { ButtonRoundedValue } from '../primitives/button'
 import type Dimensions from './dimensions'
 
   /**
@@ -23,6 +24,8 @@ interface ImageDef {
      * can determine the aspect ratio
     */
   dim:  Dimensions 
+
+  rounded?: ButtonRoundedValue
 }
 
 export {

package/types/index.ts

@@ -1,21 +1,31 @@
+
+export type { default as AnimationDef } from './animation-def'
 export { type Breakpoint, Breakpoints } from './breakpoints'
-export {
-  type ButtonDef,
-  type SubmitServerAction,
-  type ButtonModalProps,
-  type ButtonModalDef,
+export type { default as BulletItem } from './bullet-item'
+
+export type {
+  ButtonDef,
+  SubmitServerAction,
+  ButtonModalProps,
+  ButtonModalDef,
 } from './button-def'
 
-export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL } from './grid-def'
-export type {default as GridDef, GridColumnSpec} from './grid-def'
-export type { default as Dimensions } from './dimensions' 
-export type { default as TShirtDimensions } from './tshirt-dimensions' 
 export type { ContactInfo, ContactInfoFields } from './contact-info'
+export type { default as Dimensions } from './dimensions' 
+
+export type { default as GridDef, GridColumnSpec } from './grid-def'
+export { 
+  COMMON_GRID_1_COL, 
+  COMMON_GRID_2_COL, 
+  COMMON_GRID_3_COL, 
+  COMMON_GRID_4_COL 
+} from './grid-def'
 
-export type { default as BulletItem } from './bullet-item'
 export type { default as Icon } from './icon'
 export type { default as ImageDef } from './image-def'
 export type { default as LinkDef } from './link-def'
+export type { default as MediaStackDef } from './media-stack-def'
+export type { default as TShirtDimensions } from './tshirt-dimensions' 
 export type { default as TShirtSize } from './t-shirt-size' 
 export type { default as VideoDef } from './video-def'
 

package/types/media-stack-def.ts

@@ -0,0 +1,11 @@
+import type AnimationDef from './animation-def'
+import type ImageDef from './image-def'
+import type VideoDef from './video-def'
+
+interface MediaStackDef {
+  img?: ImageDef
+  video?: VideoDef
+  animation?: AnimationDef
+}
+
+export { type MediaStackDef as default }

package/util/index.ts

@@ -50,16 +50,8 @@ export const asNum = (n: number | `${number}`): number => (
   (typeof n === 'number') ? n : parseInt(n, 10)  
 )
 
-export const resolveDimensions = (dim: Dimensions, constraint?: {w: number, h: number}): {w: number, h: number} => {
-
-  const resolved = ('w' in dim) ? 
-    (('h' in dim) ? {w: dim.w, h: dim.h} : { w: dim.w, h: dim.w / dim.ar }) : { w: dim.h * dim.ar, h: dim.h }
-
-  return constraint ? constrain(resolved, constraint) : resolved
-}
-
   // https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
-export const constrain = (d: {w: number, h: number}, c: {w: number, h: number}): {w: number, h: number} => {
+export const constrain = (d: Dimensions, c: Dimensions): Dimensions => {
 
   const ratio = Math.min(c.w / d.w, c.h / d.h)
   return {